Rasa Webchat: An Overview
Introduction
Rasa Webchat is a dynamic chat widget designed to seamlessly integrate virtual assistants from either the Rasa or Botfront platforms into any website. This tool enables businesses and developers to create an interactive chat experience for users directly on their web platforms. It is tailored to work efficiently with different versions of Rasa, with specific compatibility notes for certain releases.
Key Features
Rasa Webchat offers a range of features to enhance the user experience:
- Text Messages: Support for simple, direct communication through text.
- Quick Replies: Provides predefined answer buttons for rapid user response.
- Images and Carousels: Allows the display of images and carousel content, enhancing conversation dynamics.
- Markdown Support: Enables the use of markdown for text formatting.
- Persistent Sessions: Keeps chat interactions stable and continuous across sessions.
- Typing Indications: Gives users visual cues when the bot or the user is composing a message.
- Smart Delay between Messages: Intelligently spaces out message delivery for better readability.
- Flexible Integration: Can be integrated into websites either via a script tag or as a React component.
Usage Instructions
Using a <script> Tag
To deploy Rasa Webchat using a script tag, the following snippet can be included in the HTML body:
<script>!(function () {
let e = document.createElement("script"),
t = document.head || document.getElementsByTagName("head")[0];
(e.src = "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"),
(e.async = true),
(e.onload = () => {
window.WebChat.default(
{
customData: { language: "en" },
socketUrl: "https://bf-botfront.development.agents.botfront.cloud",
},
null
);
}),
t.insertBefore(e, t.firstChild);
})();
</script>
It is recommended to specify the version number to avoid any compatibility issues.
As a React Component
Installation via npm:
npm install rasa-webchat
Implementation in a React application:
import Widget from 'rasa-webchat';
function CustomWidget() {
return (
<Widget
initPayload={"/get_started"}
socketUrl={"http://localhost:5500"}
socketPath={"/socket.io/"}
customData={{"language": "en"}}
title={"Title"}
/>
);
}
The embedded property can be set to true if the chat widget should always be open within the webpage.
Customization Options
Rasa Webchat comes with various parameters and properties that allow customization according to the developer’s needs:
- initPayload: Automatically sends a specific payload when a session starts.
- customData: Allows the sending of additional data to the server, often necessary for multilingual bot implementations.
- docViewer: Opens document links in a popup for easy viewing.
- Styling: Offers CSS class names for extensive styling customization.
Integrations
Rasa Webchat is primarily designed for use with the Rasa or Botfront backends. These configurations support complex interactions and data processing:
Rasa
Rasa Webchat employs the socketio channel, detailed in Rasa's documentation. Developers can create custom channels to further utilize customData.
Botfront
It is integral for multilingual bots and requires language specifications via customData. Further documentation and specifics are detailed within Botfront's resources.
Conclusion
Rasa Webchat is an adaptable and robust solution for deploying virtual assistants on websites. Its rich feature set, coupled with easy integration and customization options, makes it an invaluable tool for developers seeking to enhance user interaction on their web platforms. With support for textual, visual, and interactive user interfaces, Rasa Webchat is well-equipped to handle a variety of communication needs.