웹챗/챗봇 버튼 달기

클라우드게이트에서 독자적으로 개발한 웹챗과 챗봇을 사용하여 좀 더 다양한 서비스 운영을 구현하실 수 있습니다.

웹챗/챗봇 버튼은 웹챗/챗봇을 설치하는데 URL 을 통해 원하는 버튼에 연결할 수 있습니다.

URL 을 통해 원하는 위치에 원하는 버튼으로 설치해 보세요.
고객 센터 등 별도 페이지에서 웹챗/챗봇을 연결하는 경우 URL 방식이 유용합니다.

URL 설명

brandKey : 클라우드게이트에서 발급받은 브랜드키
channelType : 웹챗 / 시나리오 구분키값
scenarioId : 보여줄 시나리오 ID

웹챗/챗봇 버튼은 웹챗/챗봇을 설치하는데 SDK 를 지원하여 Script 로 설치가 가능합니다.

SDK 설치 전 클라우드게이트가 제공해주는 브랜드키와 JavaScript 코드가 필요합니다.
스크립트는 클라우드게이트에서 제공하는 버튼을 사용하는 스크립트와 원하시는 별도의 이미지를 URL로 삽입하여 사용하는 스크립트 2가지를 제공합니다.
원하시는 스크립트 코드를 복사 후 HTML의 <body> 태그 안에 삽입 후, <a> 태그 안에 원하시는 버튼의 URL을 입력하시면 해당 페이지에서 레이어 형태의 웹챗/챗봇을 사용하실 수 있습니다.

💡 APP내 웹챗/챗봇 적용시 필요 정보

App 내 웹챗/챗봇 적용 시 TWC에 전달해 주세요.
App 에이전트, App 내 통신 가능한 웹뷰 창닫기 함수 코드

1. 웹페이지 내 클라우드게이트에서 제공받은 JavaScript SDK 붙이기

아래와 같이 JavaScript SDK를 웹 페이지에 포함(Include)시킵니다 해당 스크립트에 포함된 URL은 JavaScript SDK 다운로드 경로로써, 이를 통해 항상 최신 버전을 사용할 수 있습니다.

<script src="<https://storage.googleapis.com/cloud-gate-cdn/sdk/Twc.plugin.js>"></script>

2. 호출할 함수 초기화 하기

해당 SDK를 초기화 하기 위해선 아래와 같이 제공되고있는 파라미터를 할당 해야합니다. 각 파라미터에 대한 자세한 설명은 아래를 참조 해주세요.

<script>
(function() {
 Twc('init', {
   brandKey: "클라우드게이트에서 발급받은 브랜드키",
   channelType: "chat",
   buttonOption: {
     showLauncher: true,
     zIndex: 10
    }
  })
})();
</script>

ex)예시 (클라우드게이트 제공 버튼사용 스크립트) – 웹챗

<html>
<head>
    <meta charset="utf-8"/>
    <title>TWC webchat Scripts</title>
</head>
<body>
	<!-- TWC chatbot Scripts -->
	<script src="<https://storage.googleapis.com/cloud-gate-cdn/sdk/Twc.plugin.js>"></script>
	<script>
	(function() {
	 Twc('init', {
	   brandKey: "COUxTExRdGIlydjWXW0dq1AZa6kPeYKPjBnQ5MjQo9c=",
	   channelType: "chat",
	   buttonOption: {
	     showLauncher: true,
	     zIndex: 10
	    }
	  })
	})();
	</script>
</body>
</html>

파라미터 설명
- brandKey → 발급받은 브랜드키
- channelType → chat / scenario : 호출할 채널 타입
- showLauncher → 웹챗 버튼 노출 여부. 클게에서 제공하는 버튼 외에 다른 버튼을 사용시 false
- zIndex → 아이콘 및 팝업 노출 z-index 값

ex)예시 (별도의 버튼 이미지 사용 스크립트) – 챗봇

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>TWC chatBot Scripts</title>
</head>
<body>
	<!-- TWC chatbot Scripts -->		
	<script src="<https://storage.googleapis.com/cloud-gate-cdn/sdk/Twc.plugin.js>"></script>

	<a onclick="Twc.Chat.open()">버튼</a> // 실제 웹챗/챗봇을 호출할 함수.

	<script>
	(function() {
	 Twc('init', {
	   brandKey: "클라우드게이트에서 발급받은 브랜드키",
	   channelType: "chat",
	   buttonOption: {
	     showLauncher: false,
	     zIndex: 10
	    }
	  })
	})();
	</script>
