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 — 在 React/Next.js 中使用 Crisp
'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 聊天機器人可自動處理常見問題，再轉接至真人客服。