npm install @capgo/capacitor-crisp
npx cap sync
Call configure in your code Before any other method :
import { CapacitorCrisp } from '@capgo/capacitor-crisp';
CapacitorCrisp.configure({websiteID: '******-****-****-****-********'})
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.
Nothing special to do.
import { CapacitorCrisp } from '@capgo/capacitor-crisp';
CapacitorCrisp.openMessenger()
configure(data: { websiteID: string; }) => Promise<void>
Param | Type |
---|---|
data |
{ websiteID: string; } |
openMessenger() => Promise<void>
setTokenID(data: { tokenID: string; }) => Promise<void>
Param | Type |
---|---|
data |
{ tokenID: string; } |
setUser(data: { nickname?: string; phone?: string; email?: string; avatar?: string; }) => Promise<void>
Param | Type |
---|---|
data |
{ nickname?: string; phone?: string; email?: string; avatar?: string; } |
pushEvent(data: { name: string; color: eventColor; }) => Promise<void>
Param | Type |
---|---|
data |
{ name: string; color: eventColor; } |
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(data: { key: string; value: number; }) => Promise<void>
Param | Type |
---|---|
data |
{ key: string; value: number; } |
setString(data: { key: string; value: string; }) => Promise<void>
Param | Type |
---|---|
data |
{ key: string; value: string; } |
sendMessage(data: { value: string; }) => Promise<void>
Param | Type |
---|---|
data |
{ value: string; } |
setSegment(data: { segment: string; }) => Promise<void>
Param | Type |
---|---|
data |
{ segment: string; } |
reset() => Promise<void>
"red" | "orange" | "yellow" | "green" | "blue" | "purple" | "pink" | "brown" | "grey" | "black"
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 :
npm install @capgo/capacitor-crisp
npx cap sync
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.
Si vous ciblez iOS, vous devez ajouter les autorisations suivantes au fichier Infoplist de votre application :
Assurez-vous de fournir une description pour chaque autorisation expliquant pourquoi votre application en a besoin.
Aucune étape supplémentaire n'est requise pour l'intégration Android.
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.
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'utilisateursetUser
: Définir les détails de l'utilisateur tels que le pseudo, le numéro de téléphone, l'email et l'avatarpushEvent
: Envoyer un événement personnalisé à CrispsetCompany
: Définir les détails de l'entreprise, y compris le nom, l'URL, la description, l'emploi et la géolocalisationsetInt
: Définir une valeur entière personnaliséesetString
: Définir une valeur chaîne personnaliséesendMessage
: Envoyer un message de discussion à CrispsetSegment
: Définir le segment pour l'utilisateurreset
: Réinitialiser la configuration CrispPour 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.