Premium AI Chatbot Widget

Step 1: Deploy Your Next.js App

Deploy this Next.js application to Vercel, Netlify, or your preferred hosting provider.

Step 2: Create the Embed Script

Use the script below and replace the configuration values:

<script>
  (function() {
    // Configuration
    window.chatbotConfig = {
      n8nWebhookUrl: 'YOUR_N8N_WEBHOOK_URL',
      apiBaseUrl: 'YOUR_DEPLOYED_APP_URL',
      primaryColor: '#ffffff',
      botName: 'AI Assistant',
      welcomeMessage: 'Hello! How can I help you today?',
      position: 'bottom-right'
    };

    // Load chatbot
    var script = document.createElement('script');
    script.src = window.chatbotConfig.apiBaseUrl + '/embed.js';
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

Step 3: Add to Google Tag Manager

1. Go to your GTM container
2. Create a new Tag → Custom HTML
3. Paste the script from Step 2
4. Set trigger to "All Pages" or your preferred trigger
5. Save and publish your container

Step 4: Configure Your n8n Webhook

Your n8n workflow should:

• Accept POST requests with JSON body containing message and history
• Process the message with your AI agent
• Return JSON with a field like output, response, or reply