Primeros pasos

Instalar

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

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

Luego usa el siguiente prompt:

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

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

bun add @capgo/capacitor-crisp
bunx cap sync

Importar

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

Inicio rápido

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

Ejemplo: push token

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

Errores comunes

• Configuración única: llama a configure() antes de abrir el messenger.
• Resetear al cerrar sesión: reset() limpia la sesión de Crisp.
• Web: los push helpers son solo para móviles.

Resumen de API

configure

Configura el SDK de Crisp con tu ID de sitio web. Debes llamarlo antes de usar cualquier otro método.

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

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

openMessenger

Abre la ventana de chat de Crisp. Muestra la interfaz de chat al usuario.

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

await CapacitorCrisp.openMessenger();

setTokenID

Establece un token ID único para la sesión actual. Se usa para identificar y restaurar conversaciones previas.

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

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

setUser

Configura la información del usuario para la sesión actual. Actualiza el perfil de usuario que ven los agentes de soporte.

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

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

pushEvent

Envía un evento personalizado a Crisp. Útil para trackear acciones y el comportamiento del usuario.

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

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

setCompany

Configura la información de la empresa para la sesión actual. Asocia al usuario con una empresa en 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

Establece un campo de datos de tipo entero. Almacena datos numéricos asociados a la sesión del usuario.

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

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

setString

Establece un campo de datos de tipo string. Almacena datos de texto asociados a la sesión del usuario.

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

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

sendMessage

Envía un mensaje del usuario al chat. Envía un mensaje programáticamente como si el usuario lo hubiera escrito.

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

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

setSegment

Establece un segmento de usuario para segmentación y organización. Se usa para categorizar usuarios en el dashboard de Crisp.

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

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

reset

Reinicia la sesión de Crisp. Borra todos los datos del usuario e inicia una sesión nueva. Útil cuando el usuario cierra sesión.

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

await CapacitorCrisp.reset();

Referencia de tipos

ConfigureOptions

Configuración para inicializar 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

Colores disponibles para los eventos de Crisp. Se usan para categorizar visualmente los eventos en el dashboard de Crisp.

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

Fuente de verdad

Esta página se genera a partir del plugin src/definitions.ts. Vuelve a ejecutar el sync cuando el API público cambie en upstream.

Continúa desde Getting Started

Si estás usando Primeros pasos para planificar las operaciones del dashboard y de API, conéctalo con Usando @capgo/capacitor-crisp para la capacidad nativa en Uso de @capgo/capacitor-crisp, Resumen de API para los detalles de implementación en API Overview, Introducción para los detalles de implementación en la Introducción, Claves de API para los detalles de implementación en las claves de API, y Dispositivos para el detalle de implementación en Devices.