スタートガイド

インストール

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いのAIツールに Capgo のスキルを追加してください：

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

次に、以下のプロンプトを使用します：

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();

例：push token

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

よくある落とし穴

• 一度設定するだけ：呼び出し configure() メッセンジャーを開く前に。
• ログアウト時にリセット: reset() Crispのセッションをクリアします。
• Web: pushヘルパーはモバイル専用です。

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

現在のユーザーセッションに一意のトークン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のダッシュボードでユーザーを分類するために使用します。

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のダッシュボード上でイベントを視覚的に分類するために使用します。

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

Source of Truth

このページはプラグインの src/definitions.tsから生成されています。upstream で公開 API が変更されたら、再度 sync を実行してください。

Getting Startedの続きを進める

使用している場合 スタートガイド ダッシュボードと API の運用を計画するには、これを次と連携させます @capgo/capacitor-crisp の使い方 @capgo/capacitor-crisp を使用する際のネイティブ機能については、 API の概要 「API の概要」の実装の詳細については、 はじめに 「はじめに」における実装の詳細については、 API キー および「API Keys」の実装の詳細については、 デバイス 実装の詳細については Devices を参照してください。