Add live chat to any page

Paste in a ready-made chat widget and you’re live. See it working here, then restyle it to match your brand. Copy, Paste, Done.

Paste this into your page

<!-- 1. Somewhere in your markup, an element to mount into -->
<div id="chat-widget" style="height: 600px;"></div>

<!-- 2. The widget library -->
<script defer
  src="https://widgets.sportstalk247.com/chat-widget/static/js/chat-widget.js">
</script>

<!-- 3. Point it at your app and a room -->
<script>
  window.addEventListener('load', function () {
    window.ChatWidget.initialize('chat-widget', {
      appId:    'YOUR_APP_ID',
      apiToken: 'YOUR_API_TOKEN',
      endpoint: 'https://api.sportstalk247.com/api/v3'
    });

    window.ChatWidget.setUser({ userid: 'sarah' });
    window.ChatWidget.joinRoom('YOUR_ROOM_ID');
  });
</script>

Your appId, apiToken and room IDs come from your SportsTalk dashboard. setUser is how the widget knows who is talking — pass your own user’s ID and the chat inherits your existing sign-in. Nothing else is required: no build step, no framework, no package to install. For production, swap the apiToken for a per-user token — see below; it’s a one-word change on this side.

In production, don’t ship your API token

The snippet above puts your application’s apiToken in the page, which is fine for a trial or an internal demo — but anyone can read it, and it can act as any user. For a real deployment, your server mints a short-lived token for the user who is already signed in, and the browser only ever sees that. It costs one small endpoint.

Your server — the API key stays here

app.get('/api/chat-token', async (req, res) => {
  const r = await fetch(
    `https://api.sportstalk247.com/api/v3/${APP_ID}` +
    `/user/users/${req.user.id}/session`,
    {
      method: 'POST',
      headers: {
        'x-api-token': API_KEY,   // secret — never sent to the browser
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        displayname: req.user.name,
        expiresin: 3600
      })
    }
  );

  const { data } = await r.json();
  res.json({ token: data.token, userid: req.user.id });
});

Your page — one word changes

const { token, userid } =
  await (await fetch('/api/chat-token')).json();

window.ChatWidget.initialize('chat-widget', {
  appId:     'YOUR_APP_ID',
  userToken: token,   // <- instead of apiToken
  endpoint:  'https://api.sportstalk247.com/api/v3'
});

window.ChatWidget.setUser({ userid: userid });
window.ChatWidget.joinRoom('YOUR_ROOM_ID');

The minted token is that user — it can only act as the id it was issued for, it expires, and it carries no ability to impersonate anyone else. Your own login stays the source of truth; there are no passwords or user records to sync. If you use Auth0, Cognito, Firebase, Okta or any OIDC provider, we can accept those tokens directly instead — no minting step at all.

Restyle it with CSS

The widget ships with three themes — vanilla, dark and light. The one on this page is set with a single call:

window.ChatWidget.setThemeWidget('dark');

Past that, every part of the widget carries a stable class name, so your own stylesheet can override whatever you need — no fork, no build:

.CW-ChatBox__container { background: #14171f; }
.CW-Header__container  { background: #212529; }
.CW-MessageItem-Speech__container {
  border-radius: 12px;
}

Full class list in the widget documentation.

Or build your own on top of it

If CSS isn’t enough, you have two routes that go deeper:

Take the React component. The widget is a React component underneath. Drop it into your own app and control its behaviour directly instead of mounting it as a black box.
Go straight to the SDK. The widget is a wrapper around our JavaScript SDK. If you want your own UI entirely, skip the widget and talk to the SDK — chat, comments, moderation, reactions and polls are all there.
Chat isn’t the only one. The comments and poll widgets drop in exactly the same way — same script-tag pattern, same initialize / setUser shape, just CommentWidget or PollWidget instead.

Widget docs · JavaScript SDK docs · Platform docs