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({
  container: string | HTMLElement,
  // Optional parameters
  floating?: boolean,
  templates?: object,
  cssClasses?: object,
});

Import

Package manager

import { chatTrigger } from 'instantsearch.js/es/widgets';

// "chatTrigger" is not available from the UMD build.
// Please use InstantSearch.js with a packaging system.

About this widget

Use the chatTrigger widget to render 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.

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 on a searchBox or an inline layout.

See also: Agent Studio

Examples

JavaScript

chat({
  container: '#chat',
  agentId: '8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9',
});

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

Options

container · string | HTMLElement · required

The CSS Selector or HTMLElement to insert the widget into.

string

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

chatTrigger({
  container: document.querySelector('#chat-trigger'),
});

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,
});

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

JavaScript

chatTrigger({
  // ...
  templates: {
    icon({ isOpen }, { html }) {
      return html`<span>${isOpen ? '×' : '✨'}</span>`;
    },
  },
});

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

• button. CSS class to add to the button.

JavaScript

chatTrigger({
  // ...
  cssClasses: {
    button: 'MyCustomChatTrigger',
  },
});

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.