Crisp

Crisp is a customer messaging platform that lets you communicate with your customers through chat, email, and more.

Nuxt Scripts provides a useScriptCrisp composable and a headless Facade Component ScriptCrisp component to interact with crisp.

ScriptCrisp

The ScriptCrisp component is headless Facade Component wrapping the useScriptCrisp composable, providing a simple, performance optimized way to load Crisp in your Nuxt app.

It's optimized for performance by leveraging the Element Event Triggers, only loading crisp when specific elements events happen.

By default, it will load on the click DOM event.

Demo

Component API

See the Facade Component API for full props, events, and slots.

Props

• trigger: The trigger event to load crisp. Default is click. See Element Event Triggers for more information.
• id: Crisp ID.
• runtimeConfig: Extra configuration options. Used to configure the locale. Same as CRISP_RUNTIME_CONFIG.
• tokenId: Associated a session, equivalent to using CRISP_TOKEN_ID variable. Same as CRISP_TOKEN_ID.
• cookieDomain: Restrict the domain that crisp cookie is set on. Same as CRISP_COOKIE_DOMAIN.
• cookieExpiry: The cookie expiry in seconds. Same as CRISP_COOKIE_EXPIRATION.

See the Config Schema for full details.

Events

The ScriptCrisp component emits a single ready event when crisp is loaded.

const emits = defineEmits<{
  ready: [crisp: Crisp]
}>()

<script setup lang="ts">
function onReady(crisp) {
  console.log('Crisp is ready', crisp)
}
</script>

<template>
  <ScriptCrisp @ready="onReady" />
</template>

Slots

awaitingLoad

The slot is used to display content while crisp is loading.

<template>
  <ScriptCrisp>
    <template #awaitingLoad>
    <div style="width: 54px; height: 54px; border-radius: 54px; cursor: pointer; background-color: #1972F5;">
      chat!
    </div>
    </template>
  </ScriptCrisp>
</template>

loading

The slot is used to display content while crisp is loading.

Tip: You should use the ScriptLoadingIndicator by default for accessibility and UX.

<template>
  <ScriptCrisp>
    <template #loading>
      <div class="bg-blue-500 text-white p-5">
        Loading...
      </div>
    </template>
  </ScriptCrisp>
</template>

useScriptCrisp

The useScriptCrisp composable lets you have fine-grain control over Crisp SDK. It provides a way to load crisp SDK and interact with it programmatically.

export function useScriptCrisp<T extends CrispApi>(_options?: CrispInput) {}

Please follow the Registry Scripts guide to learn more about advanced usage.

Config Schema

export const CrispOptions = object({
  /**
   * Crisp ID.
   */
  id: string(),
  /**
   * Extra configuration options. Used to configure the locale.
   * Same as CRISP_RUNTIME_CONFIG.
   * @see https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/language-customization/
   */
  runtimeConfig: optional(object({
    locale: optional(string()),
  })),
  /**
   * Associated a session, equivalent to using CRISP_TOKEN_ID variable.
   * Same as CRISP_TOKEN_ID.
   * @see https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/session-continuity/
   */
  tokenId: optional(string()),
  /**
   * Restrict the domain that crisp cookie is set on.
   * Same as CRISP_COOKIE_DOMAIN.
   * @see https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/cookie-policies/
   */
  cookieDomain: optional(string()),
  /**
   * The cookie expiry in seconds.
   * Same as CRISP_COOKIE_EXPIRATION.
   * @see https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/cookie-policies/#change-cookie-expiration-date
   */
  cookieExpiry: optional(number()),
})

CrispApi

export interface CrispApi {
  push: (...args: any[]) => void
  is: (name: 'chat:opened' | 'chat:closed' | 'chat:visible' | 'chat:hidden' | 'chat:small' | 'chat:large' | 'session:ongoing' | 'website:available' | 'overlay:opened' | 'overlay:closed' | string) => boolean
  set: (name: 'message:text' | 'session:data' | 'session:segments' | 'session:event' | 'user:email' | 'user:phone' | 'user:nickname' | 'user:avatar' | 'user:company' | string, value: any) => void
  get: (name: 'chat:unread:count' | 'message:text' | 'session:identifier' | 'session:data' | 'user:email' | 'user:phone' | 'user:nickname' | 'user:avatar' | 'user:company' | string) => any
  do: (name: 'chat:open' | 'chat:close' | 'chat:toggle' | 'chat:show' | 'chat:hide' | 'helpdesk:search' | 'helpdesk:article:open' | 'helpdesk:query' | 'overlay:open' | 'overlay:close' | 'message:send' | 'message:show' | 'message:read' | 'message:thread:start' | 'message:thread:end' | 'session:reset' | 'trigger:run' | string, arg2?: any) => any
  on: (name: 'session:loaded' | 'chat:initiated' | 'chat:opened' | 'chat:closed' | 'message:sent' | 'message:received' | 'message:compose:sent' | 'message:compose:received' | 'user:email:changed' | 'user:phone:changed' | 'user:nickname:changed' | 'user:avatar:changed' | 'website:availability:changed' | 'helpdesk:queried' | string, callback: (...args: any[]) => any) => void
  off: (name: 'session:loaded' | 'chat:initiated' | 'chat:opened' | 'chat:closed' | 'message:sent' | 'message:received' | 'message:compose:sent' | 'message:compose:received' | 'user:email:changed' | 'user:phone:changed' | 'user:nickname:changed' | 'user:avatar:changed' | 'website:availability:changed' | 'helpdesk:queried' | string, callback: (...args: any[]) => any) => void
  config: (options: any) => void
  help: () => void
  [key: string]: any
}

For more information, please refer to the Crisp API documentation.

Example

Loading the Crisp SDK and interacting with it programmatically.

<script setup lang="ts">
const crisp = useScriptCrisp({
  id: 'YOUR_ID'
})
crisp.set('user:nickname', 'Harlan')
crisp.do('chat:open')
</script>