> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# chatTrigger

> Renders a button that opens the chat widget's overlay, built with Algolia Agent Studio.

export const customLabel_0 = "in beta"

<div className="not-prose algolia-flavor-switcher">
  <div className="afs-dropdown">
    <div className="afs-trigger" role="button" tabIndex="0" aria-haspopup="listbox">
      <span className="afs-current">JavaScript</span>

      <svg className="afs-chevron lucide lucide-chevron-down" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/api-reference/widgets/chat-trigger/js"><span className="afs-option-name">JavaScript</span><span className="afs-option-lib">InstantSearch.js</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/chat-trigger/react"><span className="afs-option-name">React</span><span className="afs-option-lib">React InstantSearch</span></a></li>
    </ul>
  </div>
</div>

<Callout icon="flask-conical" color="#14b8a6">
  This widget is **{customLabel_0 || "experimental"}** and is subject to change in minor versions.
</Callout>

For more information, see [Agent Studio](/doc/guides/algolia-ai/agent-studio).

```ts Signature theme={"system"}
chatTrigger({
  container: string | HTMLElement,
  // Optional parameters
  floating?: boolean,
  templates?: object,
  cssClasses?: object,
});
```

## Import

<CodeGroup>
  ```js Package manager theme={"system"}
  import { chatTrigger } from 'instantsearch.js/es/widgets';
  ```

  ```js CDN theme={"system"}
  // "chatTrigger" is not available from the UMD build.
  // Please use InstantSearch.js with a packaging system.
  ```
</CodeGroup>

## About this widget

Use the `chatTrigger` widget to render a button that opens the [`chat`](/doc/api-reference/widgets/chat/js) widget's overlay.
By default, it's a floating action button anchored to the bottom-right of the viewport.

The `chat` widget doesn't render a way to open it on its own, so pair it with `chatTrigger` unless you provide another entry point such as [AI mode](/doc/guides/building-search-ui/going-further/chat-customization/ai-search-experience/js) on a `searchBox` or an inline layout.

See also: [Agent Studio](/doc/guides/algolia-ai/agent-studio)

## Examples

```js JavaScript icon=code theme={"system"}
chat({
  container: '#chat',
  agentId: '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
});

chatTrigger({
  container: '#chat-trigger',
});
```

## Options

<ParamField body="container" type="string | HTMLElement" required>
  The CSS Selector or `HTMLElement` to insert the widget into.

  <CodeGroup>
    ```js string theme={"system"}
    chatTrigger({
      container: '#chat-trigger',
    });
    ```

    ```js HTMLElement theme={"system"}
    chatTrigger({
      container: document.querySelector('#chat-trigger'),
    });
    ```
  </CodeGroup>
</ParamField>

<ParamField body="floating" type="boolean" default={true}>
  Whether to render the button as a floating action button anchored to the bottom-right of the viewport. Set it to `false` to render an inline button that flows with surrounding content.

  ```js JavaScript icon=code theme={"system"}
  chatTrigger({
    // ...
    floating: false,
  });
  ```
</ParamField>

<ParamField body="templates" type="object">
  The templates to customize parts of the widget.

  * `layout`. Template for the trigger button layout. Receives the button props, including `open`, `onClick`, and `toggleIconComponent`.
  * `icon`. Template for the trigger button icon. Receives a parameter containing `{ isOpen: boolean }` for conditional rendering.

  ```js JavaScript icon=code theme={"system"}
  chatTrigger({
    // ...
    templates: {
      icon({ isOpen }, { html }) {
        return html`<span>${isOpen ? '×' : '✨'}</span>`;
      },
    },
  });
  ```
</ParamField>

<ParamField body="cssClasses" type="object">
  The CSS classes you can override and pass to the widget's elements.
  It's useful to style widgets with class-based CSS frameworks like [Bootstrap](https://getbootstrap.com) or [Tailwind CSS](https://tailwindcss.com).

  * `button`. CSS class to add to the button.

  ```js JavaScript icon=code theme={"system"}
  chatTrigger({
    // ...
    cssClasses: {
      button: 'MyCustomChatTrigger',
    },
  });
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<button class="ais-ChatToggleButton ais-ChatToggleButton--floating">
  <!-- icon -->
</button>
```

When the chat is open, the button also gets the `ais-ChatToggleButton--open` class.