🤖 Global Trade Expert 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

<script src="https://gupta-tools.web.app/embed.js"></script>

Staging (branch Hosting)

<script src="https://gupta-tools.web.app/embed-branch.js"></script>

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:

🚀 Deployment

Deploy these files to any static hosting service: