Skip to main content

Web Chat Widget

Msghub's web chat widget is a fully customizable chat interface that you can embed on your website. Visitors get instant answers from your AI chatbot, with seamless handoff to human agents when needed.

Web Chat Setup

Get the Embed Code

  1. Go to Settings → Channels → Web Chat
  2. Click Generate Embed Code
  3. Copy the code snippet

Embed on Your Website

Paste the code into your website's HTML, just before the closing </body> tag:

<script>
  window.MsgHubConfig = {
    apiKey: 'pk_live_...',
    brandId: 'brand_abc123'
  };
</script>
<script src="https://cdn.msghub.com/chat-widget.js"></script>

That's it! The chat widget will appear on your website.

Customization

Colors & Branding

  1. Go to Settings → Channels → Web Chat → Customization
  2. Configure:
    • Primary Color — Button and header color
    • Secondary Color — Accent color
    • Text Color — Message text color
    • Background Color — Chat background
    • Logo — Your brand logo
    • Brand Name — Display name in chat header

Position & Size

  1. Go to Settings → Channels → Web Chat → Customization
  2. Configure:
    • Position — Bottom-right, bottom-left, or custom
    • Width — Chat window width (300-500px)
    • Height — Chat window height (400-800px)
    • Offset — Distance from screen edge

Welcome Message

  1. Go to Settings → Channels → Web Chat → Customization
  2. Set:
    • Welcome Title — "Chat with us"
    • Welcome Message — "Hi! 👋 I'm your AI assistant. How can I help you today?"
    • Placeholder Text — "Type your message..."

Buttons & CTAs

  1. Go to Settings → Channels → Web Chat → Customization
  2. Add buttons:
    • Button Text — "Start Chat", "Ask a Question"
    • Button Action — Open chat, trigger flow, external link

Chat Widget Features

Real-Time Messaging

Messages are delivered in real-time via Socket.io (no polling). Visitors see instant responses from your AI chatbot or human agents.

Typing Indicators

When an agent is typing, the visitor sees "Agent is typing...". This improves perceived response time.

Read Receipts

Visitors see when their messages are read by agents.

Conversation History

The chat widget remembers conversation history. If a visitor returns, they see their previous conversations.

Offline Mode

When no agents are available, the chat widget:

  1. Shows "We're offline" message
  2. Offers to collect their message
  3. Sends a notification to your team
  4. Responds when you're back online

AI Chatbot Integration

Setup

  1. Go to Settings → Channels → Web Chat
  2. Enable AI Chatbot
  3. Select your chatbot flow
  4. Click Save

Now, when a visitor opens the chat:

  1. Your AI chatbot greets them
  2. The chatbot answers their questions
  3. If the chatbot can't help, it escalates to a human agent

Example Conversation

Visitor: "What's your return policy?"

AI Chatbot: "We offer 30-day hassle-free returns! Would you like me to start a return for a recent order?"

Visitor: "Yes, I want to return my order"

AI Chatbot: "Great! I can help with that. What's your order number?"

Visitor: "ORD-4821"

AI Chatbot: "I found your order. It was placed on April 1st for $89.99. Would you like to proceed with the return?"

Visitor: "Yes"

AI Chatbot: "Perfect! I've initiated the return. You'll receive a prepaid shipping label via email. Just pack your item and drop it off at any shipping location. Is there anything else I can help with?"

Human Agent Handoff

When the AI chatbot can't resolve an issue, it escalates to a human agent.

Agent Inbox

  1. Go to Inbox
  2. You'll see web chat conversations
  3. Click on a conversation to open it
  4. You'll see:
    • Full conversation history
    • Visitor profile
    • AI's summary of the issue
    • Suggested responses

Responding as an Agent

  1. Click on the conversation
  2. Type your response
  3. Click Send

The visitor sees your response in real-time.

Agent Status

Set your availability status:

  1. Go Inbox → Status
  2. Choose:
    • Online — Ready to chat
    • Away — Temporarily unavailable
    • Offline — Not available

When all agents are offline, the chat widget shows "We're offline" and collects messages.

Visitor Information

Capture Visitor Data

The chat widget automatically captures:

  • Name — Visitor's name (optional)
  • Email — Visitor's email (optional)
  • Phone — Visitor's phone (optional)
  • Company — Visitor's company (optional)

