Comenzando

1. Instalar el paquete

   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. Sincronizar con proyectos nativos

   npm

   npx cap sync

   pnpm

   pnpm cap sync

   yarn

   yarn cap sync

   bun

   bunx cap sync

3. Obtener tu ID de sitio web de Crisp

   • Regístrate en crisp.chat
   • Crea un sitio web/proyecto
   • Encuentra tu ID de sitio web en Configuración > Instrucciones de configuración

Uso básico

Importa el Plugin y configúralo con tu ID de sitio web:

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

// Configurar Crisp con tu ID de sitio web
const configureCrisp = async () => {
  await CapacitorCrisp.configure({
    websiteID: 'YOUR_WEBSITE_ID'
  });
};

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

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

// Restablecer sesión de usuario (cerrar sesión)
const logout = async () => {
  await CapacitorCrisp.resetChatSession();
};

Referencia de API

Configurar(Opciones)

Configura Crisp con tu ID de sitio web y ajustes opcionales.

interface ConfigureOptions {
  websiteID: string;
  locale?: string; // ej., 'en', 'fr', 'es'
  tokenID?: string; // Para sesiones autenticadas
}

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

openMessenger()

Abre la interfaz de chat de Crisp.

await CapacitorCrisp.openMessenger();

setUser(Opciones)

Establece la información del usuario para la sesión de chat.

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

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

setUserCompany(Opciones)

Establece información de la empresa para usuarios empresariales.

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

Envía eventos personalizados para rastrear acciones del usuario.

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)

Establece un segmento para categorizar la sesión de chat.

await CapacitorCrisp.setSessionSegment('premium_customer');

resetChatSession()

Restablece la sesión de chat actual (útil para cerrar sesión).

await CapacitorCrisp.resetChatSession();

Funciones avanzadas

Datos personalizados del usuario

// Establecer múltiples campos de datos personalizados
await CapacitorCrisp.setSessionData({
  key: 'plan',
  value: 'premium'
});

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

Mensaje predeterminado

Establece un mensaje prellenado en la entrada del chat:

await CapacitorCrisp.setMessageText(
  "Hola, necesito ayuda con mi pedido #12345"
);

Disponibilidad del chat

Controla cuándo el widget de chat está disponible:

// Ocultar chat temporalmente
await CapacitorCrisp.setTokenID('user_token_12345');

Ejemplo completo

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

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

  async loginUser(user: any) {
    // Establecer información del usuario
    await CapacitorCrisp.setUser({
      email: user.email,
      nickname: user.name,
      phone: user.phone,
      avatar: user.avatarUrl
    });

    // Establecer datos personalizados
    await CapacitorCrisp.setSessionData({
      key: 'user_id',
      value: user.id
    });

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

    // Establecer segmento
    if (user.isPremium) {
      await CapacitorCrisp.setSessionSegment('premium');
    }

    // Rastrear evento de inicio de sesión
    await CapacitorCrisp.pushEvent({
      name: 'user_login',
      color: 'blue',
      data: {
        method: 'email'
      }
    });
  }

  async openSupport(context?: string) {
    if (context) {
      await CapacitorCrisp.setMessageText(
        `Necesito ayuda con: ${context}`
      );
    }

    await CapacitorCrisp.openMessenger();
  }

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

Estilo y personalización

Crisp se adapta automáticamente al tema de tu aplicación, pero puedes personalizarlo aún más a través del panel de Crisp:

1. Ve a tu panel de Crisp
2. Navega a Configuración > Configuración del sitio web > Configuración de Chatbox y Email
3. Personaliza colores, posición y comportamiento

Mejores prácticas

1. Inicializar temprano Configura Crisp durante la inicialización de la aplicación para disponibilidad inmediata:

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

2. Establecer contexto del usuario Siempre proporciona información del usuario cuando esté disponible para un mejor soporte:

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

3. Rastrear eventos importantes Usa eventos para proporcionar contexto a los agentes de soporte:

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

4. Manejar el cierre de sesión correctamente Siempre restablece la sesión cuando los usuarios cierran sesión:

   async logout() {
     await CapacitorCrisp.resetChatSession();
     // Tu otra lógica de cierre de sesión
   }

Notas de plataforma

iOS

• Requiere iOS 10.0+
• Usa SDK nativo de Crisp para iOS
• Soporta notificaciones push (configurar en el panel de Crisp)

Android

• Requiere Android 5.0 (API 21)+
• Usa SDK nativo de Crisp para Android
• Cumple con Material Design

Web

• Recurre al SDK JavaScript de Crisp
• Paridad completa de funciones con plataformas nativas