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

The simplest way to load Crisp globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptCrisp composable. 

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

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

This script supports First-Party Mode which is auto-enabled, routing all traffic through your domain for improved privacy and ad blocker bypass. 

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

Example

Using Crisp only in production while using the proxy to send events. 

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