Commencer

1. Installez le package

   npm

   npm i @capgo/capacitor-crisp

   pnpm

   pnpm add @capgo/capacitor-crisp

   yarn

   yarn add @capgo/capacitor-crisp

   bun

   bun add @capgo/capacitor-crisp

2. Synchronisation avec les projets natifs

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Obtenez votre identifiant de site Web Crisp

   • Inscrivez-vous sur crisp.chat
   • Créer un site/projet
   • Trouvez l’identifiant de votre site Web dans Paramètres > Instructions de configuration

Utilisation de base

Importez le plugin et configurez-le avec votre identifiant de site Web :

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

// Configure Crisp with your website ID
const configureCrisp = async () => {
  await CapacitorCrisp.configure({
    websiteID: 'YOUR_WEBSITE_ID'
  });
};

// Open the chat
const openChat = async () => {
  await CapacitorCrisp.openMessenger();
};

// Set user information
const setUserInfo = async () => {
  await CapacitorCrisp.setUser({
    email: 'user@example.com',
    nickname: 'John Doe',
    phone: '+1234567890',
    avatar: 'https://example.com/avatar.jpg'
  });
};

// Reset user session (logout)
const logout = async () => {
  await CapacitorCrisp.resetChatSession();
};

API Référence

configurer (options)

Configurez Crisp avec l’identifiant de votre site Web et les paramètres facultatifs.

interface ConfigureOptions {
  websiteID: string;
  locale?: string; // e.g., 'en', 'fr', 'es'
  tokenID?: string; // For authenticated sessions
}

await CapacitorCrisp.configure({
  websiteID: 'YOUR_WEBSITE_ID',
  locale: 'en'
});

ouvrirMessenger()

Ouvre l’interface de discussion Crisp.

await CapacitorCrisp.openMessenger();

setUser (options)

Définit les informations utilisateur pour la session de discussion.

interface UserOptions {
  email?: string;
  nickname?: string;
  phone?: string;
  avatar?: string;
}

await CapacitorCrisp.setUser({
  email: 'user@example.com',
  nickname: 'John Doe'
});

setUserCompany(options)

Définit les informations sur l’entreprise pour les utilisateurs professionnels.

interface CompanyOptions {
  name: string;
  url?: string;
  description?: string;
  employment?: {
    title?: string;
    role?: string;
  };
  geolocation?: {
    city?: string;
    country?: string;
  };
}

await CapacitorCrisp.setUserCompany({
  name: 'Acme Corp',
  url: 'https://acme.com',
  employment: {
    title: 'CEO',
    role: 'Leadership'
  }
});

pushEvent(options)

Envoyez des événements personnalisés pour suivre les actions des utilisateurs.

interface EventOptions {
  name: string;
  color?: 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'brown' | 'grey' | 'black';
  data?: { [key: string]: any };
}

await CapacitorCrisp.pushEvent({
  name: 'checkout_completed',
  color: 'green',
  data: {
    price: 99.99,
    currency: 'USD'
  }
});

setSessionSegment(segment)

Définissez un segment pour catégoriser la session de discussion.

await CapacitorCrisp.setSessionSegment('premium_customer');

réinitialiserChatSession()

Réinitialisez la session de chat en cours (utile pour vous déconnecter).

await CapacitorCrisp.resetChatSession();

Fonctionnalités avancées

Données utilisateur personnalisées

// Set multiple custom data fields
await CapacitorCrisp.setSessionData({
  key: 'plan',
  value: 'premium'
});

await CapacitorCrisp.setSessionData({
  key: 'signup_date',
  value: '2024-01-15'
});

Message prédéfini

Définissez un message pré-rempli dans la saisie du chat :

await CapacitorCrisp.setMessageText(
  "Hello, I need help with my order #12345"
);

Disponibilité du chat

Contrôlez quand le widget de chat est disponible :

// Hide chat temporarily
await CapacitorCrisp.setTokenID('user_token_12345');

Exemple complet

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

export class ChatService {
  async initialize() {
    // Configure Crisp
    await CapacitorCrisp.configure({
      websiteID: 'YOUR_WEBSITE_ID',
      locale: 'en'
    });
  }

  async loginUser(user: any) {
    // Set user information
    await CapacitorCrisp.setUser({
      email: user.email,
      nickname: user.name,
      phone: user.phone,
      avatar: user.avatarUrl
    });

    // Set custom data
    await CapacitorCrisp.setSessionData({
      key: 'user_id',
      value: user.id
    });

    await CapacitorCrisp.setSessionData({
      key: 'account_type',
      value: user.accountType
    });

    // Set segment
    if (user.isPremium) {
      await CapacitorCrisp.setSessionSegment('premium');
    }

    // Track login event
    await CapacitorCrisp.pushEvent({
      name: 'user_login',
      color: 'blue',
      data: {
        method: 'email'
      }
    });
  }

  async openSupport(context?: string) {
    if (context) {
      await CapacitorCrisp.setMessageText(
        `I need help with: ${context}`
      );
    }

    await CapacitorCrisp.openMessenger();
  }

  async logout() {
    await CapacitorCrisp.resetChatSession();
  }
}

Style et personnalisation

Crisp s’adapte automatiquement au thème de votre application, mais vous pouvez le personnaliser davantage via le tableau de bord Crisp :

1. Accédez à votre tableau de bord Crisp
2. Accédez à Paramètres > Paramètres du site Web > Paramètres de chatbox et de messagerie.
3. Personnalisez les couleurs, la position et le comportement

## meilleures pratiques

1. Initialiser tôt Configurez Crisp lors de l’initialisation de l’application pour une disponibilité immédiate :

   import { App } from '@capacitor/app';
   
   App.addListener('appStateChange', async ({ isActive }) => {
     if (isActive) {
       await CapacitorCrisp.configure({
         websiteID: 'YOUR_WEBSITE_ID'
       });
     }
   });

2. Définir le contexte utilisateur Fournissez toujours les informations utilisateur lorsqu’elles sont disponibles pour une meilleure assistance :

   if (user.isAuthenticated) {
     await CapacitorCrisp.setUser({
       email: user.email,
       nickname: user.name
     });
   }

3. Suivez les événements importants Utilisez des événements pour fournir du contexte aux agents d’assistance :

   await CapacitorCrisp.pushEvent({
     name: 'error_occurred',
     color: 'red',
     data: {
       error: error.message,
       screen: 'checkout'
     }
   });

4. Gérer correctement la déconnexion Réinitialisez toujours la session lorsque les utilisateurs se déconnectent :

   async logout() {
     await CapacitorCrisp.resetChatSession();
     // Your other logout logic
   }

## Remarques sur la plate-forme

iOS

• Nécessite iOS 10.0+
• Utilise Crisp natif iOS SDK
• Prend en charge les notifications push (configurer dans le tableau de bord Crisp)

Android

• Nécessite Android 5.0 (API 21)+
• Utilise Crisp natif Android SDK
• Conforme à la conception matérielle

###Web

• Revient à Crisp JavaScript SDK
• Parité complète des fonctionnalités avec les plateformes natives