You can try the widget live on getanteon.com to see how it works in a real-world setting.

You can add your Guru directly to your website using our widget. The widget adds an “Ask AI” button that opens a chat interface when clicked.

​
Prerequisites

Before adding the widget, make sure you have:

  • A Guru on Gurubase (either on Gurubase.io or self-hosted)
  • A Widget ID from your Guru’s settings

​
Getting Your Widget ID

  1. Click “My Gurus” under the profile
  2. Click the Guru you want to add the widget to
  3. Click “Integrations” and then “Web Widget”
  4. Click “New Widget ID”
  5. Enter your website’s domain
  6. Copy the generated Widget ID

Each Widget ID is restricted to work only on the specific domain it was created for. For example:

  • A Widget ID created for https://www.example.com will only work on that exact domain
  • It won’t work on subdomains like https://docs.example.com
  • It won’t work on different domains like https://example.org
  • For local development, you’ll need to create a separate Widget ID using your development URL (e.g. http://localhost:3000)

Make sure to create Widget IDs for each domain where you want to use the widget.

​
Basic Installation

Add this script to your website’s HTML:

<!-- Gurubase Widget -->
<script async src="https://widget.gurubase.io/widget.latest.min.js" 
    data-widget-id="YOUR_WIDGET_ID"
    id="guru-widget-id">
</script>

For more examples like Astro - Starlight, Docusaurus, Mintlify, MKDocs, Next.js, JS, React, Remix, Sphinx, see our demo projects.

​
Configuration Options

OptionDescriptionDefault
data-widget-idYour widget ID (required)-
data-textButton text”Ask AI”
data-marginsButton positioning{"bottom": "1rem", "right": "1rem"}
data-light-modeLight mode toggle"true"
data-bg-colorPrimary colorFetched from Gurubase
data-icon-urlCustom logo URLFetched from Gurubase
data-nameCustom nameFetched from Gurubase

​
Self-hosted Installation

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>

​
Customization Examples

​
Custom Button Text and Position

<script async src="https://widget.gurubase.io/widget.latest.min.js" 
    data-widget-id="YOUR_WIDGET_ID"
    data-text="Need Help?"
    data-margins='{"bottom": "2rem", "right": "2rem"}'
    id="guru-widget-id">
</script>

​
Light Mode with Custom Colors

<script async src="https://widget.gurubase.io/widget.latest.min.js" 
    data-widget-id="YOUR_WIDGET_ID"
    data-light-mode="true"
    data-bg-color="#0D9373"
    id="guru-widget-id">
</script>

​
Exposed Functions

  • switchTheme(lightMode = null)

    You can use this function to sync the theme of the widget with the theme of your website. It accepts an optional lightMode boolean parameter to force the widget to be in light/dark mode. 3 possible usages of this function:

    • switchTheme(): Toggle the theme
    • switchTheme(true): Force light mode
    • switchTheme(false): Force dark mode

    This function can be accessed with window.chatWidget.switchTheme();

    An example usage is shown in the MKDocs example in the theme-switch.js script. It toggles the theme of the widget based on the MkDocs website by listening for changes in the theme and using this function with each change.

​
Source Code

The widget is open-source and available on GitHub where you can report issues, suggest features, and contribute improvements.

​
Next Steps

API Reference

Explore our API documentation

Star Gurubase on GitHub

Star Gurubase on GitHub

Create Your First GuruSlack Bot Integration