Website Chat Integration for Rasa Stack
Our recent chatbot projects are built around the great open-source Rasa Stack framework. Besides the strong machine learning foundation for natural language understanding (NLU) and dialogue handling, it comes with support for many popular channels out of the box: Facebook Messenger, Slack, and Telegram.
Most of our clients, however, prefer to embed a chat interface directly into their website. In this blog post we introduce our custom, open-source, react-based chat UI that allows for an easy connection between a website and Rasa Core. Our solution consists of two components: 1) a web-based chat UI and 2) a custom connector for the Rasa Stack.
A React-based Chat UI for the Web
After submitting a message the chat displays a waiting indicator while waiting for the bot’s reply. In cases where the bot responds with multiple individual messages, they are revealed one after another with a slight delay to aid readability and give the bot a more life-like feeling.
You can specify a welcome message that will greet your customers when they first open the UI. We found that test users usually felt instantly familiar with the interface when the bot took the first steps and introduced itself.
The module can be easily integrated into existing websites without much effort. We provide a hosted version of the script on Amazon AWS S3 for simple integration. Alternatively, you can also integrate the component with NPM: @scalableminds/chatroom.
Customizing the chat UI is straightforward for any developer familiar with React and SASS. We made sure to extract all color options into SASS variables for easy theming. If you wish to further extend the chatroom’s functionalities you can dive into the modular React components. We are always happy to accept pull requests for new features.
Demo Mode for Scripted Screencasts
For new project pitches, we like to give customers a preview of the chatbot experience. Usually, the easiest way to visualize a typical chatbot interaction is by recording a short screencast of an example dialogue.
Therefore, we added a “demo mode” to the chat UI. You can specify a message exchange between your bot and a user as a JSON array and replay the conversations as often as you like. Check out our demo..
Custom Rasa Channel
In order to connect your web chat to Rasa Core, you have to implement a custom channel.
We created the
BotServerInputChannel to complement our web chat.
Custom channels require you to implement both a Python class for outgoing and incoming messages.
Both can be inherited from Rasa’s default implementations:
For our connector, we set up a very simple Python REST server with Klein for the incoming messages (inherited from Rasa’s
Once the server is started, just point the web chat to its URL on port 5002 and you should be all set.
To register your custom channel with Rasa Core you need to give a new instance of our
BotServerInputChannel to a Rasa Core
In your project’s main Python file add:
from bot_server_channel import BotServerInputChannel # Creating the server def main_server(): agent = Agent.load(...) channel = BotServerInputChannel(agent) agent.handle_channel(channel) main_server()