Customizable Web Chat Widget 💬, deprecated, use https://github.com/mesolitica/nous-chat-widget
- Collapse and expand animation.
- Fullscreen button and animation.
- Waiting chat respond animation.
- Customize color, title, font family and first message.
- Custom POST request.
- Auto generate user UUID and store the historical chats in UserSession.
- Error message on exception.
- 100% pure vanilla Javascript.
Screen.Recording.2024-06-24.at.7.57.24.PM.mov
Use Python webserver,
python3 server.py --port 8080 --host 0.0.0.0Minimal as,
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/mesolitica/[email protected]/chat.js"></script>
<script>
ChatWidget.init(
'https://example.com',
color = '#1076EE',
first_message = 'Hi, my name is bot!',
);
</script>
</body>
</html>window.ChatWidget = {
init: function (
url,
color = "#0056FF",
title = "Conversation",
font_family = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
first_message = "Hello, my name is bot!",
init_payload = 'SpecialInitPayLoadDoNotTouch',
z_index = '1000',
) {
createChatWidget(url, color, title, font_family, first_message, init_payload, z_index);
}
};const jsonData = {
sender: userUUID,
message: text
};
fetch(url, {
method: 'POST',
headers: headers,
body: JSON.stringify(jsonData)
})
.then(response => response.json())
.then(data => {
const r = data;
removeTypingIndicator(typingIndicator);
for (let i = 0; i < r.length; i++) {
addMessage(r[i]['text'], 'ai');
}
})
.catch(error => {
removeTypingIndicator(typingIndicator);
addErrorMessage(error);
});The API must returned a single array with a dictionary element and text for the key.
We will support streaming soon.