Website Widget

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

<script
  async
  src="https://widget.gurubase.io/widget.latest.min.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-window-mode="floating"
  id="guru-widget-id"
></script>

<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>

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

<script async src="https://widget.gurubase.io/widget.latest.min.js"
    data-widget-id="YOUR_WIDGET_ID"
    data-pass-user-info="true"
    id="guru-widget-id">
</script>

<script
  async
  src="https://widget.gurubase.io/widget.latest.min.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-pass-user-info="true"
  data-user-info-source="ajs_user_traits.email"
  id="guru-widget-id"
></script>

data-pass-user-info="true" data-user-info-source="ajs_user_traits.email"

localStorage['ajs_user_traits'] = '{"email": "[email protected]", "name": "John Doe"}'

data-pass-user-info="true" data-user-info-source="mp_user_properties.email"

data-pass-user-info="true" data-user-info-source="userData.userId"

data-pass-user-info="true" data-user-info-source="user_id"

(function () {
  var widgetInitialized = false;

  function isDocsPath(pathname) {
    return pathname === "/docs" || pathname.startsWith("/docs/");
  }

  function initWidget() {
    if (widgetInitialized) return;
    // Only show on /docs pages - modify this path as needed
    if (!isDocsPath(window.location.pathname)) return;

    var existingScript = document.getElementById("guru-widget-id");
    if (existingScript) return;

    var script = document.createElement("script");
    script.src = "https://widget.gurubase.io/widget.latest.min.js";
    script.setAttribute("data-widget-id", "YOUR_WIDGET_ID");
    script.setAttribute("data-text", "Ask AI");
    script.setAttribute("data-margins", '{"bottom": "20px", "right": "20px"}');
    script.setAttribute("data-light-mode", "auto");
    script.setAttribute("data-overlap-content", "true");
    script.defer = true;
    script.id = "guru-widget-id";
    document.body.appendChild(script);
    widgetInitialized = true;
  }

  function destroyWidget() {
    if (!widgetInitialized) return;

    // Use widget's destroy method if available
    if (window.chatWidget && typeof window.chatWidget.destroy === "function") {
      window.chatWidget.destroy();
    }

    // Remove the script tag
    var script = document.getElementById("guru-widget-id");
    if (script) script.remove();

    // Remove widget instance
    if (window.chatWidget) delete window.chatWidget;
    if (window.ChatWidget) delete window.ChatWidget;

    // Remove all widget-related DOM elements
    ["#guru-widget-id", "#gurubase-chat-widget-container"].forEach(
      function (selector) {
        try {
          document.querySelectorAll(selector).forEach(function (el) {
            el.remove();
          });
        } catch (e) {}
      },
    );

    widgetInitialized = false;
  }

  function handleRouteChange() {
    if (isDocsPath(window.location.pathname)) {
      initWidget();
    } else {
      destroyWidget();
    }
  }

  function setup() {
    // Check on initial page load
    handleRouteChange();

    // Hook into History API for SPA client-side navigation
    var originalPushState = history.pushState;
    history.pushState = function () {
      originalPushState.apply(this, arguments);
      setTimeout(handleRouteChange, 0);
    };

    var originalReplaceState = history.replaceState;
    history.replaceState = function () {
      originalReplaceState.apply(this, arguments);
      setTimeout(handleRouteChange, 0);
    };

    // Handle browser back/forward buttons
    window.addEventListener("popstate", function () {
      setTimeout(handleRouteChange, 0);
    });
  }

  // Wait for DOM to be ready before accessing document.body
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", setup);
  } else {
    setup();
  }
})();

// Customize widget settings
const widgetSettings = {
  widgetId: "YOUR_WIDGET_ID", // Replace with your Widget ID from https://app.gurubase.io/my-gurus
  overlapContent: true,
  // Optional configurations:
  // text: "Ask AI",
  // margins: { bottom: "20px", right: "20px" },
  // lightMode: "auto",
  // bgColor: "#000000",
};

