Crisp – Chat en direct et support client

Crisp

Aperçu

Crisp est une plateforme de messagerie client tout-en-un : widget de chat en direct, boîte de réception partagée, base de connaissances, chatbot et CRM. Le niveau gratuit prend en charge 2 opérateurs avec des conversations illimitées.

Instructions

Étape 1 : Ajouter le widget de chat

<!-- Ajoutez à votre site web — installation de base -->
<script type="text/javascript">
  window.$crisp=[];window.CRISP_WEBSITE_ID="YOUR_WEBSITE_ID";
  (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>

Étape 2 : Intégration React

// components/CrispChat.tsx — Crisp dans 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
}

// Définir les données utilisateur lors de la connexion
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']]])

Étape 3 : Intégration API

// lib/crisp.ts — Envoyer des messages et gérer les conversations via l'API
const CRISP_ID = process.env.CRISP_IDENTIFIER!
const CRISP_KEY = process.env.CRISP_KEY!
const WEBSITE_ID = process.env.CRISP_WEBSITE_ID!

// Envoyer un message à une conversation
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: 'Merci de nous contacter ! Laissez-moi vous aider.',
  }),
})

Directives

• Niveau gratuit : 2 opérateurs, conversations illimitées, widget de chat, applications mobiles.
• Pro (25 $/mois) : chatbot, base de connaissances, appels audio/vidéo, intégrations.
• Utilisez les données de session pour transmettre le contexte utilisateur (plan, MRR, dernière action) aux agents de support.
• Le chatbot Crisp peut traiter automatiquement les FAQ avant de rediriger vers des humains.