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.

Crisp

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Crisp globally. Alternatively you can use the useScriptCrisp composable for more control. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      crisp: {
        id: 'YOUR_WEBSITE_ID',
        trigger: 'onNuxtReady',
      }
    }
  }
})

This config automatically enables first-party mode (bundle). See below to customise.

useScriptCrisp()

The useScriptCrisp composable lets you have fine-grain control over when and how Crisp is loaded on your site. 

const { proxy } = useScriptCrisp()

proxy.$crisp.push(['do', 'chat:open'])

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

First-Party Mode: Privacy Focused Proxy

No extra config needed. The script is bundled and served from your domain instead of a third-party CDN, eliminating an extra DNS lookup and improving load times. Learn more.

Mode
Bundle 
export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled
    registry: {
      crisp: {
        id: 'YOUR_WEBSITE_ID',
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Crisp in a component. 

<script setup lang="ts">
const { proxy } = useScriptCrisp()

// noop in development, ssr
// just works in production, client
function handleAction() {
  proxy.$crisp.push(['do', 'chat:open'])
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

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

With Environment Variables

If you prefer to configure your id using environment variables.

nuxt.config.ts
export default defineNuxtConfig({
  scripts: {
    registry: {
      crisp: { trigger: 'onNuxtReady' },
    }
  },
  // 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 loads.

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

This slot displays 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

This slot displays 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.

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

idstring required

The Crisp ID.

runtimeConfigobject

Extra configuration options. Used to configure the locale. Same as CRISP_RUNTIME_CONFIG.

tokenIdstring

Associated a session, equivalent to using CRISP_TOKEN_ID variable. Same as CRISP_TOKEN_ID.

cookieDomainstring

Restrict the domain that the Crisp cookie is set on. Same as CRISP_COOKIE_DOMAIN.

cookieExpirynumber

The cookie expiry in seconds. Same as CRISP_COOKIE_EXPIRATION.

Example

Loading the Crisp SDK and interacting with it programmatically.

<script setup lang="ts">
const { proxy } = useScriptCrisp({
  id: 'YOUR_ID'
})
proxy.set('user:nickname', 'Harlan')
proxy.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.