Widget embed code, React and CSP

Everything a developer needs to add the chat widget: the code, single page apps, CSP and allowed domains. The quick way without code is Install the chat widget on your website.

The short code

Your widget key is in Settings, Chat widgets, Install. The code loads asynchronously and never blocks your page.

<script
  src="https://widget.hrc.lt/v1/loader.js"
  data-widget-key="wk_xxxxxxxxxxxxxxxxxxxx"
  async
></script>

The optional data-locale attribute sets the language (auto by default).

The full code with the command queue

This code creates the HrcWidget function at once, so you can call it before the widget has loaded. Calls wait in the HrcWidget.q queue and run in order when the loader arrives.

<script>
  (function (w, d) {
    w.HrcWidget = w.HrcWidget || function () {
      (w.HrcWidget.q = w.HrcWidget.q || []).push(arguments);
    };
    var s = d.createElement('script');
    s.async = true;
    s.src = 'https://widget.hrc.lt/v1/loader.js';
    d.head.appendChild(s);
  })(window, document);
  HrcWidget('init', {
    widgetKey: 'wk_xxxxxxxxxxxxxxxxxxxx',
    locale: 'auto',
  });
</script>

If the loader is included twice, the first one stays. If the page already queued its own init, the short code's data-widget-key is ignored.

React and other SPAs

There is no npm package: copy this hook. It loads the widget once and keeps user recognition in step with your sign-in.

// useSupportWidget.ts: loads the widget once, follows your sign-in
import { useEffect } from 'react';

type Identity = {
  externalId?: string;
  email?: string;
  name?: string;
  userHash: string;
};
type Queue = ((...args: unknown[]) => void) & { q?: unknown[][] };
declare global {
  interface Window { HrcWidget?: Queue }
}

function hrc(...args: unknown[]) {
  if (!window.HrcWidget) {
    const queue: unknown[][] = [];
    const stub = (...a: unknown[]) => { queue.push(a); };
    window.HrcWidget = Object.assign(stub, { q: queue });
    const s = document.createElement('script');
    s.async = true;
    s.src = 'https://widget.hrc.lt/v1/loader.js';
    document.head.appendChild(s);
  }
  window.HrcWidget(...args);
}

export function useSupportWidget(options: {
  widgetKey: string;
  locale?: string;
  identity?: Identity | null;
}) {
  const { widgetKey, locale = 'auto', identity } = options;
  useEffect(() => {
    hrc('init', { widgetKey, locale });
  }, [widgetKey, locale]);
  useEffect(() => {
    if (identity) hrc('identify', identity);
    else hrc('reset');
  }, [identity?.externalId, identity?.email, identity?.userHash]);
}

// Open from your own button:
// hrc('open', { view: 'new', type: 'bug' })

• The loader notices route changes (pushState, popstate) by itself; no call is needed.
• With Next.js and other server rendering, use the hook in a client component only.
• reset with no user on the first render is harmless: it only replaces a recognized session.

Content Security Policy

If your site sends a CSP header, allow the widget:

script-src https://widget.hrc.lt;
frame-src https://widget.hrc.lt;
img-src data:;

data: in img-src is for the one-click screenshot. Without it the screenshot falls back to the browser's picker. Images and fonts from other origins are drawn in the screenshot only where connect-src allows those origins.

Allowed domains

The widget works only on the domains listed on the General tab. Add each one as https://shop.example.com. https://*.example.com covers every subdomain of your domain. A shared host such as *.vercel.app or *.github.io cannot be a wildcard: add your exact address. For development, turn on "Allow localhost".

If the widget does not show

• Domain not allowed. Check that the page's address is in the allowed domains.
• CSP. Look for a message about widget.hrc.lt in the browser console.
• Changed key. After the widget key is changed, the old one stops working: add the new code.
• More detail. init with debug: true explains in the console why a value or a command was dropped. Every warning starts with [support widget].

Every command is described on JavaScript API.