支持
在您的 Nuxt 应用程序中展示性能优化的 Crisp。
Crisp 是一个客户消息平台，允许您通过聊天、电子邮件等方式与您的客户进行沟通。
Nuxt Scripts 提供了一个 useScriptCrisp 可组合函数和一个无头 Facade 组件 ScriptCrisp 组件来与 Crisp 进行交互。
ScriptCrisp
ScriptCrisp 组件是一个无头 Facade 组件，它包装了 useScriptCrisp 可组合函数，提供了一种简单、性能优化的方式，可以在您的 Nuxt 应用程序中加载 Crisp。
它通过利用 元素事件触发器 优化性能，仅在特定元素事件发生时加载 Crisp。
默认情况下，它将在 click DOM 事件上加载。
演示
点击加载
点击右侧的按钮将加载 Crisp 脚本
组件 API
查看 Facade 组件 API 以获取完整的 props、事件和插槽。
Props
trigger: 加载 Crisp 的触发事件。默认值为click。查看 元素事件触发器 以获取更多信息。id: Crisp ID。runtimeConfig: 额外的配置选项。用于配置语言环境。与 CRISP_RUNTIME_CONFIG 相同。tokenId: 与一个会话相关联，等同于使用 CRISP_TOKEN_ID 变量。与 CRISP_TOKEN_ID 相同。cookieDomain: 限制 Crisp Cookie 设置的域。与 CRISP_COOKIE_DOMAIN 相同。cookieExpiry: Cookie 过期时间（以秒为单位）。与 CRISP_COOKIE_EXPIRATION 相同。
查看 配置模式 以获取完整详细信息。
事件
ScriptCrisp 组件在 Crisp 加载时发出一个 ready 事件。
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>
插槽
awaitingLoad
该插槽用于在 Crisp 加载时显示内容。
<template>
<ScriptCrisp>
<template #awaitingLoad>
<div style="width: 54px; height: 54px; border-radius: 54px; cursor: pointer; background-color: #1972F5;">
chat!
</div>
</template>
</ScriptCrisp>
</template>
loading
该插槽用于在 Crisp 加载时显示内容。
提示：您应该默认使用 ScriptLoadingIndicator 来提高可访问性和用户体验。
<template>
<ScriptCrisp>
<template #loading>
<div class="bg-blue-500 text-white p-5">
Loading...
</div>
</template>
</ScriptCrisp>
</template>
useScriptCrisp
useScriptCrisp 可组合函数允许您对 Crisp SDK 进行细粒度控制。它提供了一种加载 Crisp SDK 并以编程方式与之交互的方式。
export function useScriptCrisp<T extends CrispApi>(_options?: CrispInput) {}
请按照 注册表脚本 指南了解有关高级用法的更多信息。
配置模式
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
}
有关更多信息，请参阅 Crisp API 文档。
示例
加载 Crisp SDK 并以编程方式与之交互。
<script setup lang="ts">
const crisp = useScriptCrisp({
id: 'YOUR_ID'
})
crisp.set('user:nickname', 'Harlan')
crisp.do('chat:open')
</script>