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

# ais-chat-trigger

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

```vue Signature theme={"system"}
<ais-chat-trigger
  // Optional parameters
  :floating="boolean"
  :toggle-icon-component="object | function"
  :class-names="object"
  :translations="object"
  @click="function"
/>
```

## Import

**Component**

To ensure optimal bundle sizes,
see [Optimize build size](https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/vue.md#optimize-build-size).

```js Vue icon=code theme={"system"}
import { AisChatTrigger } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisChatTrigger,
  },
  // ...
};
```

**Plugin**

This imports all widgets, even the ones you don't use.
For more information, see [Get started with Vue InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/getting-started/vue.md).

```js JavaScript icon="code" theme={"system"} theme={"system"} theme={"system"} theme={"system"}
import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);
```

## About this widget

The `ais-chat-trigger` widget renders a button that opens and closes the [`ais-chat`](https://www.algolia.com/doc/api-reference/widgets/chat/vue) widget.
By default, the button floats in the bottom-right corner of the viewport.

Add `ais-chat-trigger` when using the overlay or side-panel layout.
The [inline layout](https://www.algolia.com/doc/api-reference/widgets/chat/vue.md#param-layout) doesn't need a trigger.

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

## Examples

```vue Vue icon=code theme={"system"}
<template>
  <ais-instant-search index-name="instant_search" :search-client="searchClient">
    <ais-chat agent-id="8f7c4a2d-3b1e-4d5f-9a6c-e2b1f5d0c3e9" />
    <ais-chat-trigger />
  </ais-instant-search>
</template>
```

## Props

**floating** `boolean` (default: true)

By default, the trigger is a floating button.
Set `floating` to `false` to render an inline button that flows with surrounding content.

```vue Vue icon=code theme={"system"}
<ais-chat-trigger :floating="false" />
```

**toggle-icon-component** `object | (props: \{ isOpen: boolean \}) =\> VNode`

A Vue component or render function to replace the default icon.
It receives an `isOpen` Boolean prop so it can show different icons when the chat opens or closes.

```vue Vue icon=code expandable theme={"system"}
<template>
  <ais-chat-trigger :toggle-icon-component="ChatIcon" />
</template>

<script>
  // ChatIcon.vue declares an `isOpen` boolean prop
  import ChatIcon from "./ChatIcon.vue";

  export default {
    data() {
      return { ChatIcon };
    },
  };
</script>
```

**class-names** `object` (default: \{})

The [CSS classes you can override](https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue.md#style-your-widgets):

* `ais-ChatToggleButton`. The widget's root element (the button).

```vue Vue icon=code theme={"system"}
<ais-chat-trigger
  :class-names="{
    'ais-ChatToggleButton': 'MyCustomChatTrigger',
  }"
/>
```

**translations** `object`

A dictionary of translations to customize the button's accessible label, which screen readers announce.

* `openLabel` (`string`). The accessible label when the chat isn't open. The default is `Open chat`.
* `closeLabel` (`string`). The accessible label when the chat is open. The default is `Close chat`.

```vue Vue icon=code theme={"system"}
<ais-chat-trigger
  :translations="{
    openLabel: 'Ouvrir le chat',
    closeLabel: 'Fermer le chat',
  }"
/>
```

## Events

**click** `() =\> void`

The widget emits a `click` event after opening or closing the chat.

```vue Vue icon=code theme={"system"}
<ais-chat-trigger @click="trackChatTriggerClick" />
```

## HTML output

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

When the chat is open, the button also gets the `ais-ChatToggleButton--open` class, and its `aria-label` becomes `Close chat`.