Skip to content

Update Chat Widget documentation to use new @rasahq/chat-widget-ui package #13163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JackyLeg wants to merge 1 commit into
base: 3.6.x
Choose a base branch
from
Open

Update Chat Widget documentation to use new @rasahq/chat-widget-ui package #13163

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions docs/docs/connectors/your-own-website.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,16 +171,33 @@ as a JSON object under the key `token`:

### Chat Widget

Once you've set up your SocketIO channel, you can use the official Rasa Chat Widget on any webpage.
Just paste the following into your site HTML and paste the URL of your Rasa instance into
the `data-websocket-url` attribute
Once you've set up your SocketIO channel, you can use the [official Rasa Chat Widget](https://github.com/RasaHQ/chat-widget) on any webpage. Use the example HTML below and paste the URL of your Rasa instance into the `server-url` attribute:

```html
<div id="rasa-chat-widget" data-websocket-url="https://your-rasa-url-here/"></div>
<script src="https://unpkg.com/@rasahq/rasa-chat" type="application/javascript"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Example</title>
<script
type="module"
src="https://unpkg.com/@rasahq/chat-widget-ui/dist/rasa-chatwidget/rasa-chatwidget.esm.js"
></script>
<link
rel="stylesheet"
href="https://unpkg.com/@rasahq/chat-widget-ui/dist/rasa-chatwidget/rasa-chatwidget.css"
/>
</head>
<body>
<rasa-chatbot-widget server-url="https://example.com"></rasa-chatbot-widget>
</body>
</html>
```

For more information, including how to fully customize the widget for your website, you can check out the [full documentation](https://chat-widget-docs.rasa.com/).
For more information, including how to fully customize the widget for your website, you can check out the [full documentation](https://chatwidget.rasa.com/).

Alternatively, if you want to embed the widget in a React app, there is
[a library in the NPM package repository](https://www.npmjs.com/package/@rasahq/rasa-chat).
Alternatively, if you want to embed the widget in a React app, there is [a library in the NPM package repository](https://www.npmjs.com/package/@rasahq/chat-widget-react).

:::note Deprecated Chat Widget
For information on the deprecated chat widget, [rasa-chat](https://www.npmjs.com/package/@rasahq/rasa-chat), documentation can be found [here](https://chat-widget-docs.rasa.com/).:::