Widget Installation

The canonical Clarm install path is a single loader script plus a saved widgetId. The loader fetches config from the dashboard at runtime, so most teams never need to ship widget code again after the first install.

Option A: Script tag (recommended)

Paste this before the closing body tag:

Script taghtml

<script src="https://app.clarm.com/widget/loader.js" data-widget-id="YOUR_WIDGET_ID" async></script>

Copy the exact snippet from Dashboard → Widget → Deploy. When you update colors, copy, actions, or other widget settings later, the loader picks up the new config automatically.

Option B: Google Tag Manager

If your site is managed through GTM, add a Custom HTML tag with the same snippet and fire it on all pages where the widget should appear.

Custom HTML taghtml

<script src="https://app.clarm.com/widget/loader.js" data-widget-id="YOUR_WIDGET_ID" async></script>

Option C: Enterprise self-hosted bootstrapper

If you need to host a tiny bootstrapper on your own CDN, download it from the deploy tab. The bootstrapper still loads the canonical Clarm loader and keeps the dashboard as the source of truth.

Enterprise bootstrapperjavascript

(function() {
  var s = document.createElement('script');
  s.src = 'https://app.clarm.com/widget/loader.js';
  s.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
  s.async = true;
  document.head.appendChild(s);
})();

The widget runtime exposes window.ClarmTrack.track(...) for optional identify, purchase, and custom event tracking after the loader initializes.

What you configure in the dashboard

Branding: brand name, header text, logo, primary color, and font
Behavior: welcome message, quick replies, actions, teaser, and position
Routing: connected agent, booking form, live chat bridge, and products

Verify

After installation, refresh your page, confirm the chat bubble appears, and send a test message. If something looks wrong, go back to Widget → Deploy in the dashboard and check the health panel before changing the snippet.