Skip to content
Docs
Sign in

Customize and extend the widget

For developers: open the chat from your own page, style it, and build it into your app.

  1. Open the chat from your own buttons and links

    Turn any button or link on your site into a way into the chat, with no JavaScript.

  2. Control the widget with JavaScript

    Open the chat, ask a question for the visitor, read its state and react to events from your own code.

  3. Verify signed-in users

    Keep signed-in customers' chats on every device, and tell the AI agent who they are.

  4. Tell the AI agent about your visitor and page

    Give the AI agent your visitor's plan and name, and the page they're on, with attributes or code.

  5. Show unread replies on your site

    Put a badge with the number of unread replies on your own Help or Messages link.

  6. Send chat activity to your analytics

    Forward chat opens, messages, form submissions and ratings to Google Analytics or any tracker.

  7. Match your site's theme and style the widget

    Follow your site's dark mode, and restyle the widget with CSS variables and part names.

  8. Add the widget to a React or Next.js app

    Mount the widget with one component, drive it with a hook, and get typed attributes in Vue and Svelte.

  9. Run two widgets on one page

    Show two deployments on the same page, such as Sales and Support, and control each one.

  10. Load the chat after visitors accept cookies

    Start the widget from your consent banner, and remove it and its stored data if consent is withdrawn.

  11. Install the widget with an AI coding assistant

    Point your coding assistant at the widget's docs for AI tools, and check what it did.

  12. Debug the widget on your site

    Turn on the widget's console log, send it to your error tracker, and check which version runs.

  13. Report your site's events to help.ai

    Tell the AI agent what the visitor just did on your site, and count it, with track().