SupportHubSupportHub/ docs
Back
5-minute quickstart
Widget / Quickstart

Launch the widget in 5 minutes

From an empty project to a working chat on your site in 5 steps. No code on your side apart from a single <script> tag.

Step 1. Open the Widget Builder

After signing up, go to the dashboard and open SettingsWidget Builder. This is where everything about the widget is set up; changes show up right away in the live preview on the right (on a narrow screen, behind the Preview button).

Step 2. Set up the brand basics

Open the Brand section. The minimum worth changing to match your site:

  • Accent color: the color of the widget button and accents (indigo #6366f1 by default), in #RRGGBB format.
  • Logo: the Upload button opens a file picker. It accepts PNG / JPEG / WebP / SVG up to 256 KB; you can crop a raster image before uploading it. Next to it are Shape (Rounded / Circle / Square) and Transparent background for logos with their own background.
  • Header title: what the visitor sees in the widget header (for example, “ForestsNet Support”).

Everything else can wait. The preview on the right shows the result right away.

Step 3. Publish the config

Changes in the builder are saved to a draft automatically. To make them visible to visitors, press Publish in the top right corner. The visitor’s browser caches the widget together with the config, so the changes reach visitors within a few minutes.

Step 4. Add the code to your site

The Embed snippet button at the bottom of the builder’s left panel opens ready-made code with your project ID and a Copy button. The same code is also in SettingsChannels, on the Web Widget card:

index.htmlhtml
<script>
(function(w, d){
  function loadWidget(token){
    var s = d.createElement('script');
    s.async = 1;
    s.src = 'https://support.forestsnet.com/widget-bundle?ws=YOUR_WORKSPACE_UUID';
    if (token) s.setAttribute('data-visitor-token', token);
    d.head.appendChild(s);
  }
  // ── Optional: cross-device HMAC visitor token ─────────────────
  // Uncomment + implement /api/supporthub/token on your backend to
  // bind the same visitor across devices. Recipes per stack:
  //   https://support.forestsnet.com/docs/widget/hmac-examples
  //
  // fetch('/api/supporthub/token', { credentials: 'include' })
  //   .then(function(r){ return r.ok ? r.json() : null; })
  //   .then(function(data){ loadWidget(data && data.token); })
  //   .catch(function(){ loadWidget(); });
  //
  // Default — anonymous (no token):
  loadWidget();
})(window, document);
</script>

Paste it before the closing </body> on every page that should have the chat. By default the widget runs in anonymous mode, so you don’t need any backend. If you want to recognize a logged-in visitor across devices, uncomment the fetch('/api/supporthub/token') block and implement the endpoint on your side using one of the templates. More on identification: /docs/widget/identify.

The project ID is the UUID in the code’s ?ws= parameter. It’s also shown in SettingsChannels as the “Workspace ID” line on the REST API card.

Step 5. Check that it works

  1. 1
    Open your site in an incognito window
    The widget button should appear in the bottom right corner, by default with a chat icon and the text from the CTA button text field of the Welcome section.
  2. 2
    Click the button to open the panel
    The visitor sees the Home tab: the greeting from the Welcome section and the Send us a message button.
  3. 3
    Send a test “hello”
    A new conversation shows up in the dashboard’s Inbox right away, which means the widget is connected correctly. Reply to it: the reply reaches the open widget without a page reload.

What’s next

The basic setup is done. Further setup is iterative, as questions come in:

  1. Home and greeting: the Home tab texts, the pinned banner and auto-open.
  2. Pre-chat form: collect email / name / phone before the chat starts.
  3. Working hours: what visitors see when the team isn’t around.
  4. Identifying visitors: if your site already knows the user (login, CRM), link their conversations to the contact automatically.
  5. Several subdomains: if the widget runs on several subdomains of one site, set a cookie domain so that each visitor keeps a single conversation.
  6. Advanced: custom CSS, notification sound, email bridge.

In-depth documentation

For integrations and fine-tuning, see:

Was this page helpful?