capacitor-crisp

Why Capacitor Crisp?

The only free Capacitor plugin for integrating Crisp.chat's native SDK into your mobile apps. Crisp is a powerful customer support and messaging platform, and this plugin provides:

• Native SDK integration - Full access to Crisp's native mobile SDKs for iOS and Android
• Rich messaging features - Live chat, user profiles, custom data, events, and segmentation
• Two-way communication - Send messages programmatically and track user behavior
• Complete API - Full feature parity with Crisp's JavaScript API

Perfect for apps needing customer support, helpdesk functionality, or user engagement tools.

Documentation

The most complete doc is available here: https://capgo.app/docs/plugins/crisp/

Install

npm install @capgo/capacitor-crisp
npx cap sync

Init

Call configure in your code Before any other method :

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

CapacitorCrisp.configure({websiteID: '******-****-****-****-********'})

iOS

To enable your users to take and upload photos to the chat as well as download photos to their photo library, add :

Privacy - Camera Usage Description (NSCameraUsageDescription)

Privacy - Photo Library Additions Usage Description (NSPhotoLibraryAddUsageDescription)

to your app's Info.plist.

Android Integration

Nothing special to do.

Open chatbox

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

CapacitorCrisp.openMessenger()

API

• configure(...)
• openMessenger()
• setTokenID(...)
• setUser(...)
• pushEvent(...)
• setCompany(...)
• setInt(...)
• setString(...)
• sendMessage(...)
• setSegment(...)
• reset()
• getPluginVersion()
• Type Aliases

Crisp Chat SDK Plugin for Capacitor. Provides live chat and customer support functionality through Crisp.chat.

configure(...)

configure(data: { websiteID: string; }) => Promise<void>

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

| Param | Type | Description | | ---------- | ----------------------------------- | ---------------------- | | data | { websiteID: string; } | - Configuration object |

openMessenger()

openMessenger() => Promise<void>

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

setTokenID(...)

setTokenID(data: { tokenID: string; }) => Promise<void>

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

| Param | Type | Description | | ---------- | --------------------------------- | ------------------- | | data | { tokenID: string; } | - Token data object |

setUser(...)

setUser(data: { nickname?: string; phone?: string; email?: string; avatar?: string; }) => Promise<void>

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

| Param | Type | Description | | ---------- | ------------------------------------------------------------------------------------ | ------------------------- | | data | { nickname?: string; phone?: string; email?: string; avatar?: string; } | - User information object |

pushEvent(...)

pushEvent(data: { name: string; color: eventColor; }) => Promise<void>

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

| Param | Type | Description | | ---------- | --------------------------------------------------------------------------- | ------------------- | | data | { name: string; color: eventColor; } | - Event data object |

setCompany(...)

setCompany(data: { name: string; url?: string; description?: string; employment?: [title: string, role: string]; geolocation?: [country: string, city: string]; }) => Promise<void>

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

| Param | Type | Description | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | | data | { name: string; url?: string; description?: string; employment?: [title: string, role: string]; geolocation?: [country: string, city: string]; } | - Company information object |

setInt(...)

setInt(data: { key: string; value: number; }) => Promise<void>

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

| Param | Type | Description | | ---------- | -------------------------------------------- | --------------------- | | data | { key: string; value: number; } | - Integer data object |

setString(...)

setString(data: { key: string; value: string; }) => Promise<void>

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

| Param | Type | Description | | ---------- | -------------------------------------------- | -------------------- | | data | { key: string; value: string; } | - String data object |

sendMessage(...)

sendMessage(data: { value: string; }) => Promise<void>

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

| Param | Type | Description | | ---------- | ------------------------------- | --------------------- | | data | { value: string; } | - Message data object |

setSegment(...)

setSegment(data: { segment: string; }) => Promise<void>

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

| Param | Type | Description | | ---------- | --------------------------------- | --------------------- | | data | { segment: string; } | - Segment data object |

reset()

reset() => Promise<void>

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

getPluginVersion()

getPluginVersion() => Promise<{ version: string; }>

Get the plugin version number.

Returns: Promise<{ version: string; }>

Type Aliases

eventColor

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

'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'brown' | 'grey' | 'black'