Embed the chat widget on your website
Drop the MsgHub chat widget on any website in under 5 minutes. AI answers from your knowledge base, escalates to humans when needed, and feeds every conversation into the same inbox as your WhatsApp and Instagram chats.
Overview
The MsgHub chat widget is a small JavaScript snippet you embed on your website. Visitors click the chat bubble, the AI answers using a chatbot flow you've wired up (with AI Reply / KB Lookup nodes), and unresolved conversations escalate to a human agent in the Inbox.
Four steps to get live:
- Configure the Chat Widget in MsgHub Settings.
- Get an API key from the API Keys page.
- Install the snippet on your website (HTML / WordPress / Shopify / Wix / Squarespace).
- Wire the connected chatbot flow + test end-to-end.
One widget per tenant. The widget configuration lives in Settings and applies wherever you embed the snippet — there's no per-site widget instance to create. If you need different widgets per site, you'd need separate tenants.
Prerequisites
- An active MsgHub tenant account.
- Edit access to your website — either code/theme access, or admin to a CMS that allows custom code (most do).
- A configured AI Provider + a chatbot flow — see AI Training. The widget works without AI but visitors hit your human agents directly.
Part 1 · Configure the Chat Widget
Open Chat Widget settings
- Login to
https://app.msghub.info. - Click Settings at the bottom of the left sidebar.
- Scroll to the Chat Widget section (subtitle: "Floating lead-capture widget for your website").
- Tick the Enabled checkbox at the top of the section.
Part 2 · Customise the look and feel
Heading, subtitle, colour, logo
- Heading — short headline shown at the top of the open chat. Default: "Chat with us".
- Subtitle — secondary line, e.g. "We typically reply within minutes".
- Button color — pick a hex code or use the colour picker. Defines the chat bubble background.
- Widget logo — paste an image URL or click the upload button. Shown in the widget header.
Position and timing
- Position dropdown — Bottom Right (default) or Bottom Left. No horizontal offset setting.
- Show delay (seconds) — how long after page load before the chat bubble appears.
0= immediately. Useful to avoid distracting visitors during the first few seconds.
Pre-chat fields
Under Fields to show, tick which contact details you want from the visitor before they can chat:
- Name
- Phone
Leave all unticked for fully anonymous chat (best for engagement). Tick what you need for lead capture.
Mandatory pre-chat forms reduce chat starts by ~50%. If lead capture matters more than engagement, tick fields. If conversion matters more, leave all unticked and ask for contact details mid-conversation through the AI flow.
Click Save at the bottom of the Settings page.
Part 3 · Get the install snippet
Generate an API key
The widget authenticates with a tenant API key (format mh_live_…).
- Sidebar → API Keys (it's a top-level sidebar item, not nested under Settings).
- Click + New API Key.
- Name it e.g. "Website widget".
- Tick scope
contacts:write(creates contacts from chat) andmessages:send(lets the widget trigger flows). - Click Create. Copy the key immediately — shown only once.
Copy the embed snippet
In Settings → Chat Widget, scroll to the Embed snippet box at the bottom of the section. The snippet looks like:
<script> window.MsgHub = { apiUrl: "https://app.msghub.info", apiKey: "mh_live_YOUR_API_KEY" }; </script> <script src="https://app.msghub.info/api/v1/widget.js" async></script>
Replace mh_live_YOUR_API_KEY with the key you generated in Step 5. Widget config (heading, colour, position, etc.) is fetched from MsgHub at runtime — when you change settings, they take effect immediately without re-embedding.
Install on plain HTML / custom site
- Open your website's main HTML template.
- Paste the snippet just before the closing
</body>tag. - Save and deploy.
Install on WordPress
Option A · MsgHub WordPress plugin (recommended): see the dedicated WordPress plugin install guide — paste your tenant API key in the plugin settings.
Option B · Manual snippet:
- WordPress admin → Appearance → Theme File Editor →
footer.php. - Paste the snippet before
<?php wp_footer(); ?>. - Save. If your theme uses a child theme, edit there instead so updates don't overwrite.
Install on Shopify
- Shopify admin → Online Store → Themes → Edit code on your active theme.
- Open
layout/theme.liquid. - Paste the snippet just before the closing
</body>tag. - Save.
Install on Wix
- Wix Dashboard → Settings → Custom Code.
- Click Add Custom Code.
- Paste the snippet, name it "MsgHub Widget".
- Choose Add Code to Pages: All pages, place in Body — end.
- Apply.
Install on Squarespace
- Home menu → Settings → Advanced → Code Injection.
- Paste the snippet in the Footer field.
- Save.
Part 4 · Wire to a chatbot flow
Connect the widget to a chatbot flow
The widget itself doesn't have AI controls — AI lives in the Chatbot Flows sidebar item, and you wire the widget channel to a specific flow.
- Sidebar → Chatbot Flows.
- Open the flow you want to handle web-chat traffic, or create a new one with AI Reply / KB Lookup nodes (see AI Training).
- In the flow's settings, set the trigger channel to include Web Chat.
- Make sure the flow is Active.
Now incoming web-chat messages route through this flow. If the AI Reply node's confidence is low, the flow can hand off to a human via the Assign Agent node.
Part 5 · Test it end-to-end
Visit your live site
- Open your website in incognito / private mode (so you appear as a fresh visitor, not yourself).
- You should see the chat bubble in the corner. Click it.
- The welcome message and quick-reply chips appear.
- Type a real question your customers would ask. The AI should answer from your KB within ~3 seconds.
- Check MsgHub Inbox → the conversation should appear under the Web Chat channel.
Advanced configuration
Identify logged-in users automatically
If your visitor is already logged in to your site, call MsgHub.identify() after the script loads to create / update their contact record:
<script> window.MsgHub = { apiUrl: "https://app.msghub.info", apiKey: "mh_live_…" }; </script> <script src="https://app.msghub.info/api/v1/widget.js" async></script> <script> // Identify is queued if widget hasn't finished loading yet MsgHub.identify({ phone: '+919812345678', email: '[email protected]', name: 'Riya Mehta' }); </script>
Phone or email is required. The widget creates a contact in MsgHub and links the chat to that record.
Track events from your site
Fire custom events tied to a contact — useful for triggering chatbot flows on specific actions (cart abandoned, viewed pricing, etc.):
MsgHub.track('cart.abandoned', { phone: '+919812345678' });
Don't want the widget on every page?
The widget script is global — once embedded, it runs on every page that loads the snippet. To exclude it on a specific page (checkout, thank-you), simply don't include the script tag on that page's template.
Troubleshooting common issues
Widget doesn't appear on the site
- Check that Enabled is ticked in Settings → Chat Widget. If it's off, the widget config endpoint returns disabled.
- The snippet is placed wrong — should be just before
</body>, not in<head>. - API key in your snippet doesn't match a valid tenant key. Re-copy from the API Keys page.
- A browser extension or ad blocker is blocking
app.msghub.info. Test in a clean browser profile. - Check browser console for errors — widget logs a clear warning if
apiUrlorapiKeyis missing.
Widget appears but visitor messages don't reach the inbox
- The widget loaded but couldn't authenticate. Network tab → look for 401/403 responses to
/api/v1/*calls. Check API key scopes includecontacts:writeandmessages:send. - The chatbot flow for the Web Chat channel isn't Active or doesn't exist. Sidebar → Chatbot Flows → verify.
Widget styles look broken
- Site's aggressive global CSS leaking into the widget. The widget runs in an iframe — generally isolated, but if you've set
* { all: revert !important }or similar, it can affect the iframe. Scope your resets.
Frequently asked questions
Do I need a developer to install the chat widget?
No. The widget is a 4-line script tag. WordPress users can paste it in Theme File Editor or use the MsgHub plugin. Shopify users paste it in theme.liquid. Wix and Squarespace have custom-code panels. Plain HTML sites paste once before </body>. Total install time under 5 minutes.
Does the widget slow down my website?
No. The script loads asynchronously and weighs ~24 KB gzipped. It does not block page rendering, and the chat UI only loads when the user clicks the bubble. Lighthouse performance impact is negligible.
Can I have multiple widgets — one per website?
One widget per tenant. The Chat Widget configuration in Settings applies wherever you embed the snippet. If you run multiple brand sites with different chat designs, you'd need separate MsgHub tenants. The same snippet can be embedded on multiple sites — they share the same widget design and inbox.
Will the widget conflict with WhatsApp or live-chat plugins I already have?
Visually they may overlap if positioned in the same corner — change MsgHub's widget to the opposite corner, or remove the other plugin. Technically the MsgHub widget runs in an isolated iframe and does not interfere with other JavaScript on the page.
Can visitors chat anonymously?
By default, yes — anyone can start chatting immediately. You can optionally enable a pre-chat form requiring name/email/phone before the conversation starts. Most businesses leave it anonymous to maximise engagement and ask for contact details mid-conversation once the visitor is engaged.
What happens after a visitor closes the browser tab?
If they shared an email or phone, the conversation continues whenever they return. If anonymous, a cookie persists for 30 days so a return visit picks up the same thread. Pure anonymous one-time visitors get a fresh thread on each visit.
Can the chat widget collect leads into my CRM?
Yes. Every visitor who shares contact info becomes a Contact in MsgHub. You can also push to external CRMs (HubSpot, Zoho, custom) via Settings → Integrations. Webhook events fire on every new conversation and contact creation.