The web widget adds a chat bubble to your website. Visitors can start a conversation without leaving the page. Messages appear in your DMHub inbox in real time, and your AI agent can respond automatically.

Go to /settings/channels → Add Channel → Web Widget → Generate.

You'll see a configuration panel:

Widget color — defaults to DMHub green (#25D366)
Position — bottom-right or bottom-left
Welcome message — shown when the widget opens
Team name — shown in the widget header
Show agent avatar — toggle on/off

Click Save & Generate Script.

Step 2: Copy the script

Copy the generated <script> tag. It looks like this:

<script
  src="https://www.dmhub.ai/widget.js"
  data-inbox="inbox_abc123"
  data-color="#25D366"
  data-position="bottom-right"
  async
  defer>
</script>

Step 3: Add to your site

Paste the script tag before the closing </body> tag of your HTML. For common platforms:

WordPress — use a plugin like "Insert Headers and Footers" or add to your theme's footer.php

Shopify — go to Online Store → Themes → Edit code → theme.liquid and paste before </body>

Webflow — go to Project Settings → Custom Code → Footer Code

Next.js / React:

import Script from 'next/script'

<Script
  src="https://www.dmhub.ai/widget.js"
  data-inbox="inbox_abc123"
  strategy="lazyOnload"
/>

Verifying it works

Visit your site and look for the chat bubble in the bottom corner. Click it — the widget should open. Type a message and check that it appears in /inbox.

Real-time delivery

The widget uses Pusher for real-time delivery. Messages appear in your inbox instantly. If you have an AI agent connected to the web widget inbox, the agent responds automatically.

web-widgetlive-chatembed