ConnectGain Chat Widget

Widget Configuration

Configure your widget settings below and click "Initialize Widget" to see it in action!

API Key

Suit ID (Required) Your unique identifier for the webhook

Webhook URL (Widget → n8n) n8n webhook that receives messages from users

Header Text

Primary Color

Widget Position

Cloudinary CDN Configuration

Cloudinary Cloud Name Get your cloud name from Cloudinary dashboard

Upload Preset Must be an unsigned preset

Upload Folder Folder to organize uploads in Cloudinary

Features

Text Messages

Send and receive text messages with emoji support and URL previews

Images

Share images with automatic compression and thumbnail generation

Videos

Send and play videos directly in the chat interface

Voice Notes

Record and send voice messages with waveform visualization

Documents

Share PDFs, Word docs, Excel sheets, and more

URL Previews

Automatic link previews with title, description, and image

Quick Integration Guide

1. Include the Widget Script (Recommended: Cache Busting)

<script>
  // Force cache refresh - load from CDN with timestamp
  (function() {
    const script = document.createElement('script');
    script.src = 'https://widget.connectgain.cloud/connectgain-widget.min.js?v=' + Date.now();
    script.async = true;
    document.head.appendChild(script);
  })();
</script>

Why cache busting? Ensures you always get the latest widget version with all bug fixes and features.

2. Initialize the Widget

<script>
  ConnectGainWidget.init({
    apiKey: 'your-appgain-api-key',
    suitId: 'your-unique-suit-id',
    webhooks: {
      incoming: 'https://n8n.instabackend.io/webhook/bot'
    },
    theme: {
      primaryColor: '#7C3AED',
      headerText: 'Support Chat'
    }
  });
</script>

3. Send Messages from n8n to Widget

n8n can send messages directly to the widget using JavaScript:

// In your n8n workflow, use Execute JavaScript node:
ConnectGainWidget.sendMessage({
  type: 'text',
  text: 'Hello from n8n!',
  sender: 'agent'
});

// Or send media messages:
ConnectGainWidget.sendMessage({
  type: 'image',
  fileUrl: 'https://example.com/image.jpg',
  thumbnailUrl: 'https://example.com/thumb.jpg',
  caption: 'Here is the image you requested',
  sender: 'agent'
});

4. n8n Webhook Configuration

Your n8n workflow should:

Receive messages from the widget via webhook
Process with AI (OpenAI, Claude, etc.)
Send response using ConnectGainWidget.sendMessage()

Supported Message Types

The widget supports all common WhatsApp message types:

Text Messages Images (JPG, PNG, GIF, WebP) Videos (MP4, WebM) Voice Notes Documents (PDF, DOC, XLS, PPT) Audio Files (MP3, WAV, OGG) URL Previews

Test the Widget

After initializing the widget, try these test scenarios:

Send a text message with emojis 😊
Share a URL to see the preview: https://github.com
Upload an image using the attachment button
Record a voice message
Upload a document (PDF, Word, etc.)
Test the typing indicator

Simulate Incoming Message

You can also push messages directly to the widget: