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

Intégration du paquet @capgo/capacitor-crisp

Le paquet @capgo/capacitor-crisp vous permet d'intégrer Crisp, un SDK natif, dans votre application Capacitor. Il fournit des méthodes pour configurer Crisp, ouvrir la boîte de discussion, définir les détails de l'utilisateur, envoyer des événements, et plus encore.

Pour commencer avec le paquet @capgo/capacitor-crisp, suivez ces étapes :

Installation

Ouvrez votre terminal et naviguez vers le répertoire racine de votre application Capacitor.
Exécutez la commande suivante pour installer le paquet :

npm install @capgo/capacitor-crisp
npx cap sync

Initialiser Crisp

Avant d'utiliser l'une des méthodes fournies par le paquet @capgo/capacitor-crisp, vous devez configurer Crisp avec votre ID de site web. Ajoutez le code suivant à votre projet :

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

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

Remplacez '******-****-****-****-********' par votre véritable ID de site Crisp.

Intégration iOS

Si vous ciblez iOS, vous devez ajouter les autorisations suivantes au fichier Infoplist de votre application :

Confidentialité - Description de l'utilisation de la caméra (NSCameraUsageDescription)
Confidentialité - Description de l'utilisation des additions à la bibliothèque photos (NSPhotoLibraryAddUsageDescription)

Assurez-vous de fournir une description pour chaque autorisation expliquant pourquoi votre application en a besoin.

Intégration Android

Aucune étape supplémentaire n'est requise pour l'intégration Android.

Ouvrir la boîte de discussion

Pour ouvrir la boîte de discussion Crisp dans votre application, utilisez la méthode openMessenger fournie par le paquet @capgo/capacitor-crisp. Ajoutez le code suivant à votre projet :

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

CapacitorCrisp.openMessenger();

Cela ouvrira la boîte de discussion Crisp pour que les utilisateurs puissent commencer une conversation avec votre équipe de support.

Fonctionnalités supplémentaires

Le paquet @capgo/capacitor-crisp fournit plusieurs autres méthodes pour personnaliser et interagir avec Crisp. Voici quelques-unes des méthodes disponibles :

setTokenID : Définir l'ID du token pour l'utilisateur
setUser : Définir les détails de l'utilisateur tels que le pseudo, le numéro de téléphone, l'email et l'avatar
pushEvent : Envoyer un événement personnalisé à Crisp
setCompany : Définir les détails de l'entreprise, y compris le nom, l'URL, la description, l'emploi et la géolocalisation
setInt : Définir une valeur entière personnalisée
setString : Définir une valeur chaîne personnalisée
sendMessage : Envoyer un message de discussion à Crisp
setSegment : Définir le segment pour l'utilisateur
reset : Réinitialiser la configuration Crisp

Pour plus d'informations sur ces méthodes et leurs paramètres, reportez-vous à la documentation officielle du paquet @capgo/capacitor-crisp.

C'est tout ! Vous avez appris à utiliser le paquet @capgo/capacitor-crisp pour intégrer Crisp dans votre application Capacitor. Profitez d'une communication fluide avec vos utilisateurs via la boîte de discussion Crisp.