Embed Habibi Widget

Add Habibi, your AI concierge, to any website. The chat bubble will appear in the bottom-left corner.

⚠️ Important: We recommend Option 1 — Script Tag for the best experience. It embeds a lightweight, self-contained chat panel directly on your site — chat-only, no full app loaded. Option 2 (Iframe) loads the /widget chat-only page inside an iframe.

Option 1 — Script Tag (Recommended)

Paste a single script tag before the closing </body> tag. This injects a fully self-contained chat widget — only the Habibi chat bubble and panel, nothing else.

<script src="/api/widget/embed"></script>

Option 2 — Iframe (Alternative)

Loads the chat-only /widget page in a small iframe with a toggle button. Use this if the script tag doesn't work on your platform.

<!-- Habibi Chat Widget - Chat Only (iframe) --> <div id="habibi-chat" style="position:fixed;bottom:24px;left:24px;z-index:9999;"> <button id="habibi-btn" onclick="var f=document.getElementById('habibi-frame');if(f.style.display==='none'||f.style.display===''){f.style.display='block';this.textContent='✕';}else{f.style.display='none';this.textContent='💬';}" style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#C5A44E,#D4B96A);border:none;cursor:pointer;color:white;font-size:26px;box-shadow:0 4px 20px rgba(197,164,78,0.4);">💬</button> <iframe id="habibi-frame" src="/widget" style="display:none;position:absolute;bottom:70px;left:0;width:380px;height:560px;border:none;border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,0.15);" allow="clipboard-write" loading="lazy"></iframe> </div>

Features

  • ✦ Bottom-left floating chat bubble with gold accent
  • ✦ Pre-set suggestion prompts to guide visitors
  • ✦ AI-powered responses via Gemini using your Dwntwna Dubai content
  • ✦ Fully responsive — works on mobile and desktop
  • ✦ Conversation history preserved per visitor session
  • ✦ Luxury black, white, and gold styling
  • ✦ Chat-only — does not load the full Dwntwna Dubai app
  • ✦ RAG-powered — answers come from your scraped website content

How to use (WordPress + WPCode)

  1. Copy the Option 1 — Script Tag code above (recommended)
  2. In WPCode, create a new HTML Snippet
  3. Set the insertion location to Site Wide Footer
  4. Paste the code and activate the snippet
  5. The Habibi ✦ chat bubble will appear on the bottom-left of every page

💡 Tip: Make sure to run the scraper from the Admin page first so Habibi has your latest Dwntwna Dubai content to answer from. Without scraped content, Habibi will only use the built-in venue database.