Chat Widget Demo

This is a demo page showing how to implement the chat widget on your website.

<!-- Add this in your HTML head section -->
<script>
    window.ChatWidgetConfig = {
        webhook: {
            url: "https://your-webhook-url.com/chat",
            route: "customer-support"
        },
        branding: {
            logo: "https://your-logo-url.com/logo.png",
            name: "Your Company",
            welcomeText: "Welcome! How can we help you today?",
            responseTimeText: "We typically respond within 5 minutes",
            poweredBy: {
                text: "Powered by spinningtop.ai",
                link: "https://spinningtop.ai"
            }
        },
        style: {
            primaryColor: "#10b981",
            secondaryColor: "#059669",
            position: "right",
            backgroundColor: "#ffffff",
            fontColor: "#1f2937"
        },
        suggestedQuestions: [
            "How do I get started?",
            "What are your pricing plans?",
            "How can I contact support?"
        ]
    };
</script>
<script src="https://your-cdn-url.com/js/chat-widget.js"></script>

To implement the chat widget on your website:

  1. Add the configuration script to your HTML head section
  2. Update the webhook URL to point to your backend service
  3. Customize the branding, colors, and suggested questions
  4. Add the chat widget script

The widget will automatically appear in the bottom right corner of your website.