https://github.com/cap-go/capacitor-crisp
Crisp native SDK for capacitor
https://github.com/cap-go/capacitor-crisp
android capacitor capacitor-plugin crisp ionic ios
Last synced: about 2 months ago
JSON representation
Crisp native SDK for capacitor
- Host: GitHub
- URL: https://github.com/cap-go/capacitor-crisp
- Owner: Cap-go
- Created: 2021-11-20T00:08:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-01T15:45:30.000Z (about 1 year ago)
- Last Synced: 2025-04-02T17:54:05.309Z (about 1 year ago)
- Topics: android, capacitor, capacitor-plugin, crisp, ionic, ios
- Language: Swift
- Homepage: https://www.npmjs.com/package/capacitor-crisp
- Size: 968 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# capacitor-crisp
Crisp native SDK for capacitor
## 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/
## Compatibility
| Plugin version | Capacitor compatibility | Maintained |
| -------------- | ----------------------- | ---------- |
| v8.\*.\* | v8.\*.\* | ✅ |
| v7.\*.\* | v7.\*.\* | On demand |
| v6.\*.\* | v6.\*.\* | ❌ |
| v5.\*.\* | v5.\*.\* | ❌ |
> **Note:** The major version of this plugin follows the major version of Capacitor. Use the version that matches your Capacitor installation (e.g., plugin v8 for Capacitor 8). Only the latest major version is actively maintained.
## Install
```bash
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(...)`](#configure)
* [`openMessenger()`](#openmessenger)
* [`setTokenID(...)`](#settokenid)
* [`setUser(...)`](#setuser)
* [`pushEvent(...)`](#pushevent)
* [`setCompany(...)`](#setcompany)
* [`setInt(...)`](#setint)
* [`setString(...)`](#setstring)
* [`sendMessage(...)`](#sendmessage)
* [`setSegment(...)`](#setsegment)
* [`reset()`](#reset)
* [`getPluginVersion()`](#getpluginversion)
* [Interfaces](#interfaces)
* [Type Aliases](#type-aliases)
Crisp Chat SDK Plugin for Capacitor.
Provides live chat and customer support functionality through Crisp.chat.
### configure(...)
```typescript
configure(data: ConfigureOptions) => Promise
```
Configure the Crisp SDK with your website ID.
Must be called before using any other methods.
| Param | Type | Description |
| ---------- | ------------------------------------------------------------- | ---------------------- |
| **`data`** | ConfigureOptions | - Configuration object |
--------------------
### openMessenger()
```typescript
openMessenger() => Promise
```
Open the Crisp messenger chat window.
Shows the chat interface to the user.
--------------------
### setTokenID(...)
```typescript
setTokenID(data: { tokenID: string; }) => Promise
```
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(...)
```typescript
setUser(data: { nickname?: string; phone?: string; email?: string; avatar?: string; }) => Promise
```
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(...)
```typescript
pushEvent(data: { name: string; color: eventColor; }) => Promise
```
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(...)
```typescript
setCompany(data: { name: string; url?: string; description?: string; employment?: [title: string, role: string]; geolocation?: [country: string, city: string]; }) => Promise
```
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(...)
```typescript
setInt(data: { key: string; value: number; }) => Promise
```
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(...)
```typescript
setString(data: { key: string; value: string; }) => Promise
```
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(...)
```typescript
sendMessage(data: { value: string; }) => Promise
```
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(...)
```typescript
setSegment(data: { segment: string; }) => Promise
```
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()
```typescript
reset() => Promise
```
Reset the Crisp session.
Clears all user data and starts a fresh session.
Useful when user logs out.
--------------------
### getPluginVersion()
```typescript
getPluginVersion() => Promise<{ version: string; }>
```
Get the plugin version number.
**Returns:** Promise<{ version: string; }>
--------------------
### Interfaces
#### ConfigureOptions
Configuration for initializing Crisp.
| Prop | Type | Description |
| --------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`websiteID`** | string | Your Crisp website ID from dashboard. |
| **`locale`** | 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. |
| **`tokenID`** | string | Optional - Unique token identifier for the user session continuity. |
### 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'