The widget developer kit

Version 1.9 of the chat widget is for the people who build your website. Everything here is optional: the Quick install snippet works as before.

What's new#

• Buttons without code. data-helpai-open, data-helpai-ask, data-helpai-form and data-helpai-close turn any link or button on your site into a way into the chat.
• Deep links. ?helpai=help or #helpai-ask= in a link to your site opens the widget at a tab, an article or a question when the page loads, so support emails and QR codes land in the right place.
• A JavaScript API. HelpAI.ready() tells you when the widget has connected, chat.state says whether it's open and how many replies are unread, and state and unread events keep you up to date.
• Start over on sign-out. reset() forgets the visitor in that browser, for shared computers.
• Follow your site's theme. theme: 'host' matches your page's light and dark mode and flips with your theme switch. Portals and hosted pages now do this for their chat too.
• Style it your way. Five named parts, launcher, panel, header, messages and composer, take your own CSS through ::part().
• A React kit. <HelpAI /> and useHelpAI() from @helpai/elements/react, with typed attributes for the <web-ai-chat> element in React, Vue and Svelte.
• Docs for AI coding tools. llms.txt and the full guides ship with the widget, so your coding assistant installs it correctly.
• Usage counts start once the widget connects, so a page where it never loads doesn't add to your analytics.

Start with Open the chat from your own buttons and links (opens another site) in the Help Center.