Crisp 客户聊天与支持

Crisp

概述

Crisp 是一个全功能客户消息平台：实时聊天小部件、共享收件箱、知识库、聊天机器人和 CRM。免费版支持 2 名操作员，包含无限对话。

操作说明

第 1 步：添加聊天小部件

<!-- 添加到你的网站 — 基础安装 -->
<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>

第 2 步：React 集成

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

// 用户登录时设置用户数据
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']]])

第 3 步：API 集成

// lib/crisp.ts — 通过 API 发送消息和管理会话
const CRISP_ID = process.env.CRISP_IDENTIFIER!
const CRISP_KEY = process.env.CRISP_KEY!
const WEBSITE_ID = process.env.CRISP_WEBSITE_ID!

// 向会话发送消息
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: '感谢联系！让我来帮助你。',
  }),
})

使用指南

• 免费版：2 名操作员、无限对话、聊天小部件、移动应用。
• Pro 版（$25/月）：聊天机器人、知识库、音频/视频通话、集成。
• 使用会话数据传递用户上下文（计划、MRR、最后操作）给支持人员。
• Crisp 聊天机器人可以在转接人工前自动处理常见问题。