Chatbot Widget Demo

📋 Embed vs full widget page

embed.js injects the round launcher (bottom-left). Click opens a compact chat panel (about 384×520px) sitting just above the button—traditional widget style. The panel loads widget.html inside an iframe. Same idea as src/components/ChatbotWidget.jsx, implemented in Hostin embed.js so you do not need to ship the CRA bundle for the paste-in snippet.

Open widget.html alone for the standalone full-page chat (no launcher).

Production snippet

Second instance (branch embed)

widget.html on branch Hosting. If the snippet sits inside Elementor HTML (mid-page), the iframe is inlined there automatically so the column isn’t empty. Footer / global use still gets the FAB. Optional: data-inline, data-height="680", or data-fab to force a mode.

Manual control (optional)

After the embed loads:

window.loadChatbot(); /* show chat panel */

window.toggleChatbot(); /* hide / show */

window.removeChatbot(); /* remove launcher + iframe */

Branch: loadChatbotBranch, toggleChatbotBranch, removeChatbotBranch

🎮 Demo Controls

Open the chat panel without clicking the FAB, or remove the launcher:

⚙️ Configuration

The widget is configured to use the following API endpoint:

API Endpoint: https://us-central1-gupta-tools.cloudfunctions.net/chatbot

To change the API endpoint, edit the API_CONFIG.endpoint in the widget.html file.

📁 File Structure

Your widget consists of these files:

widget.html - The chat UI loaded inside the embed iframe
embed.js - Pastable script (production Hosting URL)
embed-branch.js - Same launcher pattern; separate globals; iframe uses branch widget.html (also deployed from this repo)
index.html - This demo page

🚀 Deployment

Deploy these files to any static hosting service:

Firebase Hosting
Netlify
Vercel
GitHub Pages
Any CDN or web server

🤖 Global Trade Expert Widget Demo