Skip to main content

๐ŸŒ Web Chat Widget

The Web Chat Widget is an embeddable JavaScript chat bubble that can be added to any website. When visitors send a message through the widget, it appears in PulseHub's inbox just like any other channel.

Adding the Widget to Your Websiteโ€‹

1. Add a Web Chat Channel in PulseHubโ€‹

  1. Go to Channels โ†’ Add Channel
  2. Select Web Chat Widget
  3. Enter a name and optional greeting/color
  4. Click Save Channel
  5. Note the Channel ID from the card

2. Embed the Scriptโ€‹

<script
  src="https://yourdomain.com/public/js/webchat-widget.js"
  data-channel="YOUR_CHANNEL_ID"
  data-greeting="Hi! How can we help you today?"
  data-color="#10b981">
</script>

Widget Configuration Optionsโ€‹

AttributeDefaultDescription
data-channelrequiredThe channel UUID from PulseHub
data-greetingHi! How can we help you?Message shown when chat first opens
data-color#10b981Hex color for the button and sent messages

How Sessions Workโ€‹

The widget stores two values in localStorage:

  • ph_contact_{channel_id} โ€” the contact's UUID
  • ph_conv_{channel_id} โ€” the conversation's UUID

This means visitors who close the tab and return continue the same conversation.

Cross-Origin Requestsโ€‹

If PulseHub is on a different domain from your website, add CORS headers:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "https://yourwebsite.com"
    Header set Access-Control-Allow-Methods "GET, POST, PATCH, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, X-Webchat-Channel"
</IfModule>

Security Noteโ€‹

The Web Chat API endpoints accept requests from unauthenticated users when the X-Webchat-Channel header is present. Ensure rate-limiting at the web server or firewall level.