Skip to main content
Version: Latest

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. The HTTP route for sending Web Chatt messages is not part of the published API operations on this site; see Using Web Chatt with the API for how from and to relate to the rest of these docs.

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.

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.

  1. Save the configuration.

After configuration​

On the Web Chatt channel details, Hub shows:

FieldPurpose
Application channel IDUUID of this channel instance. This is the from value when sending outbound messages through the Hub API (same idea as other channels).
Public keyCredential embedded in the widget (webChatId in the snippet). Use Copy as needed.
Widget scriptComplete <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
  src="./chat-widget.umd.js"
  data-config='{"webChatId":"yourPublicKeyFromHub","endpoint":"wss://hub.chatt2.me/communication/web-chatt2me/ws"}'
></script>

data-config is a JSON object: webChatId is the widget public key, and endpoint is the WebSocket URL for your Hub environment. 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.
  • 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.

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.

The specific send endpoint for Web Chatt is not documented in this site's API Reference. See Concepts & Architecture for general rules about Applications, channels, and messages.

Next steps​