跳转到内容
Capgo - Live Updates for Capacitor Apps Capgo

入门

  1. 安装软件包

    Terminal window
    npm i @capgo/capacitor-crisp

  2. 与原生项目同步

    Terminal window
    npx cap sync

  3. 获取您的 Crisp 网站 ID

    • 在 crisp.chat 注册
    • 创建网站/项目
    • 在“设置”>“设置说明”中查找您的网站 ID

基本用法

Section titled “基本用法”

导入插件并使用您的网站 ID 配置它：

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


// Configure Crisp with your website ID
const configureCrisp = async () => {
  await CapacitorCrisp.configure({
    websiteID: 'YOUR_WEBSITE_ID'
  });
};


// Open the chat
const openChat = async () => {
  await CapacitorCrisp.openMessenger();
};


// Set user information
const setUserInfo = async () => {
  await CapacitorCrisp.setUser({
    email: 'user@example.com',
    nickname: 'John Doe',
    phone: '+1234567890',
    avatar: 'https://example.com/avatar.jpg'
  });
};


// Reset user session (logout)
const logout = async () => {
  await CapacitorCrisp.resetChatSession();
};

API 参考

Section titled “API 参考”

配置（选项）

Section titled “配置（选项）”

使用您的网站 ID 和可选设置配置 Crisp。

interface ConfigureOptions {
  websiteID: string;
  locale?: string; // e.g., 'en', 'fr', 'es'
  tokenID?: string; // For authenticated sessions
}


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

openMessenger()

Section titled “openMessenger()”

打开 Crisp 聊天界面。

await CapacitorCrisp.openMessenger();

设置用户（选项）

Section titled “设置用户（选项）”

设置聊天会话的用户信息。

interface UserOptions {
  email?: string;
  nickname?: string;
  phone?: string;
  avatar?: string;
}


await CapacitorCrisp.setUser({
  email: 'user@example.com',
  nickname: 'John Doe'
});

setUserCompany(选项)

Section titled “setUserCompany(选项)”

为企业用户设置公司信息。

interface CompanyOptions {
  name: string;
  url?: string;
  description?: string;
  employment?: {
    title?: string;
    role?: string;
  };
  geolocation?: {
    city?: string;
    country?: string;
  };
}


await CapacitorCrisp.setUserCompany({
  name: 'Acme Corp',
  url: 'https://acme.com',
  employment: {
    title: 'CEO',
    role: 'Leadership'
  }
});

推送事件（选项）

Section titled “推送事件（选项）”

发送自定义事件来跟踪用户操作。

interface EventOptions {
  name: string;
  color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'brown' | 'grey' | 'black';
  data?: { [key: string]: any };
}


await CapacitorCrisp.pushEvent({
  name: 'checkout_completed',
  color: 'green',
  data: {
    price: 99.99,
    currency: 'USD'
  }
});

setSessionSegment(段)

Section titled “setSessionSegment(段)”

设置分段以对聊天会话进行分类。

await CapacitorCrisp.setSessionSegment('premium_customer');

重置ChatSession()

Section titled “重置ChatSession()”

重置当前聊天会话（对于注销很有用）。

await CapacitorCrisp.resetChatSession();

高级功能

Section titled “高级功能”

自定义用户数据

Section titled “自定义用户数据”
// Set multiple custom data fields
await CapacitorCrisp.setSessionData({
  key: 'plan',
  value: 'premium'
});


await CapacitorCrisp.setSessionData({
  key: 'signup_date',
  value: '2024-01-15'
});

消息预设

Section titled “消息预设”

在聊天输入中设置预填充消息：

await CapacitorCrisp.setMessageText(
  "Hello, I need help with my order #12345"
);

聊天可用性

Section titled “聊天可用性”

控制聊天小部件何时可用：

// Hide chat temporarily
await CapacitorCrisp.setTokenID('user_token_12345');

完整示例

Section titled “完整示例”
import { CapacitorCrisp } from '@capgo/capacitor-crisp';


export class ChatService {
  async initialize() {
    // Configure Crisp
    await CapacitorCrisp.configure({
      websiteID: 'YOUR_WEBSITE_ID',
      locale: 'en'
    });
  }


  async loginUser(user: any) {
    // Set user information
    await CapacitorCrisp.setUser({
      email: user.email,
      nickname: user.name,
      phone: user.phone,
      avatar: user.avatarUrl
    });


    // Set custom data
    await CapacitorCrisp.setSessionData({
      key: 'user_id',
      value: user.id
    });


    await CapacitorCrisp.setSessionData({
      key: 'account_type',
      value: user.accountType
    });


    // Set segment
    if (user.isPremium) {
      await CapacitorCrisp.setSessionSegment('premium');
    }


    // Track login event
    await CapacitorCrisp.pushEvent({
      name: 'user_login',
      color: 'blue',
      data: {
        method: 'email'
      }
    });
  }


  async openSupport(context?: string) {
    if (context) {
      await CapacitorCrisp.setMessageText(
        `I need help with: ${context}`
      );
    }


    await CapacitorCrisp.openMessenger();
  }


  async logout() {
    await CapacitorCrisp.resetChatSession();
  }
}

样式和定制

Section titled “样式和定制”

Crisp 会自动适应您应用程序的主题，但您可以通过 Crisp 仪表板进一步自定义它：

  1. 转到您的 Crisp 仪表板
  2. 导航至设置 > 网站设置 > 聊天室和电子邮件设置
  3. 自定义颜色、位置和行为

最佳实践

Section titled “最佳实践”

  1. 尽早初始化 在应用程序初始化期间配置 Crisp 以立即可用：

    import { App } from '@capacitor/app';
    

    App.addListener('appStateChange', async ({ isActive }) => {
      if (isActive) {
        await CapacitorCrisp.configure({
          websiteID: 'YOUR_WEBSITE_ID'
        });
      }
    });

  2. 设置用户上下文 始终在可用时提供用户信息以获得更好的支持：

    if (user.isAuthenticated) {
      await CapacitorCrisp.setUser({
        email: user.email,
        nickname: user.name
      });
    }

  3. 追踪重要事件 使用事件为支持代理提供上下文：

    await CapacitorCrisp.pushEvent({
      name: 'error_occurred',
      color: 'red',
      data: {
        error: error.message,
        screen: 'checkout'
      }
    });

  4. 正确处理注销 当用户注销时始终重置会话：

    async logout() {
      await CapacitorCrisp.resetChatSession();
      // Your other logout logic
    }

平台说明

Section titled “平台说明”

iOS

Section titled “iOS”
  • 需要 iOS 10.0+
  • 使用原生 Crisp iOS SDK
  • 支持推送通知（在 Crisp 仪表板中配置）

Android

Section titled “Android”
  • 需要 Android 5.0 (API 21)+
  • 使用原生 Crisp Android SDK
  • 符合材料设计标准

网络

Section titled “网络”
  • 回落到脆 JavaScript SDK
  • 与本机平台的完整功能对等