Setting Up the Web Chatt Channel

Web Chatt is a first-party chat widget you embed on your own website. Visitors talk to you through the widget; messages flow through Hub Chatt2.me using the same Application and API Key as your other channels. Configuration and the integration snippet are managed in the Hub Chatt2.me dashboard.

This guide covers connecting Web Chatt and placing the widget on your site. Outbound messages use POST /v1/communication/web-chatt2me/message, which is included in the API Reference.

Prerequisites

• Hub Chatt2.me account with permission to manage the Application
• Access to edit the HTML or layout of the site (or app shell) where the widget should load

Connect and configure in Hub

In the Hub Chatt2.me dashboard:

1. Open your Application and go to Channels.
2. Choose Add channel (or connect Web Chatt) and select Web Chatt.
3. In Configure Web Chatt, set:
   • Display name — Shown in the Hub (up to 50 characters).
   • Allowed origins — One to five full URLs using http:// or https://, for example https://www.example.com. Only origins you list here may use this Web Chatt channel with the widget. Include the correct scheme, host, and port when the site does not use default HTTPS port 443.
   • Visitor features — Enable or disable Images and videos, Documents, Audio, and Location independently. Disabling Audio removes both audio uploads and microphone recording from the visitor composer.

The in-product description applies: you set the display name and allowed origins for your widget; after configuration, the public key is the value the Web Chatt widget expects.

4. Save the configuration.

After configuration

On the Web Chatt channel details, Hub shows:

Field	Purpose
Application channel ID	UUID of this channel instance. This is the from value when sending outbound messages through the Hub API (same idea as other channels).
Public key	Credential embedded in the widget (webChatId in the snippet). Use Copy as needed.
Widget script	Complete deferred <script> tag Hub serves for you: correct src for chat-widget.umd.js plus data-config with webChatId and endpoint. No separate build or file upload. Use Copy to grab the full tag.

You can Regenerate public key if a key is compromised. Doing so invalidates the previous key; paste an updated Widget script from Hub on every site where you embedded the widget or visitors will not connect.

Embed on your site

After Web Chatt is configured, open the channel in Hub and use Copy on Widget script. Paste that <script> tag into your site once per origin you listed under Allowed origins, typically just before </body>. You do not run a build or host chat-widget.umd.js yourself; Hub already serves the bundle and the copied tag points at it. Edit data-config only if you know you need a different value, and keep the attribute as valid JSON.

The shape Hub gives looks like this (values are examples; yours come from Hub):

<script
  defer
  src="https://hub.chatt2.me/lib/latest/chat-widget.umd.js"
  data-config='{"webChatId":"yourPublicKeyFromHub","endpoint":"https://app.chatt2.me/v1/communication/web-chatt2me/ws","disabledFeatures":["audio","location"]}'
></script>

defer lets the page render before the widget runs. The latest URL receives the current maintained widget version automatically. If you need to keep an integration on a specific release, use its immutable URL instead, for example https://hub.chatt2.me/lib/v1.1.0/chat-widget.umd.js.

data-config is a JSON object: webChatId is the widget public key, endpoint is the WebSocket URL for your Hub environment, and disabledFeatures is the saved list copied by Hub. Hub synchronizes the current saved feature settings when the widget connects, so this list is a boot-time hint: changing the client-side attribute or page controls cannot enable a feature disabled in Hub. The loader creates the container (#chatt2me-widget) and mounts the UI; you do not need to add an empty <div> yourself.

Webhooks

To receive visitor messages and delivery updates, configure webhooks for this Application channel in Hub after Web Chatt is connected. Hub offers messages and message_status for Web Chatt, consistent with the in-dashboard labels.

See Webhooks overview and Create a webhook. You must connect Web Chatt before you can attach webhook configuration to that channel in the UI.

Operational notes

• HTTPS — Use https:// pages in production so the widget can open a secure WebSocket where applicable.
• Location permission — Location sharing requires a secure context and the visitor's browser permission. If access is denied or blocked, the widget explains whether the visitor should retry or enable access in browser settings.
• Allowed origins — If the widget fails to connect, confirm the page origin (scheme, host, port) exactly matches one of the configured URLs.
• Regenerate public key — Treat this like rotating a credential: replace the copied <script> (or updated data-config) on every page where the widget is embedded.

Media formats and limits

Type	Formats currently handled	Visitor upload	Hub API outbound
Image	JPEG, PNG, GIF, WebP	25 MB	50 MB
Video	MP4, WebM; API QuickTime/MOV input converts to H.264/AAC MP4	50 MB	50 MB
Audio	MP3/MPEG, M4A/MP4, OGG, WAV, WebM	50 MB	50 MB
Document	PDF, TXT, DOC/DOCX, PPT/PPTX, XLS/XLSX, ZIP	50 MB	50 MB

Web Chatt is a first-party channel, so these are deliberate product limits rather than provider limits. The widget requests a short-lived signed upload, sends the binary directly to storage and only marks the message as sent after the Hub confirms the object. The acknowledgement replaces the temporary browser preview with the canonical media URL, so the file continues to work after reload. The widget does not transport or persist message media as base64. For API outbound messages, the Hub converts only QuickTime/MOV video; WebP images and WebM audio are retained as supplied.

Using Web Chatt with the API

Outbound replies use the same mental model as the rest of this documentation:

• from — The Web Chatt application channel ID (UUID) shown on the channel details page. Only this UUID is accepted in from for Web Chatt sends (not the widget public key).
• to — The visitor identifier for the person using the widget. You obtain this from inbound webhook payloads when the visitor sends a message.

See the Send Web Chatt2.me message operation in the API Reference for the complete request and response contract.

Mark as seen

Web Chatt supports marking messages as read. Send markSeen: true in the message content after receiving a visitor message to signal that the message was read on your end.

See Mark as seen for the full payload reference.

Next steps

• Concepts & Architecture — from, to, and channel UUIDs
• Webhooks overview — receiving messages and status events
• Sending messages — Overview — payload shape shared across channels