시작하기

위젯 설치

스크립트 한 줄로 어떤 웹사이트에도 채팅 위젯을 넣을 수 있습니다. React·Vue·Next.js 같은 SPA 에서도 페이지 이동을 자동으로 추적합니다.

#설치 코드

대시보드 → 프로젝트 → 설치 코드 탭에서 프로젝트 ID 가 들어간 코드를 복사해 모든 페이지의 </body> 앞에 넣습니다. 공통 레이아웃(헤더/푸터 템플릿)에 한 번만 넣으면 됩니다.

프로젝트 설정의 허용 도메인에 사이트 도메인을 등록하면 다른 사이트에서 위젯을 무단으로 쓰는 것을 막을 수 있습니다. 비워 두면 모든 도메인에서 동작합니다.

<script src="https://app.cliptalk.net/widget/{PROJECT_ID}" async></script>

#로그인 회원 연동

로그인한 회원 정보를 넘기면 고객이 이름·이메일을 다시 입력하지 않아도 되고, 상담원 콘솔과 AI 상담봇이 누구와 대화 중인지 알 수 있습니다.

스크립트보다 먼저 window.CliptalkSettings 를 정의하거나, 로그인 이후 Cliptalk.identify() 를 호출합니다.

필드	설명
`id`	회원 ID (사이트 내부 식별자)
`name`	이름
`email`	이메일
`phone`	휴대폰 번호
`hash`	(선택) 서버에서 만든 서명값. 커넥터의 무인증 본인확인에 사용

비밀번호·주민번호·카드번호 같은 민감정보는 절대 넘기지 마세요.

<script>
  window.CliptalkSettings = {
    user: {
      id: 'user_1001',
      name: '김클립',
      email: 'clip@example.com',
      phone: '010-1234-5678'
    },
    locale: 'ko'   // 선택: ko | en | ja | zh-TW | zh-CN
  };
</script>
<script src="https://app.cliptalk.net/widget/{PROJECT_ID}" async></script>

#언어

위젯 언어(와 AI 상담봇의 인사말·안내 문구)는 다음 순서로 정해집니다.

CliptalkSettings.locale
페이지의 <html lang="…">
URL 첫 경로(/en, /jp, /tw …)
브라우저 언어

다국어 사이트에서 언어 전환 버튼을 누를 때 Cliptalk.setLocale('en') 을 호출하면 위젯도 즉시 바뀝니다.

document.querySelector('#lang-en').onclick = () => {
  window.Cliptalk.setLocale('en');
};

#페이지 정보

위젯은 고객이 보고 있는 페이지의 URL 과 제목을 자동으로 전달합니다. 상담원은 콘솔에서 고객이 어느 페이지에 있는지 보고, AI 상담봇은 "이 상품 재고 있어요?" 같은 질문을 현재 페이지 기준으로 답합니다. 별도 설정은 필요 없습니다.