웹챗/챗봇 버튼 달기

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

설정/관리 > 브랜드 설정 > 상담 채널 연동 > 웹챗/챗봇 채널 메뉴에서 브랜드 키 확인 

웹챗/챗봇 버튼은 웹챗/챗봇을 설치하는데 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()

    • showLauncherflase로 설정하여 아이콘을 노출하지 않고 이 함수를 호출하여 웹챗 또는 챗봇을 호출할 수 있음.
  • 파라미터 설명

    • brandKey → 발급받은 브랜드키
    • channelType → chat / scenario : 호출할 채널 타입
    • showLauncher → 웹챗 버튼 노출 여부. 클게에서 제공하는 버튼 외에 다른 버튼을 사용시 false
    • zIndex → 아이콘 및 팝업 노출 z-index 값
    • scenarioId → 노출시킬 시나리오 Id. (클라우드 게이트 내 챗봇 버튼 참조)
  • App 에이전트
  • App 내 통신 가능한 웹뷰 창닫기 함수 코드**

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

  • 클라우드게이트에서 지정한 고정 파라미터로 로그인 유저 정보를 전달할 수 있습니다.
    • 로그인 정보를 전달하는 고정 파라미터 키 값 : loginId
    • loginId 파라미터로 전달받은 값은 클라우드게이트의 고객 유저키로 활용됩니다.
 
  • 웹챗/챗봇 버튼을 생성하는 URL 파라미터에 아래의 형식으로 loginId 파라미터에 고객 로그인 id 정보를 추가하여 전송해주세요. 클라우드게이트는 고객사로부터 전달된 코드를 통해 로그인 한 사용자의 정보를 받아 고객정보를 매칭합니다.

     1️⃣ 고객 로그인 상태

    • 웹챗 연결 시 **loginId** 파라미터에 고객 로그인 정보를 포함하여 전송
    • 클라우드게이트 상담데스크> 우측 상담보조기능 > 고객정보 탭 > 유저키 항목에 id 정보 출력됩니다.
     

     2️⃣ 고객 비로그인 상태

    • 웹챗 연결 시 loginId 파라미터 없이 전송
    • 클라우드게이트 상담데스크> 우측 상담보조기능 > 고객정보 탭 > 유저키 항목에 UUID 출력됩니다. 
 
 
  • 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 내 통신 가능한 웹뷰 창닫기 함수 코드**

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

  • 파라미터 추가하기 

    • 설정/관리 > 상담채널 연동 > 웹챗/챗봇 커스텀 파라미터 관리에서 고객이 상담 시작 시 전달 받고자 하는 파라미터명과 파라미터 설명을 입력하고 저장합니다. 

      1️⃣ [추가] 버튼을 클릭하여 커스텀 파라미터를 추가로 입력 및 저장할 수 있습니다.

      2️⃣ URL 또는 스크립트에 사용될 파라미터명을 입력합니다.

      3️⃣ 상담데스크 > 우측 보조 영역 > 고객정보에 보여질 파라미터 항목명 을 입력합니다.

      4️⃣ 입력한 파라미터를 사용하려면 [저장] 버튼을 클릭하여 저장하여야 합니다.

      💡 파라미터 유의 사항

      • 파라미터명이나 파라미터 항목명이 공백인 경우 저장되지 않습니다.
      • 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>

 

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

  • 파라미터 추가한 상담데스크 확인 하기
    • 웹챗/챗봇을 통해 전달된 커스텀 파라미터 정보를 전송하면, 클라우드게이트에서 웹챗/챗봇 연결시 고객사로부터 전달된 정보를 상담데스크 고객정보에 출력됩니다. 
    • 상담데스크 > 고객정보 > 커스텀 파라미터 정보

상세한 개발 가이드는 개발자 문서에서 확인하실 수 있습니다.

웹챗/챗봇 SDK Javascript

자바스크립트를 통해 클라우드게이트 제공 버튼 또는 원하시는 다른 버튼 이미지에 웹챗/챗봇을 사용할 수 있습니다. 1. 웹페이지 내에 JavaScript SDK 붙이기 클라우드게이트에서 제공하는 웹챗/챗봇 스크립트를

가이드 보러가기 »