Scripts

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.

Script Stats

Transfer
3.3 KB
Decoded
7.6 KB
Loading
CDN
First-Party
Supported
Bundling
No
Privacy
Some data collected
Tracked Data
User Identity Events

<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

Click to load
Clicking the button to the right will load the Crisp script

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.

With Environment Variables

If you prefer to configure your id using environment variables.

nuxt.config.ts
export default defineNuxtConfig({
  scripts: {
    registry: {
      crisp: true,
    }
  },
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        crisp: {
          id: '', // NUXT_PUBLIC_SCRIPTS_CRISP_ID
        },
      },
    },
  },
})
.env
NUXT_PUBLIC_SCRIPTS_CRISP_ID=<YOUR_ID>

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>
Edit this page
Markdown For LLMs

Cloudflare Web Analytics

Use Cloudflare Web Analytics in your Nuxt app.

Databuddy Analytics

Use Databuddy Analytics in your Nuxt app.