This repository includes the script for the 'Ask AI' widget, which you can add to your Guru's AI capabilities into your website.
- Your website should have a Guru on Gurubase.io. If not, request a new Guru.
- You need to have a Widget ID. You can get it from your Guru's settings page on Gurubase.io.
- Go to "My Gurus" page
- Select the Guru you want to add the widget to
- On the "Widget" section create a new widget
- Copy the Widget ID and use it in the installation section
Important
Widget IDs are unique to the provided full domains, including subdomains. If you create a Widget ID for https://www.example.com, Gurubase will only accept incoming requests from https://www.example.com. Requests from subdomains or localhost will be rejected. You can create a new Widget ID for local testing using your app's full localhost domain, e.g., http://localhost:<your_local_app_port>.
The only thing you need to do is to add the widget.js to your website as follows:
<!-- Gurubase Widget -->
<script async src="https://widget.gurubase.io/widget.latest.min.js"
data-widget-id="<your_widget_id>"
id="guru-widget-id">
</script>Important
The value of the id attribute should be "guru-widget-id", don't change it.
src, data-widget-id, id are required. You can modify the rest of the attributes to customize the widget by using the below options.
| Option | Type | Description | Default |
|---|---|---|---|
| data-widget-id | string | Your widget ID | Get it from your Guru's settings page |
| data-text | string | Text displayed on the chat button | "Ask AI" |
| data-margins | object | Button positioning margins | { bottom: "20px", right: "20px" } |
| data-bg-color | string | Primary color for the widget | Fetched from the Gurubase.io |
| data-icon-url | string | URL to your company/product logo | Fetched from the Gurubase.io |
| data-name | string | Your company/product name | Fetched from the Gurubase.io |
| data-light-mode | boolean | Whether to use light mode | false |
| data-baseUrl | string | URL to your Gurubase backend. Only for self-hosted Gurubase. | Gurubase Cloud |
Note
If you're using self-hosted Gurubase, you must set the backend URL using the data-baseUrl attribute. The default backend URL of Self-hosted Gurubase is http://localhost:8029/api/.
<script async src="https://widget.gurubase.io/widget.latest.min.js"
data-widget-id="YOUR_WIDGET_ID"
data-baseUrl="http://localhost:8029/api/"
id="guru-widget-id">
</script>Below are example installations of the Gurubase Widget for various technologies. If your technology isn’t listed, we’d gladly accept a demo, feel free to submit a pull request.