ChatTrigger

Renders a button that opens the Chat widget’s overlay, built with Algolia Agent Studio.

This widget is and is subject to change in minor versions.

For more information, see Agent Studio.

Signature

<ChatTrigger
  // Optional props
  floating={boolean}
  onClick={function}
  classNames={object}
  // Optional component props
  toggleIconComponent={function}

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

Import

JavaScript

import { ChatTrigger } from "react-instantsearch";

About this widget

<ChatTrigger> renders a button that opens the <Chat> 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 on a SearchBox or an inline layout.

See also: Agent Studio

Examples

JavaScript

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

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

JavaScript

<ChatTrigger floating={false} />

onClick · () => void

A callback called when the trigger is clicked, in addition to opening or closing the chat.

JavaScript

<ChatTrigger
  onClick={() => {
    analytics.track("chat_trigger_clicked");
  }}
/>

toggleIconComponent · (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.

JavaScript

<ChatTrigger
  toggleIconComponent={({ isOpen }) => <span>{isOpen ? "×" : "✨"}</span>}
/>

classNames · Partial<ChatToggleButtonClassNames>

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 or Tailwind CSS.

• root. The root element of the widget (the button).

JavaScript

<ChatTrigger
  classNames={{
    root: "MyCustomChatTrigger",
  }}
/>

...props · React.ComponentProps<'button'>

Any <button> prop to forward to the root element of the widget.

JavaScript

<ChatTrigger className="MyCustomChatTrigger" aria-label="Open chat" />

HTML output

HTML

<button class="ais-ChatToggleButton ais-ChatToggleButton--floating">
  <!-- icon -->
</button>

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