ais-chat-trigger

Signature

<ais-chat-trigger
  // Optional parameters
  :floating="boolean"
  :toggle-icon-component="object | function"
  :class-names="object"
  :translations="object"
  @click="function"
/>

Import

Component
Plugin

To ensure optimal bundle sizes, see Optimize build size.

Vue

import { AisChatTrigger } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

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

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

The ais-chat-trigger widget renders a button that opens and closes the ais-chat 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 doesn’t need a trigger. See also: Agent Studio

Examples

Vue

<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

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

<ais-chat-trigger :floating="false" />

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

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

object

default:"{}"

The CSS classes you can override:

ais-ChatToggleButton. The widget’s root element (the button).

Vue

<ais-chat-trigger
  :class-names="{
    'ais-ChatToggleButton': 'MyCustomChatTrigger',
  }"
/>

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

<ais-chat-trigger
  :translations="{
    openLabel: 'Ouvrir le chat',
    closeLabel: 'Fermer le chat',
  }"
/>

Events

() => void

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

Vue

<ais-chat-trigger @click="trackChatTriggerClick" />

HTML output

HTML

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

​Import

​About this widget

​Examples

​Props

​Events

​HTML output

Import

About this widget

Examples

Props

Events

HTML output