# Rasa Chat Widget

[Open canvas in new tab](https://chat-widget-docs.rasa.com/iframe.html?id=rasa-chat-widget--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<br>stringHTMLElement | document.body | - |
| data-websocket-url* | Websocket URL for the Rasa bot. If no path is supplied, it will default to `/socket.io`.<br>If a path is supplied the user must specify the full path including the `/socket.io`<br>directory if it exists.<br>string | - |  |
| data-avatar-url | An optional URL for the avatar<br>string | - | Set string |
| data-avatar-background | Background color of the avatar<br>string | "#5C8EFF" |  |
| data-default-open | Whether the widget defaults to being open<br>stringboolean | false | Set boolean |
| data-close-on-outside-click | Whether the widget should close when the user clicks outside of it<br>stringboolean | true | Set boolean |
| data-font | Font to use. User must define the font on the page<br>string | "Noto Sans" | Set string |
| data-height | Height of the chat popup<br>stringnumber | 560 | Set number |
| data-initial-payload | Payload to be automatically sent to the bot upon initialisation<br>string | - | Set string |
| data-primary | Primary color<br>string | "#2C5DCB" |  |
| data-primary-highlight | Primary highlight color<br>string | "#2C5DCB" |  |
| data-token | JSON Web Token for accessing the bot if necessary<br>string | - | Set string |
| data-width | Width of the chat popup<br>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 |