</body>
</html>

Twc.Chat.open()
- showLauncher을 flase로 설정하여 아이콘을 노출하지 않고 이 함수를 호출하여 웹챗 또는 챗봇을 호출할 수 있음.
파라미터 설명
- brandKey → 발급받은 브랜드키
- channelType → chat / scenario : 호출할 채널 타입
- showLauncher → 웹챗 버튼 노출 여부. 클게에서 제공하는 버튼 외에 다른 버튼을 사용시 false
- zIndex → 아이콘 및 팝업 노출 z-index 값
- scenarioId → 노출시킬 시나리오 Id. (클라우드 게이트 내 챗봇 버튼 참조)

App 에이전트
App 내 통신 가능한 웹뷰 창닫기 함수 코드**

웹챗/챗봇은 브라우저 기반으로 고객을 판별하여 챗룸을 만들어 상담하는 방식으로 고정된 파라미터를 활용하여 로그인 아이디를 통한 챗룸 연결이 가능합니다.

클라우드게이트에서 지정한 고정 파라미터로 로그인 유저 정보를 전달할 수 있습니다.
- 로그인 정보를 전달하는 고정 파라미터 키 값 : loginId
- loginId 파라미터로 전달받은 값은 클라우드게이트의 고객 유저키로 활용됩니다.

웹챗/챗봇 버튼을 생성하는 URL 파라미터에 아래의 형식으로 loginId 파라미터에 고객 로그인 id 정보를 추가하여 전송해주세요. 클라우드게이트는 고객사로부터 전달된 코드를 통해 로그인 한 사용자의 정보를 받아 고객정보를 매칭합니다.
고객 로그인 상태
- 웹챗 연결 시 **loginId** 파라미터에 고객 로그인 정보를 포함하여 전송
- 클라우드게이트 상담데스크> 우측 상담보조기능 > 고객정보 탭 > 유저키 항목에 id 정보 출력됩니다.
고객 비로그인 상태
- 웹챗 연결 시 loginId 파라미터 없이 전송
- 클라우드게이트 상담데스크> 우측 상담보조기능 > 고객정보 탭 > 유저키 항목에 UUID 출력됩니다.

URL 사용 시 적용 방법 안내
- 기본 제공 및 사용되는 웹챗/챗봇 연결 URL에 &loginId=로그인아이디 형태로 붙여 고객 로그인 id 를 전송하시면 됩니다.
  - 웹챗
    https://webchat-dev.thecloudgate.io/webChat?**brandKey**={발급받은브랜드키}&**channelType**=chat&**loginId=로그인아이디**
  - 챗봇
    https://webchat-dev.thecloudgate.io/webChat?**brandKey**={발급받은브랜드키}&**channelType**=scenario&**scenarioId**={시나리오ID}&**loginId=로그인아이디**
  파라미터 설명
  - brandKey : 클라우드게이트에서 발급받은 브랜드키
  - channelType : 웹챗 / 시나리오 구분키값
  - loginId : 로그인한 유저 id. 이 파라미터가 있을시, 이 값이 고객 유저키가 된다.

SDK 사용 시 적용 방법 안내

기본 제공 및 사용되는 웹챗/챗봇 연결 스크립트의 function에 loginId: “로그인아이디” 형태로 붙여 고객 로그인 id 를 전송하시면 됩니다.

웹챗

<!-- TWC webchat Scripts -->
<script src="<https://storage.googleapis.com/cloud-gate-cdn/sdk/Twc.plugin.qa.js>" id="pluginJs" data-mode="develop"></script>

<script>
(function() {
 Twc('init', {
   brandKey: "hEU_7cnLpg_o3cglcd6jlg",
   channelType: "chat",
	 loginId: "유저 로그인아이디", // 이부분이 추가되어야 함
   buttonOption: {
     showLauncher: true,
     zIndex: 10
    }
  })
})();
</script>

챗봇

<!-— TWC chatbot Scripts —->
<script src="<https://storage.googleapis.com/cloud-gate-cdn/sdk/Twc.plugin.qa.js>" id="pluginJs" data-mode="develop"></script>

