Rasa Chat Widget - Widget ⋅ Storybook

Rasa Chat Widget

Open canvas in new tab

The widget will won't show here, instead it will attach itself to the main page.

Configuration Options

Name Description Default Control
data-root-element-id Root element to which the chat window will attach
stringHTMLElement		 document.body -
data-websocket-url* Websocket URL for the Rasa bot. If no path is supplied, it will default to /socket.io.
If a path is supplied the user must specify the full path including the /socket.io
directory if it exists.
string		 -
data-avatar-url An optional URL for the avatar
string		 - Set string
data-avatar-background Background color of the avatar
string		 "#5C8EFF"
data-default-open Whether the widget defaults to being open
stringboolean		 false Set boolean
data-close-on-outside-click Whether the widget should close when the user clicks outside of it
stringboolean		 true Set boolean
data-font Font to use. User must define the font on the page
string		 "Noto Sans" Set string
data-height Height of the chat popup
stringnumber		 560 Set number
data-initial-payload Payload to be automatically sent to the bot upon initialisation
string		 - Set string
data-primary Primary color
string		 "#2C5DCB"
data-primary-highlight Primary highlight color
string		 "#2C5DCB"
data-token JSON Web Token for accessing the bot if necessary
string		 - Set string
data-width Width of the chat popup
stringnumber		 375 Set number

Controls

Name Control
data-root-element-id -
data-websocket-url*
data-avatar-url Set string
data-avatar-background
data-default-open Set boolean
data-close-on-outside-click Set boolean
data-font Set string
data-height Set number
data-initial-payload Set string
data-primary
data-primary-highlight
data-token Set string
data-width Set number