해피톡 웹채팅창을 사용하기 위한 안내서입니다.
Installation
최신 해피톡 Javascript Chat SDK를 사용하기 위해서는 head 혹은 body 태그 안에 아래 스크립트 코드를 삽입해 주세요.
<script id="happytalkSDK" src="https://chat-static.happytalkio.com/sdk/happytalk.chat.v2.min.js"></script>
HTML
복사
Initialize Happytalk Chat SDK
해피톡 대시보드에서 생성된 SITE_ID, SITE_NAME, CATEGORY_ID, DIVISION_ID 를 아래 예시처럼 삽입해 주세요.
// Initialize happytalk instance to use SDK in your app
var ht = new Happytalk({
siteId: SITE_ID,
siteName: SITE_NAME,
categoryId: CATEGORY_ID,
divisionId: DIVISION_ID,
});
JavaScript
복사
Key | Type | Condition | Reference |
siteId | string | Required | App ID, 설정 - 회사 정보 관리 - 시스템 정보에서 확인 가능 |
siteName | string | Required | App Name, 설정 - 회사 정보 관리 - 회사정보에서 확인 가능 |
categoryId | string | Required | 대분류 ID, 설정 - 상담 분류 관리 - 대분류 앞에 적혀있는 숫자 코드 |
divisionId | string | Required | 중분류 ID, 설정 - 상담 분류 관리 - 중분류 앞에 적혀있는 숫자 코드 |
partnerId | string | Optional | 파트너사 ID |
shopId | string | Optional | 쇼핑몰 ID |
params | string | Optional | 고정 및 Custom 파라미터 추가영역입니다.
여러 개일 경우 ,(콤마)로 구분합니다. (ex: 'parameter1=1,parameter2=2,site_uid=1')
사용 가능한 파라미터
• site_uid : 고객 ID
• cus_extra_username : 고객 이름
• cus_extra_phone : 고객 휴대폰 번호
• cus_extra_tel_phone : 고객 전화번호
• cus_extra_email : 고객 이메일
• parameter1~parameter10 : Custom 파라미터
Custom 파라미터 설정이나 사용 가능한 파라미터 전체 목록은 관리자 설정의 파라미터 관리에서 가능합니다. |
kakaoId | string | Optional | 카카오톡 채널 ID, 설정 - 서비스 연동 관리에서 연동한 카카오톡 채널 ID |
naverId | string | Optional | 네이버톡톡 채널 ID, 설정 - 서비스 연동 관리에서 연동한 네이버톡톡 ID |
dynamicScript | boolean | Optional | true이면 동적으로 iframe을 생성해서 해피톡 채팅을 호출할 수 있습니다. |
showOnHover | boolean | Optional | true이면 버튼이 숨겨진 상태로 렌더링됩니다. hover하면 버튼이 노출됩니다. |
options | Options | Optional | 채팅 부가 옵션 Reference |
chatview | Options | Optional | 채팅뷰 옵션 Reference |
params에 site_uid값을 넘길 경우 다른 브라우저를 사용하더라도 동일한 웹채팅창을 요청합니다.
에디터 창에서 설정한 채널 ID 값은 기본 default 값이며 kakaoId랑 naverId를 추가하면 기본값을 override합니다.
<!-- 기본 예제 -->
<script type="text/javascript">
var ht = null;
(function(id, scriptSrc, callback) {
var d = document,
tagName = 'script',
$script = d.createElement(tagName),
$element = d.getElementsByTagName(tagName)[0];
$script.id = id;
$script.async = true;
$script.src = scriptSrc;
if (callback) { $script.addEventListener('load', function (e) { callback(null, e); }, false); }
$element.parentNode.insertBefore($script, $element);
})('happytalkSDK', 'https://chat-static.happytalkio.com/sdk/happytalk.chat.v2.min.js', function() {
ht = new Happytalk({
siteId: '4000000015',
siteName: '해피톡',
categoryId: '129884',
divisionId: '129885',
kakaoId: '@해피톡io',
naverId: 'wcb559',
params:'site_uid=happytalk,cus_extra_username=김해피,cus_extra_phone=01012345678'
});
});
</script>
HTML
복사
<!-- 이벤트 바인딩 예제 1) -->
<script>
var ht = {
buffer: [],
event: {
on: function(event, callback) {
ht.buffer.push({ event: event, callback: callback });
}
}
};
(function(id, scriptSrc, callback) {
var d = document, tagName = 'script',
$script = d.createElement(tagName),
$element = d.getElementsByTagName(tagName)[0];
$script.id = id; $script.async = true; $script.src = scriptSrc;
if (callback) { $script.addEventListener('load', function (e) { callback(null, e); }, false); }
$element.parentNode.insertBefore($script, $element);
})('happytalkSDK', 'https://chat-static.happytalkio.com/sdk/happytalk.chat.v2.min.js', function() {
var buffer = ht.buffer;
ht = new Happytalk({
siteId: '4000000015', siteName: '해피톡',
categoryId: '129884', divisionId: '129885',
kakaoId: '@해피톡io', naverId: 'wcb559',
});
buffer.forEach(function(item) { ht.event.on(item.event, item.callback); });
});
</script>
<script>
// SDK 이벤트 바인딩
ht.event.on('happytalk:ready', function () {
console.log('happytalk ready event');
});
</script>
HTML
복사
<!-- 이벤트 바인딩 예제 2) -->
<script>
var ht = {};
(function(id, scriptSrc, callback) {
var d = document,
tagName = 'script',
$script = d.createElement(tagName),
$element = d.getElementsByTagName(tagName)[0];
$script.id = id;
$script.async = true;
$script.src = scriptSrc;
if (callback) { $script.addEventListener('load', function (e) { callback(null, e); }, false); }
$element.parentNode.insertBefore($script, $element);
})('happytalkSDK', 'https://chat-static.happytalkio.com/sdk/happytalk.chat.v2.min.js', function() {
ht = new Happytalk({
siteId: '4000000015',
siteName: '해피톡',
categoryId: '129884',
divisionId: '129885',
kakaoId: '@해피톡io',
naverId: 'wcb559',
});
// 이벤트 바인딩
ht.event.on('happytalk:ready', function () {
console.log('happytalk ready event');
});
});
</script>
HTML
복사
에디터에서 설정한 채널 ID 값은 기본값이며, 이벤트 바인딩은 위 예제처럼 buffer 패턴 또는 happytalk:ready 이후에 처리하세요.