<script>
(function() {
 Twc('init', {
   brandKey: "9E7fizVA7kwmWBomlp9KpQ",
   channelType: "scenario",
	 loginId: "유저 로그인아이디", // 이부분이 추가되어야 함
	 scenarioId: "NDA1",
   buttonOption: {
     showLauncher: true,
     zIndex: 10
    }
  })
})();
</script>

<!-— TWC chatbot Scripts —->
<script src="<https://storage.googleapis.com/cloud-gate-cdn/sdk/Twc.plugin.qa.js>" id="pluginJs" data-mode="develop"></script>

<script>
(function() {
 Twc('init', {
   brandKey: "9E7fizVA7kwmWBomlp9KpQ",
   channelType: "scenario",
	 loginId: "유저 로그인아이디", // 이부분이 추가되어야 함
	 scenarioId: "NDA1",
   buttonOption: {
     showLauncher: true,
     zIndex: 10
    }
  })
})();
</script>

파라미터 설명

brandKey : 클라우드게이트에서 발급받은 브랜드키
channelType : 호출할 채널 타입
scenarioId : 호출할 시나리오 아이디
loginId : 유저 로그인 아이디. → 챗봇에서 웹챗으로 상담연결시 고객인지를 위해 필요.
showLauncher : 챗봇 버튼 노출 여부. 클게에서 제공하는 버튼 외에 다른 버튼을 사용시 false – zIndex : 아이콘 및 팝업 노출 z-index 값

App 내 웹챗 / 챗봇 적용 시 필요 정보 (TWC에 전달 필요)

App 에이전트
App 내 통신 가능한 웹뷰 창닫기 함수 코드**

클라우드게이트 웹챗/챗봇은 고객과의 상담에 필요한 정보를 커스텀 파라미터로 자유롭게 등록할 수 있으며, 챗룸 연결 시 해당 정보들을 함께 확인할 수 있습니다.

파라미터 추가하기
- 설정/관리 > 상담채널 연동 > 웹챗/챗봇 커스텀 파라미터 관리에서 고객이 상담 시작 시 전달 받고자 하는 파라미터명과 파라미터 설명을 입력하고 저장합니다.
  [추가] 버튼을 클릭하여 커스텀 파라미터를 추가로 입력 및 저장할 수 있습니다.
  URL 또는 스크립트에 사용될 파라미터명을 입력합니다.
  상담데스크 > 우측 보조 영역 > 고객정보에 보여질 파라미터 항목명 을 입력합니다.
  입력한 파라미터를 사용하려면 [저장] 버튼을 클릭하여 저장하여야 합니다.
  파라미터 유의 사항
  - 파라미터명이나 파라미터 항목명이 공백인 경우 저장되지 않습니다.
  - brandKey, type, ticketid, loginid, appID 는 사용할 수 없는 파라미터명입니다. 주의를 부탁드립니다.

파라미터 추가한 소스 확인하기
- 설정/관리 > 상담 버튼 설치 > 웹챗/챗봇 스크립트 코드 및 URL 코드를 보면 코드 뒷 부분에 커스텀 파라미터로 저장하신 파라미터명이 추가되어 있는 것을 확인할 수 있습니다.

💡 커스텀 파라미터가 여러개 일 때

URL : 파라미터명 및 파라미터값을 이어 붙여주면 적용됩니다.
스크립트 : 파라미터명 및 파라미터값을 각각 구분하여 넣어주면 적용됩니다.

예시1. 커스텀 파라미터로 name 이 추가된 URL 코드

<https://webchat.thecloudgate.io/webChat>?
brandKey=00kMQr0lZWzHq3wHjQsulA&channelType=chat**&파라미터명=파라미터값** **// 커스텀 파라미터 추가된 부분**

예시2. 커스텀 파라미터로 name 이 추가된 Cloudgate 제공 버튼 스크립트 코드

<!-- TWC webchat Scripts -->
<script src="<https://storage.googleapis.com/cloud-gate-cdn/sdk/Twc.plugin.js>"></script>
<script>
 (function() {
   Twc('init', {
     brandKey: "00kMQr0lZWzHq3wHjQsulA",
     **파라미터명:"파라미터값"**, **// 커스텀 파라미터 추가된 부분**
     channelType: "chat",
     buttonOption: {
       showLauncher: true,
       zIndex: 10
     }
   })
 })();
</script>