Open the chat from your own buttons and links

Your page already has the places people look for help: a "Contact us" link, a pricing table, an error message. Add one attribute and those elements open the widget instead. There's no JavaScript to write.

It works with the Quick install script tag, the <web-ai-chat> element, the NPM package and the React kit. It doesn't work with Embed in an iframe, where the chat runs on the hosted page, or for a second widget that has its own widgetId.

Add an attribute#

<a href="/contact" data-helpai-open>Chat with us</a>
<a href="/help" data-helpai-open="help">Help</a>
<a href="/changelog" data-helpai-open="news">What's new</a>
<button data-helpai-ask>
  Which plan fits a team of 10?
</button>
<button data-helpai-form="FORM_ID">Book a demo</button>

A link keeps its href, so it still works if the widget hasn't loaded. Once it has, the click opens the widget instead of following the link.

• One action per element. If an element has more than one of these attributes, data-helpai-ask wins, then data-helpai-open, then data-helpai-form, then data-helpai-close.
• A tab the deployment doesn't have just opens the chat.
• Your own web components work too. A button inside a shadow DOM component triggers the widget like any other.

Find an article or post id#

Open the article or post in Content. Its id is the part of the page's address after /content/items/, without a trailing /edit.

Open a form from a button#

1. In the deployment's Chat widget tab, under Forms, select Add form, pick the form and set When to Manual (open via code). Select Save changes.
2. Open the form in Forms. Its ID is the part of the page's address between /forms/ and /edit.
3. Put that ID in data-helpai-form.

A manual form shows each time your page asks for it, even if the visitor filled it in before. Only one form shows at a time.

To open the chat and show the form with one click, use code:

const button = document.querySelector('#book-demo');
button.addEventListener('click', async () => {
  const chat = await HelpAI.ready();
  chat.open();
  chat.openForm('FORM_ID');
});

Link straight into the chat#

A link to your site can open the widget when the page loads, which is handy in support emails, docs and QR codes. The widget acts once, then removes its part of the address, so a reload or a shared copy doesn't repeat it. Your page's own address, parameters and anchors stay as they are.

https://example.com/pricing?helpai=help
https://example.com/plans#helpai-ask=Which+plan+fits%3F

• Either one works after ? or after #, such as #helpai=help or ?helpai-ask=….
• If a link has both, the question wins and the tab is ignored.
• The widget reads the link once, when it loads on the page. In a single-page app, a route change doesn't read it again; open the chat from your code instead.

A question from a link only fills the message box. The visitor sends it, so a shared link can never send a message on someone's behalf.

Related: Control the widget with JavaScript and Show a form in the chat widget (opens another site).