Chatbot Widget Demo

📋 How to Use This Full-Page Widget

This is a ChatGPT-like full-page chatbot widget that spans the entire viewport while respecting your website's navbar. Perfect for immersive chat experiences!

Method 1: Direct Embed (Recommended)

Add this script tag to your website:

Method 2: Manual Control

Load and control the widget programmatically:

<script src="https://gupta-tools.web.app/embed.js"></script>
<script>
    // Load the full-page widget
    window.loadChatbot();
    
    // Toggle the widget visibility
    window.toggleChatbot();
    
    // Remove the widget
    window.removeChatbot();
</script>
            

✨ New Features

Full-Page Experience: Spans entire viewport width and height
Navbar Aware: Automatically detects and respects your website's navbar
ChatGPT-like UI: Modern, clean interface with avatars and message bubbles
Responsive Design: Works perfectly on desktop and mobile
Auto-Resize: Adapts to window resizing and navbar changes

🎮 Demo Controls

Test the full-page widget functionality:

⚙️ 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 main widget interface
embed.js - The embed script for websites
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