> ## 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">React</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="false"><a className="afs-option" 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="true"><a className="afs-option is-current" 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).

```tsx Signature theme={"system"}
<ChatTrigger
  // Optional props
  floating={boolean}
  onClick={function}
  classNames={object}
  // Optional component props
  toggleIconComponent={function}

  ...props={ComponentProps<'button'>}
/>
```

## Import

```jsx JavaScript icon=code theme={"system"}
import { ChatTrigger } from "react-instantsearch";
```

## About this widget

`<ChatTrigger>` renders a button that opens the [`<Chat>`](/doc/api-reference/widgets/chat/react) widget's overlay.
By default, it's a floating action button anchored to the bottom-right of the viewport.

`<Chat>` 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/react) on a `SearchBox` or an [inline layout](/doc/api-reference/widgets/chat/react#param-layout-component).

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

## Examples

```jsx JavaScript icon=code theme={"system"}
import React from "react";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { InstantSearch, Chat, ChatTrigger } from "react-instantsearch";

const searchClient = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");

function App() {
  return (
    <InstantSearch indexName="instant_search" searchClient={searchClient}>
      <Chat agentId="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9" />
      <ChatTrigger />
    </InstantSearch>
  );
}
```

## Props

<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.

  ```jsx JavaScript icon=code theme={"system"}
  <ChatTrigger floating={false} />
  ```
</ParamField>

<ParamField body="onClick" type="() => void">
  A callback called when the trigger is clicked, in addition to opening or closing the chat.

  ```jsx JavaScript icon=code theme={"system"}
  <ChatTrigger
    onClick={() => {
      analytics.track("chat_trigger_clicked");
    }}
  />
  ```
</ParamField>

<ParamField body="toggleIconComponent" type="(props: { isOpen: boolean }) => JSX.Element">
  A component to replace the default icon. It receives a prop containing `{ isOpen: boolean }` for conditional rendering—for example, to show a different icon when the chat is open.

  ```jsx JavaScript icon=code theme={"system"}
  <ChatTrigger
    toggleIconComponent={({ isOpen }) => <span>{isOpen ? "×" : "✨"}</span>}
  />
  ```
</ParamField>

<ParamField body="classNames" type="Partial<ChatToggleButtonClassNames>">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/react#style-your-widgets) 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).

  * `root`. The root element of the widget (the button).

  ```jsx JavaScript icon=code theme={"system"}
  <ChatTrigger
    classNames={{
      root: "MyCustomChatTrigger",
    }}
  />
  ```
</ParamField>

<ParamField body="...props" type="React.ComponentProps<'button'>">
  Any `<button>` prop to forward to the root element of the widget.

  ```jsx JavaScript icon=code theme={"system"}
  <ChatTrigger className="MyCustomChatTrigger" aria-label="Open chat" />
  ```
</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.