Getting Started

Install

bun add @capgo/capacitor-crisp
bunx cap sync

Import

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

API Overview

configure

Configure the Crisp SDK with your website ID. Must be called before using any other methods.

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

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

openMessenger

Open the Crisp messenger chat window. Shows the chat interface to the user.

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

await CapacitorCrisp.openMessenger();

setTokenID

Set a unique token ID for the current user session. Used to identify and restore previous conversations.

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

await CapacitorCrisp.setTokenID({} as { tokenID: string });

setUser

Set user information for the current session. Updates the user profile visible to support agents.

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

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

pushEvent

Push a custom event to Crisp. Useful for tracking user actions and behavior.

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

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

setCompany

Set company information for the current session. Associates the user with a company in Crisp.

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

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

setInt

Set a custom integer data field. Stores numerical data associated with the user session.

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

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

setString

Set a custom string data field. Stores text data associated with the user session.

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

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

sendMessage

Send a message from the user to the chat. Programmatically send a message as if the user typed it.

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

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

setSegment

Set a user segment for targeting and organization. Used to categorize users in the Crisp dashboard.

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

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

reset

Reset the Crisp session. Clears all user data and starts a fresh session. Useful when user logs out.

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

await CapacitorCrisp.reset();

Type Reference

ConfigureOptions

Configuration for initializing 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

Available colors for Crisp events. Used to visually categorize events in the Crisp dashboard.

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

Source Of Truth

This page is generated from the plugin’s src/definitions.ts. Re-run the sync when the public API changes upstream.