Crisp - Atención al cliente en vivo

Crisp

Resumen

Crisp es una plataforma integral de mensajería para clientes: widget de chat en vivo, bandeja compartida, base de conocimientos, chatbot y CRM. El nivel gratuito permite 2 operadores con conversaciones ilimitadas.

Instrucciones

Paso 1: Añadir el widget de chat

<!-- Añade a tu sitio web — instalación básica -->
<script type="text/javascript">
  window.$crisp=[];window.CRISP_WEBSITE_ID="TU_ID_DE_SITIO";
  (function(){d=document;s=d.createElement("script");
  s.src="https://client.crisp.chat/l.js";
  s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
</script>

Paso 2: Integración con React

// components/CrispChat.tsx — Crisp en React/Next.js
'use client'
import { useEffect } from 'react'

export function CrispChat() {
  useEffect(() => {
    window.$crisp = []
    window.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_ID!
    const s = document.createElement('script')
    s.src = 'https://client.crisp.chat/l.js'
    s.async = true
    document.head.appendChild(s)
  }, [])
  return null
}

// Establece datos del usuario cuando inicia sesión
window.$crisp.push(['set', 'user:email', ['[email protected]']])
window.$crisp.push(['set', 'user:nickname', ['John']])
window.$crisp.push(['set', 'session:data', [['plan', 'pro'], ['mrr', '49']]])

Paso 3: Integración con API

// lib/crisp.ts — Enviar mensajes y gestionar conversaciones mediante API
const CRISP_ID = process.env.CRISP_IDENTIFIER!
const CRISP_KEY = process.env.CRISP_KEY!
const WEBSITE_ID = process.env.CRISP_WEBSITE_ID!

// Enviar un mensaje a una conversación
await fetch(`https://api.crisp.chat/v1/website/${WEBSITE_ID}/conversation/${sessionId}/message`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: `Basic ${Buffer.from(`${CRISP_ID}:${CRISP_KEY}`).toString('base64')}`,
  },
  body: JSON.stringify({
    type: 'text',
    from: 'operator',
    origin: 'chat',
    content: '¡Gracias por contactarnos! Permíteme ayudarte.',
  }),
})

Pautas

• Nivel gratuito: 2 operadores, conversaciones ilimitadas, widget de chat, aplicaciones móviles.
• Pro ($25/mes): chatbot, base de conocimientos, llamadas de audio/vídeo, integraciones.
• Usa datos de sesión para pasar contexto del usuario (plan, MRR, última acción) a los agentes de soporte.
• El chatbot de Crisp puede gestionar preguntas frecuentes automáticamente antes de derivar a humanos.