webchat

A simple webchat widget to connect with a chatbot. Forked from react-chat-widget

Features

• Plain text message UI
• Snippet style for links (only as responses for now)
• Quick Replies
• Compatible with Messenger Platform API

Usage

In your <body/>:

<divid="webchat"/><scriptsrc="https://storage.googleapis.com/mrbot-cdn/webchat-latest.js"></script><script>
WebChat.default.init({selector: "#webchat",initPayload: "/get_started",socketUrl: "http://localhost:5500",title: "Title"subtitle: "Subtitle"profileAvatar: "http://to.avat.ar"showCloseButton: truefullScreenMode: false</script>

In your backend.

Your backend should expose a socket with socket.io

Receiving messages from the chat

@socketio.on('user_uttered')defhandle_message(message):
# do something

Sending messages from the backend to the chat widget

sending plain text

emit('bot_uttered', {"text": "hello"}, room=socket_id)

sending quick replies

message= {
"text": "Happy?",
"quick_replies":[
{"title":"Yes", "payload":"/affirm"},
{"title":"No", "payload":"/deny"}
]}
emit('bot_uttered', message, room=socket_id)

sending a link Snippet

Admittedly a bit far fetched, thinking that Snippets would evolve to carousels of generic templates :)

message= {
"attachment":{
"type":"template",
"payload":{
"template_type":"generic",
"elements":[
{
"title":"Title",
"buttons":[ {
"title":"Link name",
"url": "http://link.url"
}
]
}
]
}
}
} emit('bot_uttered', message, room=socket_id)

sending a Video Message

message= {
"attachment":{
"type":"video",
"payload":{
"title":"Link name",
"src": "https://www.youtube.com/watch?v=f3EbDbm8XqY"
}
}
} emit('bot_uttered', message, room=socket_id)

sending an Image Message

message= {
"attachment":{
"type":"image",
"payload":{
"title":"Link name",
"src": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_IX5FSDQLrwm9qvuXu_g7R9t_-3yBSycZ8OxpRXvMDaTAeBEW"
}
}
}
emit('bot_uttered', message, room=socket_id)

Using with Rasa

The chat widget can communicate with any backend, but there is a Rasa core channel available here

Contributors

@PHLF@znat