컨택센터 Premium 플랜 상품 가입 또는 AI챗봇 상품 가입 시 제공되는 웹채팅 화면을 가입자 홈페이지에
플로팅 버튼으로 추가하기 위한 방법을 안내합니다.
사용 방법
1.
스크립트 포함하기: 먼저, 웹사이트의 HTML 파일에 아래 스크립트를 </body> 태그 바로 앞에 추가해야 합니다. 이 스크립트는 채팅 위젯을 웹사이트에 불러오는 역할을 합니다.
<!DOCTYPE html>
<html>
<head>
<title>웹사이트</title>
</head>
<body>
<!-- 웹사이트 콘텐츠 -->
<script src="https://webchat.iproncloud.kr/Floating/ipron-chat.js" defer></script>
</body>
</html>
Plain Text
복사
2.
채팅 위젯 초기화: 스크립트를 포함한 후, IccChat.init() 함수를 반드시 호출하여 채팅 위젯을 시작해야 합니다. 이 함수는 위젯을 웹사이트에 표시하고 작동하게 만듭니다.
API 레퍼런스
ipron-chat.js 스크립트가 웹사이트에 추가되면, IccChat 이라는 기능을 사용할 수 있게 됩니다.
IccChat.init(options)
채팅 위젯을 웹사이트에 표시하고 기본적인 설정을 하는 가장 중요한 함수로 반드시 호출되어야 합니다.
init 함수는 필수적인 설정과 선택적인 사용자 정의 설정으로 나뉩니다.
•
필수 설정: reqconsult는 위젯이 작동하기 위해 반드시 필요한 값입니다. 고객을 식별하는 고유 ID(custid)를 포함합니다.
•
선택 설정: floatingButton, logo 등은 위젯의 디자인을 변경 필요 시 사용하는 옵션 입니다.
사용 예제:
1. 기본 필수 설정 예제
가장 기본적인 형태로, 필수 값인 reqconsult만 사용하여 위젯을 시작합니다.
window.onload = function() {
IccChat.init({
reqconsult: {
custid: 'user-12345' // 고객을 식별하기 위한 필수 ID 값입니다.
}
});
};
Plain Text
복사
‘user_12345’ 에는 컨택센터 Premium 상품 가입 or AI챗봇 가입 후 생성되는 고유 아이디를 입력1) 컨택센터 Premium 상품 가입 후 로그인>대시보드>제품현황 우측 상단 [챗URL 복사] 버튼
→ https://webchat.iproncloud.kr/chat?v=FNmbOg4wWEz 의 파란색 부분을 ‘user_12345’에 입력
2) AI챗봇 상품 가입 후 로그인>대시보드>챗봇관리>AI봇관리 페이지의 [챗봇URL 복사] 버튼
→ https://webchat.iproncloud.kr/chatbot?v=3DrPSb2fWdl 의 파란색 부분을 ‘user_12345’에 입력
2. 모든 선택 사항 설정 예제
필수 값인 reqconsult와 함께, 선택적 옵션을 사용하여 위젯을 자유롭게 꾸밀 수 있습니다.
window.onload = function() {
IccChat.init({
// --- 필수 설정 ---
reqconsult: {
custid: 'user-12345'
},
// --- 선택 설정 (디자인 및 기능 커스터마이징) ---
floatingButton: {
imageUrl: 'https://example.com/my-chat-button-icon.png', // 플로팅 버튼 아이콘 변경
backgroundColor: '#1a73e8' // 플로팅 버튼 배경색 변경
},
menuIcons: {
menu1: 'https://example.com/icon1.png', // 메뉴 아이콘 1
menu2: 'https://example.com/icon2.png' // 메뉴 아이콘 2
},
chatIcon: {
agent: 'https://example.com/agent-icon.png', // 상담사 아이콘
customer: 'https://example.com/customer-icon.png' // 고객 아이콘
},
logo: {
imageUrl: 'https://example.com/my-company-logo.png' // 채팅창 헤더 로고
},
companyName: '우리 회사', // 채팅창 헤더에 표시될 회사 이름
font: {
fontFamilyName: 'Arial, sans-serif' // 채팅창 전체 글꼴 변경
},
position: {
right: '100px', // 화면 오른쪽에서 100px 떨어짐
bottom: '100px' // 화면 하단에서 100px 떨어짐
}
});
};
Plain Text
복사
options 상세 설명
•
reqconsult (객체) - [필수]
◦
웹사이트가 로드되자마자 자동으로 채팅 상담을 시작하게 하는 필수 설정입니다.
◦
custid (문자열): 고객을 식별하는 고유한 값(ID)입니다. 반드시 유효한 custid를 사용합니다.
•
floatingButton (객체) - [선택]
◦
웹사이트 하단에 떠 있는 채팅 버튼을 설정합니다.
◦
imageUrl (문자열): 버튼에 들어갈 이미지 주소(URL)입니다.
◦
backgroundColor (문자열): 버튼의 배경색을 지정합니다 (예: '#007bff' 또는 'blue').
•
menuIcons (객체) - [선택]
◦
채팅창 내부에서 사용될 메뉴 아이콘들을 설정합니다.
◦
menu1, menu2 등: 각 메뉴에 해당하는 아이콘 이미지 주소(URL)를 지정합니다.
•
chatIcon (객체) - [선택]
◦
채팅 대화창에 표시될 상담사와 고객의 프로필 아이콘을 설정합니다.
◦
agent (문자열): 상담사 아이콘 이미지 주소(URL)입니다.
◦
customer (문자열): 고객 아이콘 이미지 주소(URL)입니다.
•
logo (객체) - [선택]
◦
채팅창이 열렸을 때 상단에 표시되는 로고를 설정합니다.
◦
imageUrl (문자열): 로고 이미지 주소(URL)입니다.
•
companyName (문자열) - [선택]
◦
채팅창 상단에 표시될 회사 이름을 설정합니다.
•
font (객체) - [선택]
◦
채팅창에서 사용될 글꼴을 설정합니다.
◦
fontFamilyName (문자열): 사용할 글꼴 이름입니다 (예: 'Arial, sans-serif').
•
position (객체) - [선택]
◦
플로팅 버튼이 웹사이트 어디에 나타날지 위치를 조절합니다. 이 값을 지정하지 않으면, 보통 화면의 오른쪽 아래에 나타납니다.
◦
right (문자열): 화면 오른쪽에서부터의 거리 (예: '50px').
◦
bottom (문자열): 화면 아래쪽에서부터의 거리 (예: '50px').
IccChat.reqconsult(params) - [선택적 기능]
이 함수는 선택 사항으로, init 함수와는 별개로 완전히 새로운 채팅 상담을 시작하고 싶을 때 호출합니다.
예를 들어, 사용자가 '새 문의 시작하기' 버튼을 직접 클릭했을 때 이 함수를 사용하여 새로운 채팅 세션을 만들 수 있습니다.
즉시 재시작되진 않고, 기존 채팅이 종료되고, floating 버튼을 누르면 새 채팅이 시작됩니다.
•
params (객체): 상담을 시작하는 데 필요한 정보를 담고 있습니다.
사용 예제:
document.getElementById('start-new-chat-button').addEventListener('click', function() {
IccChat.reqconsult({
custid: 'user-from-button-click' // 반드시 유효한 custid를 사용해야 합니다.
});
});
Plain Text
복사
params 상세 설명
•
custid (문자열): 고객을 식별하는 고유한 값(ID)입니다. 상담을 시작하려면 반드시 유효한 custid를 제공해야 합니다.
custid 값은 웹챗 URL의 v= 파라미터 이후의 값입니다. 예를 들어, https://webchat.iproncloud.kr/chat?v=your_custid_value 에서 your_custid_value가 됩니다.
에러 처리
1. CORS 에러 발생 시
Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
와 같은 CORS(Cross-Origin Resource Sharing) 에러는 웹사이트 보안 정책 때문에 발생합니다. 이 에러가 나타나면, 웹사이트 관리자에게 문의하여 현재 웹사이트 주소(도메인)를 https://webchat.iproncloud.kr 서비스에서 허용하는 목록에 추가해달라고 요청해야 합니다.
2. custid 값이 잘못된 경우
WebSocket connection to 'wss://...' failed: Error during WebSocket handshake: Unexpected response code: 403
또는 이와 비슷한 메시지와 함께 채팅 연결 실패 에러가 발생할 수 있습니다. 이는 IccChat.init() 또는 IccChat.reqconsult() 함수에 전달한 custid (고객 고유 ID) 값이 올바르지 않거나, 서버에서 허용되지 않는 값일 때 발생합니다. custid 값이 정확한지 다시 확인하시거나, 서비스 관리자에게 문의하여 유효한 custid 사용 방법을 확인해야 합니다.