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를 자동으로 처리할 수 있습니다.