# The widget developer kit

> Buttons that open the chat without code, deep links, a JavaScript API, a React kit, your own styling and docs for AI coding tools.

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](https://docs.help.ai/customize-and-extend-the-widget/open-the-chat-from-your-page) in the Help Center.