Panduan Memulai

Instal

Anda bisa menggunakan AI-Assisted Setup kami untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda dengan command berikut:

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

Lalu gunakan prompt berikut:

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

Jika Anda lebih memilih Manual Setup, instal plugin dengan menjalankan perintah berikut dan ikuti petunjuk khusus platform di bawah ini:

bun add @capgo/capacitor-crisp
bunx cap sync

Impor

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

Mulai cepat

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

Contoh: push token

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

Kesalahan umum

• Konfigurasi sekali saja: panggil configure() sebelum membuka messenger.
• Reset saat logout: reset() menghapus sesi Crisp.
• Web: push helpers hanya untuk mobile.

Ringkasan API

configure

Konfigurasi SDK Crisp dengan ID website Anda. Harus dipanggil sebelum menggunakan method lainnya.

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

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

openMessenger

Buka jendela chat messenger Crisp. Menampilkan antarmuka chat ke pengguna.

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

await CapacitorCrisp.openMessenger();

setTokenID

Atur token ID unik untuk sesi user saat ini. Digunakan untuk mengidentifikasi dan memulihkan percakapan sebelumnya.

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

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

setUser

Atur informasi user untuk sesi saat ini. Memperbarui profil user yang terlihat oleh agen support.

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

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

pushEvent

Kirim custom event ke Crisp. Berguna untuk melacak aksi dan perilaku user.

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

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

setCompany

Atur informasi perusahaan untuk sesi saat ini. Menghubungkan user dengan perusahaan di 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

Set field data integer kustom. Menyimpan data numerik yang terkait dengan sesi pengguna.

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

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

setString

Set field data string kustom. Menyimpan data teks yang terkait dengan sesi pengguna.

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

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

sendMessage

Kirim pesan dari pengguna ke chat. Kirim pesan secara programatik seolah-olah diketik oleh pengguna.

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

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

setSegment

Set segmen pengguna untuk targeting dan organisasi. Digunakan untuk mengategorikan pengguna di dashboard Crisp.

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

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

reset

Reset sesi Crisp. Menghapus semua data user dan memulai sesi baru. Berguna saat user logout.

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

await CapacitorCrisp.reset();

Referensi Tipe

ConfigureOptions

Konfigurasi untuk menginisialisasi 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

Warna yang tersedia untuk event Crisp. Digunakan untuk mengelompokkan event secara visual di dashboard Crisp.

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

Sumber Kebenaran

Halaman ini dibuat dari plugin src/definitions.ts. Jalankan ulang sync saat API publik berubah di upstream.

Lanjutkan dari Getting Started

Jika Anda menggunakan Panduan Memulai untuk merencanakan operasi dashboard dan API, hubungkan dengan Menggunakan @capgo/capacitor-crisp untuk kapabilitas native di bagian Menggunakan @capgo/capacitor-crisp, Ringkasan API untuk detail implementasi di API Overview, Pendahuluan untuk detail implementasi di Introduction, Kunci API untuk detail implementasi di API Keys, dan Perangkat untuk detail implementasi di Devices.