快速入门

安装

你可以使用我们的 AI 辅助设置来安装插件。使用以下命令将 Capgo skills 添加到你的 AI 工具中：

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

然后使用以下 prompt：

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-crisp` plugin in my project.

如果你更想手动设置，请运行以下命令安装插件，并按照下方各平台的说明操作：

bun add @capgo/capacitor-crisp
bunx cap sync

导入

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

快速入门

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.configure({ websiteID: 'your-website-id' });
await CapacitorCrisp.setUser({ nickname: 'Ada', email: 'ada@example.com' });
await CapacitorCrisp.openMessenger();

示例：推送 token

await CapacitorCrisp.registerPushToken({ token: apnsOrFcmToken });

常见坑点

• 一次性配置: 调用 configure() 在打开聊天窗口之前。
• 退出时重置: reset() 清除 Crisp 会话。
• Web 端: push helpers 仅限移动端使用。

API 概览

configure

使用您的网站 ID 配置 Crisp SDK。 必须在调用任何其他方法之前执行。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.configure({ websiteID: 'YOUR_WEBSITE_ID' });

openMessenger

打开 Crisp 聊天窗口。 向用户展示聊天界面。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.openMessenger();

setTokenID

为当前用户会话设置唯一的 token ID。 用于识别并恢复之前的对话。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.setTokenID({ tokenID: 'token-id-123' });

setUser

为当前会话设置用户信息。 更新支持人员可见的用户配置。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.setUser({
  nickname: 'John Doe',
  email: 'john@example.com',
  phone: '+1234567890'
});

pushEvent

向 Crisp 推送自定义事件。 适用于追踪用户操作和行为。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.pushEvent({
  name: 'completed_purchase',
  color: 'green'
});

setCompany

为当前会话设置公司信息。 将用户与 Crisp 中的公司进行关联。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.setCompany({
  name: 'Acme Corp',
  url: 'https://acme.com',
  employment: ['CEO', 'Executive'],
  geolocation: ['USA', 'San Francisco']
});

setInt

设置自定义整数数据字段。 存储与用户会话关联的数值数据。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.setInt({ key: 'user_level', value: 42 });

setString

设置自定义字符串数据字段。 存储与用户会话关联的文本数据。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.setString({ key: 'subscription_tier', value: 'premium' });

sendMessage

向聊天窗口发送消息。 通过代码模拟用户输入并发送消息。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.sendMessage({ value: 'Hello, I need help!' });

setSegment

设置用户分层以进行定向和管理。 用于在 Crisp dashboard 中对用户进行分类。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.setSegment({ segment: 'premium-users' });

reset

重置 Crisp 会话。 清除所有用户数据并开启新会话。 用户登出时很有用。

import { CapacitorCrisp } from '@capgo/capacitor-crisp';

await CapacitorCrisp.reset();

类型参考

ConfigureOptions

初始化 Crisp 的配置项。

export interface ConfigureOptions {
  /**
   * Your Crisp website ID from dashboard.
   */
  websiteID: string;
  /**
   * Optional - Locale to force in the Crisp chat widget (ISO 639-1), eg. `en`, `fr`, `es`.
   * Web + Android: overrides the runtime locale. iOS follows the device/app locale.
   */
  locale?: string;
  /**
   * Optional - Unique token identifier for the user session continuity.
   */
  tokenID?: string;
}

eventColor

Crisp 事件的可选颜色。用于在 Crisp dashboard 中对事件进行视觉分类。

export type eventColor =
  | 'red'
  | 'orange'
  | 'yellow'
  | 'green'
  | 'blue'
  | 'purple'
  | 'pink'
  | 'brown'
  | 'grey'
  | 'black';

单一事实来源

本页面由插件的 src/definitions.ts生成。当上游的公共 API 发生变化时，请重新运行 sync。

从入门指南继续

如果你正在使用 快速入门 要规划 dashboard 和 API 操作，请将其连接到 使用 @capgo/capacitor-crisp 用于“使用 @capgo/capacitor-crisp”中的原生能力， API 概览 关于 API Overview 中的实现细节， 简介 关于 Introduction 中的实现细节， API 密钥 有关 API Keys 的实现细节，以及 设备 有关 Devices 的实现细节。