Run two widgets on one page

You can show more than one deployment on a page, for example a Sales agent and a Support agent. Give each widget its own widgetId, and they keep separate conversations, settings and events.

Start the second widget#

Keep the Quick install script tag for the first widget. Its id is default. Start the second one with init() and a widgetId, using the public key and deployment ID from the second deployment's Install tab:

<script>
  window.HelpAI = window.HelpAI || function () { (HelpAI.q = HelpAI.q || []).push(arguments); };

  HelpAI('init', {
    widgetId: 'sales',
    publicKey: 'SALES_PUBLIC_KEY',
    aiAgentDeploymentId: 'SALES_DEPLOYMENT_ID',
    presentation: { position: 'bottom-left' },
  });
</script>

Put the two bubbles in different corners, or one sits on top of the other. Calling init() again with the same widgetId changes that widget instead of adding another.

• NPM package: call init() once for each widget, each with its own widgetId.
• React: render <HelpAI widgetId='sales' … /> beside the first, and read it with useHelpAI('sales').

Control each one#

Buttons with data-helpai-* attributes, links with ?helpai=, and the HelpAI.open(), ask() and other shortcuts drive only the default widget. Reach the other one by its id:

const button = document.querySelector('#talk-to-sales');
button.addEventListener('click', () => {
  HelpAI.getInstance('sales')?.ask('Can I get a demo?');
});

HelpAI.getInstance() returns nothing until that widget has started, so call it from a click, as above.

To listen to both widgets at once, use HelpAI('hook', '*', 'open', callback): the callback gets the widget first, with its widgetId. See Send chat activity to your analytics.