我需要修改一个静态网页,需求是在静态网页右下角添加一个按钮,点一下出现智能客服的聊天窗口,使用 Rasa Web Chat 工具来实现嵌入式聊天窗口,需要添加一个输入框,用于用户输入文本问题,一个按钮用于提交问题,以及一个输出框,用于展示回答。写代码示例
时间: 2024-03-17 16:44:21 浏览: 115
好的,以下是一个简单的示例代码,你可以根据你的具体需求进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>静态网页</title>
<style>
/* 按钮样式 */
#chat-button {
position: fixed;
right: 20px;
bottom: 20px;
background-color: #4CAF50;
color: white;
padding: 10px;
border-radius: 50%;
cursor: pointer;
}
/* 聊天窗口样式 */
#chat-window {
position: fixed;
bottom: 80px;
right: 20px;
width: 300px;
height: 400px;
background-color: #f1f1f1;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow-y: scroll;
display: none;
}
/* 输入框样式 */
#input {
width: 100%;
padding: 10px;
border: none;
border-top: 1px solid #ddd;
font-size: 16px;
}
/* 提交按钮样式 */
#submit-button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
cursor: pointer;
width: 100%;
border-radius: 0 0 5px 5px;
}
/* 回答框样式 */
#output {
padding: 10px;
border-top: 1px solid #ddd;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 添加按钮 -->
<div id="chat-button">智能客服</div>
<!-- 添加聊天窗口 -->
<div id="chat-window">
<!-- 输入框 -->
<input type="text" id="input" placeholder="请输入问题">
<!-- 提交按钮 -->
<button id="submit-button">提交</button>
<!-- 回答框 -->
<div id="output"></div>
</div>
<!-- 引入 Rasa Web Chat -->
<script src="https://cdn.jsdelivr.net/npm/rasa-webchat/lib/index.js"></script>
<script>
// 点击按钮显示聊天窗口
document.getElementById("chat-button").addEventListener("click", function() {
document.getElementById("chat-window").style.display = "block";
});
// 点击提交按钮获取用户输入的问题并展示回答
document.getElementById("submit-button").addEventListener("click", function() {
var input = document.getElementById("input").value;
if (input != "") {
// 使用 Rasa Web Chat 发送用户输入的问题并获取回答
RasaWebChat.send(input).then(function(response) {
document.getElementById("output").innerHTML += "我:" + input + "<br>";
document.getElementById("output").innerHTML += "客服:" + response[0].text + "<br>";
});
// 清空输入框
document.getElementById("input").value = "";
}
});
// 初始化 Rasa Web Chat
RasaWebChat.init({
socketUrl: "http://localhost:5005",
title: "智能客服",
subtitle: "欢迎来到智能客服",
embedded: true,
hideWhenNotConnected: true,
hideInputBox: true,
hideWhenNotConnectedDelay: 2000
});
</script>
</body>
</html>
```
需要注意的是,这里使用的是 Rasa Web Chat 工具,需要先在你的服务器上部署 Rasa 服务,然后将 `socketUrl` 修改为你的 Rasa 服务地址。另外,这里使用了一些简单的样式来美化聊天窗口,你可以根据你的需求进行修改。
阅读全文