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 のチャットボットは、人間に引き継ぐ前に FAQ を自動的に処理できます。