capacitor-crisp

➡️ Get Instant updates for your App with Capgo 🚀

Fix your annoying bug now, Hire a Capacitor expert 💪

Crisp native SDK for capacitor

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

configure(...)

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

Param	Type
`data`	`{ websiteID: string; }`

openMessenger()

openMessenger() => Promise<void>

setTokenID(...)

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

Param	Type
`data`	`{ tokenID: string; }`

setUser(...)

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

Param	Type
`data`	`{ nickname?: string; phone?: string; email?: string; avatar?: string; }`

pushEvent(...)

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

Param	Type
`data`	`{ name: string; color: eventColor; }`

setCompany(...)

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

Param	Type
`data`	`{ name: string; url?: string; description?: string; employment?: [title: string, role: string]; geolocation?: [country: string, city: string]; }`

setInt(...)

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

Param	Type
`data`	`{ key: string; value: number; }`

setString(...)

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

Param	Type
`data`	`{ key: string; value: string; }`

sendMessage(...)

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

Param	Type
`data`	`{ value: string; }`

setSegment(...)

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

Param	Type
`data`	`{ segment: string; }`

reset()

reset() => Promise<void>

Type Aliases

eventColor

Using @capgo/capacitor-crisp Package

The @capgo/capacitor-crisp package allows you to integrate Crisp, a native SDK, into your Capacitor app. It provides methods for configuring Crisp, opening the chatbox, setting user details, sending events, and more.

To get started with the @capgo/capacitor-crisp package, follow these steps:

Installation

Open your terminal and navigate to your Capacitor app's root directory.
Run the following command to install the package:

npm install @capgo/capacitor-crisp
npx cap sync

Initialize Crisp

Before using any of the methods provided by the @capgo/capacitor-crisp package, you need to configure Crisp with your website ID. Add the following code to your project:

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

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

Replace '******-****-****-****-********' with your actual Crisp website ID.

iOS Integration

If you're targeting iOS, you need to add the following permissions to your app's Info.plist file:

Privacy - Camera Usage Description (NSCameraUsageDescription)
Privacy - Photo Library Additions Usage Description (NSPhotoLibraryAddUsageDescription)

Make sure to provide a description for each permission explaining why your app needs it.

Android Integration

There are no additional steps required for Android integration.

Open the Chatbox

To open the Crisp chatbox in your app, use the openMessenger method provided by the @capgo/capacitor-crisp package. Add the following code to your project:

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

CapacitorCrisp.openMessenger();

This will open the Crisp chatbox for users to start a conversation with your support team.

Additional Functionality

The @capgo/capacitor-crisp package provides several other methods for customizing and interacting with Crisp. Here are some of the available methods:

setTokenID: Set the token ID for the user.
setUser: Set the user's details such as nickname, phone number, email, and avatar.
pushEvent: Send a custom event to Crisp.
setCompany: Set the company details including name, URL, description, employment, and geolocation.
setInt: Set a custom integer value.
setString: Set a custom string value.
sendMessage: Send a chat message to Crisp.
setSegment: Set the segment for the user.
reset: Reset the Crisp configuration.

For more information on these methods and their parameters, refer to the official documentation of the @capgo/capacitor-crisp package.

That's it! You've learned how to use the @capgo/capacitor-crisp package to integrate Crisp into your Capacitor app. Enjoy seamless communication with your users through the Crisp chatbox.