diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
index 673008a063..8e2ddc2c92 100644
--- a/docs/_static/css/custom.css
+++ b/docs/_static/css/custom.css
@@ -11,3 +11,7 @@ pre {
     max-width: 2560px !important;
   }
 }
+
+#my-component-root *, #headlessui-portal-root * {
+  z-index: 1000000000000;
+}
diff --git a/docs/_static/js/mendablesearch.js b/docs/_static/js/mendablesearch.js
new file mode 100644
index 0000000000..e3d2c1369a
--- /dev/null
+++ b/docs/_static/js/mendablesearch.js
@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Load the external dependencies
+  function loadScript(src, onLoadCallback) {
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = onLoadCallback;
+    document.head.appendChild(script);
+  }
+
+  function createRootElement() {
+    const rootElement = document.createElement('div');
+    rootElement.id = 'my-component-root';
+    document.body.appendChild(rootElement);
+    return rootElement;
+  }
+
+  
+
+  function initializeMendable() {
+    const rootElement = createRootElement();
+    const { MendableFloatingButton } = Mendable;
+    
+
+    const icon = React.createElement('p', {
+      style: { color: '#ffffff', fontSize: '22px',width: '48px', height: '48px', margin: '0px', padding: '0px', display: 'flex', alignItems: 'center', justifyContent: 'center' },
+    }, '🦜🔗');
+
+    
+    
+
+    const mendableFloatingButton = React.createElement(
+      MendableFloatingButton,
+      {
+        style: { darkMode: false, accentColor: '#010810' },
+        floatingButtonStyle: { color: '#ffffff', backgroundColor: '#010810' },
+        anon_key: '82842b36-3ea6-49b2-9fb8-52cfc4bde6bf', // Mendable Search Public ANON key, ok to be public
+        messageSettings: {
+          openSourcesInNewTab: false,
+        },
+        icon: icon,
+      }
+    );
+
+    ReactDOM.render(mendableFloatingButton, rootElement);
+  }
+
+  loadScript('https://unpkg.com/react@17/umd/react.production.min.js', () => {
+    loadScript('https://unpkg.com/react-dom@17/umd/react-dom.production.min.js', () => {
+      loadScript('https://unpkg.com/@mendable/search@0.0.83/dist/umd/mendable.min.js', initializeMendable);
+    });
+  });
+});
diff --git a/docs/conf.py b/docs/conf.py
index ae3924b590..087b2d2005 100644
--- a/docs/conf.py
+++ b/docs/conf.py
@@ -103,5 +103,10 @@ html_static_path = ["_static"]
 html_css_files = [
     "css/custom.css",
 ]
+
+html_js_files = [
+    "js/mendablesearch.js",
+]
+
 nb_execution_mode = "off"
 myst_enable_extensions = ["colon_fence"]