You can require certain fields:

  1. Go Settings → Channels → Web Chat → Customization
  2. Set required fields:
    • Name — Required or optional
    • Email — Required or optional
    • Phone — Required or optional

Pre-Fill Visitor Info

If you know the visitor's information, pre-fill it:

<script>
  window.MsgHubConfig = {
    apiKey: 'pk_live_...',
    brandId: 'brand_abc123',
    visitor: {
      name: 'Rahul',
      email: 'rahul@example.com',
      phone: '+919876543210',
      company: 'Acme Corp'
    }
  };
</script>

Chat Widget Events

Trigger Flows from Chat

When a visitor sends a message, you can trigger a flow:

<script>
  window.MsgHubConfig = {
    apiKey: 'pk_live_...',
    brandId: 'brand_abc123',
    onMessage: function(message) {
      // Trigger a flow when visitor sends a message
      if (message.text.includes('refund')) {
        // Trigger refund flow
        window.MsgHub.triggerFlow('flow_refund', {
          visitorId: message.visitorId,
          message: message.text
        });
      }
    }
  };
</script>

Listen to Chat Events

<script>
  window.MsgHubConfig = {
    apiKey: 'pk_live_...',
    brandId: 'brand_abc123',
    onOpen: function() {
      console.log('Chat opened');
    },
    onClose: function() {
      console.log('Chat closed');
    },
    onMessage: function(message) {
      console.log('Message received:', message);
    },
    onAgentAssigned: function(agent) {
      console.log('Agent assigned:', agent.name);
    }
  };
</script>

Webhook Integration

Receive Chat Events

Configure a webhook to receive chat events:

curl -X POST \
  https://your-msghub.com/api/v1/webhooks \
  -H "X-API-Key: mk_live_..." \
  -d '{
    "event": "message.received",
    "channel": "web_chat",
    "url": "https://your-app.com/webhooks/chat"
  }'

Msghub will POST chat events to your webhook:

{
  "event": "message.received",
  "messageId": "msg_xyz789",
  "channel": "web_chat",
  "visitorId": "visitor_123",
  "visitor": {
    "name": "Sarah",
    "email": "sarah@example.com",
    "phone": "+919876543210"
  },
  "message": {
    "type": "text",
    "text": "Hi, I have a question about your product"
  },
  "receivedAt": "2024-04-08T10:30:00Z"
}

Analytics

Chat Metrics

View chat analytics in the dashboard:

  1. Go Analytics → Web Chat
  2. See:
    • Total Conversations — Number of chat sessions
    • Average Response Time — Time to first response
    • Visitor Satisfaction — Rating from visitors
    • Chatbot Resolution Rate — % resolved by AI
    • Agent Conversations — % escalated to agents

Conversation Quality

Rate conversations to improve your chatbot:

  1. Go Inbox → [Conversation]
  2. Click Rate Conversation
  3. Choose:
    • Helpful — Chatbot/agent resolved the issue
    • Partially Helpful — Partially resolved
    • Not Helpful — Didn't resolve the issue
  4. Add comments (optional)

Best Practices

Welcome Message

  • Be friendly — "Hi! 👋 How can we help?"
  • Set expectations — "We typically reply in minutes"
  • Offer options — "Ask a question or browse our FAQ"
  • Mobile-friendly — Keep it short

Chatbot Responses

  • Be helpful — Answer questions directly
  • Be concise — Keep responses short
  • Offer next steps — "Would you like to...?"
  • Know when to escalate — "Let me connect you with an agent"

Agent Responses

  • Respond quickly — Aim for under 2 minutes
  • Be professional — Maintain brand voice
  • Personalize — Use visitor's name
  • Solve the problem — Don't just chat, help them

Timing

  • Set business hours — Show when you're available
  • Set auto-reply — "We'll respond during business hours"
  • Monitor offline — Collect messages when offline
  • Follow up — Respond to offline messages promptly

Troubleshooting

Chat widget not appearing

  1. Check embed code — Is it pasted correctly?
  2. Check API key — Is it valid?
  3. Check domain — Is your domain whitelisted?
  4. Check browser — Try a different browser

Slow message delivery

  1. Check internet — Is there a connectivity issue?
  2. Check chatbot — Is the AI chatbot enabled?
  3. Check load — Is Msghub overloaded?

Chatbot not responding

  1. Check chatbot — Is it enabled in Settings?
  2. Check flow — Is the flow configured correctly?
  3. Check knowledge base — Does it have answers?

See Also