Erste Schritte

Installieren

Du kannst unser KI-gestütztes Setup nutzen, um das Plugin zu installieren. Füge die Capgo Skills mit dem folgenden Befehl deinem KI-Tool hinzu:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Nutze dann diesen Prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-crisp` plugin in my project.

Wenn du ein manuelles Setup bevorzugst, installiere das Plugin mit den folgenden Befehlen und befolge die plattformspezifischen Anweisungen unten:

bun add @capgo/capacitor-crisp
bunx cap sync

Importieren

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

Quickstart

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

await CapacitorCrisp.configure({ websiteID: 'your-website-id' });
await CapacitorCrisp.setUser({ nickname: 'Ada', email: 'ada@example.com' });
await CapacitorCrisp.openMessenger();

Beispiel: Push-Token

await CapacitorCrisp.registerPushToken({ token: apnsOrFcmToken });

Häufige Stolperfallen

• Einmal konfigurieren: aufrufen configure() bevor der Messenger geöffnet wird.
• Reset beim Logout: reset() löscht die Crisp-Session.
• Web: Push-Helper sind nur für Mobile verfügbar.

API Übersicht

configure

Konfiguriere das Crisp SDK mit deiner Website-ID. Muss vor allen anderen Methoden aufgerufen werden.

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

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

openMessenger

Öffnet das Crisp Messenger-Chatfenster. Zeigt dem Nutzer die Chat-Oberfläche an.

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

await CapacitorCrisp.openMessenger();

setTokenID

Setzt eine eindeutige Token-ID für die aktuelle Benutzersitzung. Wird verwendet, um frühere Chats zu identifizieren und wiederherzustellen.

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

await CapacitorCrisp.setTokenID({ tokenID: 'token-id-123' });

setUser

Setzt Benutzerinformationen für die aktuelle Sitzung. Aktualisiert das Benutzerprofil, das für Support-Mitarbeiter sichtbar ist.

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

await CapacitorCrisp.setUser({
  nickname: 'John Doe',
  email: 'john@example.com',
  phone: '+1234567890'
});

pushEvent

Sendet ein benutzerdefiniertes Event an Crisp. Nützlich, um Benutzeraktionen und das Verhalten zu tracken.

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

await CapacitorCrisp.pushEvent({
  name: 'completed_purchase',
  color: 'green'
});

setCompany

Setzt Unternehmensinformationen für die aktuelle Sitzung. Verknüpft den Benutzer mit einem Unternehmen in Crisp.

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

await CapacitorCrisp.setCompany({
  name: 'Acme Corp',
  url: 'https://acme.com',
  employment: ['CEO', 'Executive'],
  geolocation: ['USA', 'San Francisco']
});

setInt

Ein benutzerdefiniertes Integer-Datenfeld festlegen. Speichert numerische Daten, die mit der Benutzersitzung verknüpft sind.

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

await CapacitorCrisp.setInt({ key: 'user_level', value: 42 });

setString

Ein benutzerdefiniertes String-Datenfeld festlegen. Speichert Textdaten, die mit der Benutzersitzung verknüpft sind.

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

await CapacitorCrisp.setString({ key: 'subscription_tier', value: 'premium' });

sendMessage

Eine Nachricht vom User an den Chat senden. Sendet programmatisch eine Nachricht, als hätte der User sie getippt.

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

await CapacitorCrisp.sendMessage({ value: 'Hello, I need help!' });

setSegment

Ein User-Segment für Targeting und Organisation setzen. Dient zur Kategorisierung von Usern im Crisp Dashboard.

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

await CapacitorCrisp.setSegment({ segment: 'premium-users' });

reset

Crisp-Session zurücksetzen. Löscht alle Nutzerdaten und startet eine neue Session. Nützlich beim Logout des Nutzers.

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

await CapacitorCrisp.reset();

Typreferenz

ConfigureOptions

Konfiguration zur Initialisierung von Crisp.

export interface ConfigureOptions {
  /**
   * Your Crisp website ID from dashboard.
   */
  websiteID: 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.
   */
  locale?: string;
  /**
   * Optional - Unique token identifier for the user session continuity.
   */
  tokenID?: string;
}

eventColor

Verfügbare Farben für Crisp-Events. Dienen der visuellen Kategorisierung von Events im Crisp-Dashboard.

export type eventColor =
  | 'red'
  | 'orange'
  | 'yellow'
  | 'green'
  | 'blue'
  | 'purple'
  | 'pink'
  | 'brown'
  | 'grey'
  | 'black';

Source of Truth

Diese Seite wird aus dem Plugin generiert src/definitions.ts. Führe den Sync erneut aus, wenn sich das öffentliche API upstream ändert.

Weiter geht's nach Getting Started

Wenn du es nutzt Erste Schritte um Dashboard- und API-Operationen zu planen, verbinde es mit @capgo/capacitor-crisp verwenden für die native Funktion in „@capgo/capacitor-crisp verwenden“, API Übersicht für Details zur Implementierung im API Overview, Einführung für die Implementierungsdetails in der Einleitung, API Schlüssel für das Implementierungsdetail in API Keys und Geräte für das Implementierungsdetail in Devices.