function initGurubaseWidget() {
  // Guard against double initialization
  if (document.getElementById("guru-widget-id")) return;

  // Load the Gurubase widget
  const guruScript = document.createElement("script");
  guruScript.src = "https://widget.gurubase.io/widget.latest.min.js";
  guruScript.defer = true;
  guruScript.id = "guru-widget-id";

  // Add widget settings as data attributes
  Object.entries(widgetSettings).forEach(([key, value]) => {
    const dataKey = `data-${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
    const dataValue = typeof value === "object" ? JSON.stringify(value) : value;
    guruScript.setAttribute(dataKey, dataValue);
  });

  // Initialize theme handling
  guruScript.addEventListener("load", () => {
    const initWidget = setInterval(() => {
      if (window.chatWidget?.switchTheme) {
        clearInterval(initWidget);

        // Handle theme changes
        const syncTheme = () => {
          const isDark = document.documentElement.classList.contains("dark");
          window.chatWidget.switchTheme(!isDark);
        };

        // Watch for theme changes
        new MutationObserver(syncTheme).observe(document.documentElement, {
          attributes: true,
          attributeFilter: ["class"],
        });

        // Set initial theme
        syncTheme();
      }
    }, 1000);

    // Stop checking after 20 seconds
    setTimeout(() => clearInterval(initWidget), 20000);
  });

  document.body.appendChild(guruScript);
}

// Wait for DOM to be ready before accessing document.body
if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initGurubaseWidget);
} else {
  initGurubaseWidget();
}

module.exports = {
  scripts: [
    {
      src: "https://widget.gurubase.io/widget.latest.min.js",
      "data-widget-id": "YOUR_WIDGET_ID",
      "data-light-mode": "auto",
      id: "guru-widget-id",
      async: true,
    },
  ],
};

extra_javascript:
  - js/gurubase-widget.js

(function () {
  function initWidget() {
    // Guard against double initialization
    if (document.getElementById("guru-widget-id")) return;

    // Load the widget
    var script = document.createElement("script");
    script.src = "https://widget.gurubase.io/widget.latest.min.js";
    script.setAttribute("data-widget-id", "YOUR_WIDGET_ID");
    script.setAttribute("data-light-mode", "auto");
    script.defer = true;
    script.id = "guru-widget-id";
    document.body.appendChild(script);

    // Theme sync for Material theme
    script.onload = function () {
      var checkWidget = setInterval(function () {
        if (window.chatWidget && window.chatWidget.switchTheme) {
          clearInterval(checkWidget);

          function syncTheme() {
            // Material theme uses data-md-color-scheme on body
            var scheme = document.body.getAttribute("data-md-color-scheme");
            var isLight = scheme === "default" || scheme === "light";
            window.chatWidget.switchTheme(isLight);
          }

          // Watch for theme changes
          new MutationObserver(syncTheme).observe(document.body, {
            attributes: true,
            attributeFilter: ["data-md-color-scheme"],
          });

          syncTheme();
        }
      }, 500);

      setTimeout(function () {
        clearInterval(checkWidget);
      }, 20000);
    };
  }

  // Wait for DOM to be ready before accessing document.body
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initWidget);
  } else {
    initWidget();
  }
})();

document.addEventListener("DOMContentLoaded", function () {
  // Customize widget settings
  const widgetSettings = {
    widgetId: "YOUR_WIDGET_ID", // Replace with your Widget ID from https://app.gurubase.io/my-gurus
    text: "Ask AI", // Optional - Button text
    margins: { bottom: "20px", right: "20px" }, // Optional
    lightMode: "auto", // Optional - "light", "dark", or "auto"
    bgColor: "#0D9373", // Optional - Widget background color
    iconUrl: "YOUR_ICON_URL", // Optional - Widget icon URL
    name: "YOUR_NAME", // Optional - Widget name
    // baseUrl: "http://localhost:8029/api/", // Optional - For self-hosted Gurubase (Enterprise only)
  };

  // Load the Gurubase widget
  const guruScript = document.createElement("script");
  guruScript.src = "https://widget.gurubase.io/widget.latest.min.js";
  guruScript.defer = true;
  guruScript.id = "guru-widget-id";

  // Add widget settings as data attributes
  Object.entries({
    "data-widget-id": widgetSettings.widgetId,
    "data-text": widgetSettings.text,
    "data-margins": JSON.stringify(widgetSettings.margins),
    "data-light-mode": widgetSettings.lightMode,
    "data-bg-color": widgetSettings.bgColor,
    "data-icon-url": widgetSettings.iconUrl,
    "data-name": widgetSettings.name,
    "data-base-url": widgetSettings.baseUrl,
  }).forEach(([key, value]) => {
    if (value) {
      // Only set if value is defined
      guruScript.setAttribute(key, value);
    }
  });

  // Append the script to the document
  document.body.appendChild(guruScript);
});

# Static files directory
html_static_path = ['_static']

# Add the widget script to all pages
html_js_files = [
    'gurubase-widget.js',
]

{% extends "!layout.html" %} {% block extrahead %} {{ super() }}
<script
  async
  src="https://widget.gurubase.io/widget.latest.min.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-light-mode="auto"
  id="guru-widget-id"
></script>
{% endblock %}

templates_path = ['_templates']

document.addEventListener("DOMContentLoaded", function () {
  const widgetSettings = {
    widgetId: "YOUR_WIDGET_ID",
  };

  const guruScript = document.createElement("script");
  guruScript.src = "https://widget.gurubase.io/widget.latest.min.js";
  guruScript.defer = true;
  guruScript.id = "guru-widget-id";
  guruScript.setAttribute("data-widget-id", widgetSettings.widgetId);
  document.body.appendChild(guruScript);

  // Theme sync for Sphinx themes with dark mode
  guruScript.onload = function () {
    var checkWidget = setInterval(function () {
      if (window.chatWidget && window.chatWidget.switchTheme) {
        clearInterval(checkWidget);

        function syncTheme() {
          var isDark =
            document.body.dataset.theme === "dark" ||
            document.documentElement.dataset.theme === "dark";
          window.chatWidget.switchTheme(!isDark);
        }

        new MutationObserver(syncTheme).observe(document.documentElement, {
          attributes: true,
          attributeFilter: ["data-theme"],
        });

        new MutationObserver(syncTheme).observe(document.body, {
          attributes: true,
          attributeFilter: ["data-theme"],
        });

        syncTheme();
      }
    }, 500);

    setTimeout(function () {
      clearInterval(checkWidget);
    }, 20000);
  };
});

{% block extrahead %} {{ super() }}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var script = document.createElement("script");
    script.src = "https://widget.gurubase.io/widget.latest.min.js";
    script.setAttribute("data-widget-id", "YOUR_WIDGET_ID");
    script.defer = true;
    script.id = "guru-widget-id";
    document.body.appendChild(script);

    script.onload = function () {
      var initWidget = setInterval(function () {
        if (window.chatWidget && window.chatWidget.switchTheme) {
          clearInterval(initWidget);

          function syncTheme() {
            var isDark =
              document.body.dataset.theme === "dark" ||
              document.documentElement.dataset.theme === "dark";
            window.chatWidget.switchTheme(!isDark);
          }

          new MutationObserver(syncTheme).observe(document.documentElement, {
            attributes: true,
            attributeFilter: ["data-theme"],
          });

          syncTheme();
        }
      }, 500);
    };
  });
</script>
{% endblock %}

// Gurubase Widget
window.addEventListener("DOMContentLoaded", () => {
  // Guard against double initialization
  if (document.getElementById("guru-widget-id")) return;

  // Customize widget settings
  const widgetSettings = {
    widgetId: "YOUR_WIDGET_ID", // Replace with your Widget ID from https://app.gurubase.io/my-gurus
    text: "Ask AI", // Optional - Button text
    margins: { bottom: "20px", right: "20px" }, // Optional
    lightMode: "light", // Optional - "light", "dark", or "auto"
    passUserInfo: true, // Pass user identifier from Zendesk HelpCenter.user.email (automatic for Zendesk)
    // bgColor: "#0D9373", // Optional - Widget background color
    // iconUrl: "YOUR_ICON_URL", // Optional - Widget icon URL
    // name: "YOUR_NAME", // Optional - Widget name
    // baseUrl: "https://gurubase.yourcompany.com/api/", // Optional - For self-hosted Gurubase (Enterprise only)
  };

  // Load the Gurubase widget
  const guruScript = document.createElement("script");
  guruScript.src = "https://widget.gurubase.io/widget.latest.min.js";
  guruScript.defer = true;
  guruScript.id = "guru-widget-id";

  // Add widget settings as data attributes
  Object.entries({
    "data-widget-id": widgetSettings.widgetId,
    "data-text": widgetSettings.text,
    "data-margins": JSON.stringify(widgetSettings.margins),
    "data-light-mode": widgetSettings.lightMode,
    "data-pass-user-info": widgetSettings.passUserInfo,
    "data-bg-color": widgetSettings.bgColor,
    "data-icon-url": widgetSettings.iconUrl,
    "data-name": widgetSettings.name,
    "data-base-url": widgetSettings.baseUrl,
  }).forEach(([key, value]) => {
    if (value) {
      // Only set if value is defined
      guruScript.setAttribute(key, value);
    }
  });

  // Append the script to the document
  document.body.appendChild(guruScript);
});

<script
  async
  src="https://widget.gurubase.io/widget.latest.min.js"
  data-widget-id="YOUR_WIDGET_ID"
  data-text="Ask AI"
  data-light-mode="auto"
  data-pass-user-info="true"
  id="guru-widget-id"
></script>

<script>
  // Guard against double initialization
  if (!document.getElementById('guru-widget-id')) {
    const script = document.createElement('script');
    script.src = 'https://widget.gurubase.io/widget.latest.min.js';
    script.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
    script.setAttribute('data-light-mode', 'auto');
    script.defer = true;
    script.id = 'guru-widget-id';
    document.body.appendChild(script);

    // Starlight theme sync
    script.onload = () => {
      const initWidget = setInterval(() => {
        if (window.chatWidget?.switchTheme) {
          clearInterval(initWidget);

          const syncTheme = () => {
            const isDark = document.documentElement.dataset.theme === 'dark';
            window.chatWidget.switchTheme(!isDark);
          };

          new MutationObserver(syncTheme).observe(document.documentElement, {
            attributes: true,
            attributeFilter: ['data-theme']
          });

          syncTheme();
        }
      }, 500);

      setTimeout(() => clearInterval(initWidget), 20000);
    };
  }
</script>

import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";

export default defineConfig({
  integrations: [
    starlight({
      // ... other config
      head: [
        {
          tag: "script",
          attrs: {
            src: "https://widget.gurubase.io/widget.latest.min.js",
            "data-widget-id": "YOUR_WIDGET_ID",
            "data-light-mode": "auto",
            id: "guru-widget-id",
            defer: true,
          },
        },
      ],
    }),
  ],
});

integrations:
  custom:
    head: |
      <script async src="https://widget.gurubase.io/widget.latest.min.js" 
          data-widget-id="YOUR_WIDGET_ID"
          data-light-mode="auto"
          id="guru-widget-id">
      </script>