Getting Started

Copy a setup prompt with the install steps and the full markdown guide for this plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-crisp`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/crisp/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

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.

Keep going from Getting Started

If you are using Getting Started to plan dashboard and API operations, connect it with Using @capgo/capacitor-crisp for the native capability in Using @capgo/capacitor-crisp, API Overview for the implementation detail in API Overview, Introduction for the implementation detail in Introduction, API Keys for the implementation detail in API Keys, and Devices for the implementation detail in Devices.