diff --git a/README.md b/README.md
index 27e49b98c..dd480c97d 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,9 @@
- 
+
+ 
+
diff --git a/docs/gurubase.js b/docs/gurubase.js
new file mode 100644
index 000000000..83cfb8d33
--- /dev/null
+++ b/docs/gurubase.js
@@ -0,0 +1,53 @@
+// Customize widget settings
+const widgetSettings = {
+ widgetId: "VD4cSN50VRpdWDIeSpVeYaQYiaND85NwIDv7ppAByDw", // Use different widget ID for localhost - https://gurubase.io/guru/permify/integrations/web_widget
+ overlapContent: true,
+ // Optional configurations:
+ // text: "Ask AI", // Button text
+ // margins: { bottom: "20px", right: "20px" }, // Widget positioning
+ // lightMode: false, // Force light mode
+ // name: "YOUR_NAME", // Widget name
+ // iconUrl: "YOUR_ICON_URL", // Widget icon URL
+ // bgColor: "#000000", // Widget background color
+ };
+
+ // 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);
\ No newline at end of file
diff --git a/docs/mint.json b/docs/mint.json
index 534aab36b..e40660fc5 100644
--- a/docs/mint.json
+++ b/docs/mint.json
@@ -420,5 +420,10 @@
"twitter": "https://twitter.com/getPermify",
"github": "https://github.com/Permify/permify",
"linkedin": "https://www.linkedin.com/company/permifyco"
- }
+ },
+ "scripts": [
+ {
+ "src": "/gurubase.js"
+ }
+ ]
}