React and other frameworks · TruCom Developers

React and Next.js

Load the installation script once in your root layout or document, with the configuration and bootstrap before the async loader. Use client components for SDK calls. Do not insert another widget for each route.

JavaScript

useEffect(() => {
  let cancelled = false;
  let unsubscribe;
  window.TruComWidget.ready().then(() => {
    if (cancelled) return;
    unsubscribe = window.TruComWidget.on('unread.changed', event => {
      setUnread(event.count);
    });
  }).catch(error => console.warn(error.code));
  return () => { cancelled = true; unsubscribe?.(); };
}, []);

Keep the current customer in sync

JavaScript

// Request a proof from your backend after authentication.
await TruComWidget.identify({ identity_token: token });
await TruComWidget.setAttributes({ plan: account.plan });
// During logout, before showing another account:
await TruComWidget.reset();

Single-page route changes

The loader observes pushState, replaceState and popstate for page targeting and visitor context. If a router changes a view without a history event, dispatch trucom:locationchange. Use per-route configure calls for conditional appearance.

JavaScript

window.dispatchEvent(new Event('trucom:locationchange'));
await TruComWidget.configure({ hideWidget: location.pathname.startsWith('/checkout') });

Your own support button

HTML / JavaScript

<button type="button" id="support-button">Contact support</button>
<script>
document.querySelector('#support-button').addEventListener('click', () => {
  TruComWidget.open().catch(error => console.warn(error.code));
});
</script>

Analytics

Set gaKey to opt into widget activity counts through your existing gtag or dataLayer integration. The SDK does not load Google Analytics, scan your page for accounts or send message/customer text. open, conversation.started, conversation.ended and message.sent map to trucom_* event names.

JavaScript

window.TruComWidgetConfig = { gaKey: 'G-EXAMPLE123' };
// Or subscribe to events and use your own analytics client.
TruComWidget.on('conversation.started', () => analytics.track('Support started'));