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:

  • If 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 need to create a separate Widget ID using your development URL (e.g., http://localhost:3000)
  • Domain input supports wildcard (*) expression:
    • *.example.com will match any subdomain of example.com
    • http://localhost:* will match any port of localhost
    • * will match any domain, so be careful with this option! Anyone who knows your Widget ID can send requests to your Guru.

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. Possible values are "light", "dark", "auto". Auto mode syncs the widget theme with the website’s theme"dark"
data-bg-colorPrimary colorFetched from Gurubase
data-icon-urlCustom logo URLFetched from Gurubase
data-nameCustom nameFetched from Gurubase
data-baseUrlURL to your Gurubase backend. Only for self-hosted Gurubase.Gurubase Cloud
data-tooltipTooltip textnull
data-tooltip-side"top", "bottom", "left", "right", "top left", "top right", "bottom left", "bottom right""left"
data-overlap-contentWhether to overlap the main content or shrink its width with the sidebar"false"

​
Self-hosted Installation

If you’re using self-hosted Gurubase, you must set the Gurubase instance URL using the data-baseUrl attribute. The default URL of Self-hosted Gurubase instance 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="light"
    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.

​
Platform-Specific Integrations

​
Archbee

To add the Gurubase widget to your Archbee documentation:

  1. Go to Space Settings > Custom Code
  2. Under the “Include Headers” text area, paste the Gurubase widget script that you received from the Gurubase platform:

For security reasons, scripts are only included on a custom domain in Archbee. Make sure you have set up a custom domain for your documentation to use the widget.

​
GitBook

GitBook offers an official integration that makes it easy to add Gurubase to your documentation:

  1. In your GitBook space, go to Integrations and search for Gurubase
  2. Click Install to add the integration
  3. Click Install on a docs site and select a site to install
  4. Enter your Widget ID from Gurubase platform
  5. Configure additional options (optional)

After few minutes, you will see the “Ask AI” button in your GitBook documentation.

​
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