Unblu 채널 추가5 min read

Unblu는 금융 서비스를 위한 대화형 플랫폼입니다.

Unblu를 채널로 설정하려면 Unblu에서 외부 통합 봇을 생성하고 '명명된 영역'을 생성하여 이 명명된 영역을 Kore.ai 봇에 매핑해야 합니다.

채널 통합

1단계: 명명된 영역 생성

Unblu의 명명된 영역은 웹 사이트에서 채팅 요청의 출처를 식별하는 데 사용됩니다. Kore.ai 봇은 명명된 영역에 연결된 웹 사이트의 섹션에서 채팅이 시작된 경우에만 사용자에게 응답하게 하려면 명명된 영역에 연결해야 합니다. 단일 Kore.ai 봇에 대한 Unblu 채널을 활성화하는 경우 매핑은 선택사항입니다.

Unblu 계정 관리자에 Login하세요.
명명된 영역 모듈에서 '새 명명된 영역' 옵션을 선택합니다.
모든 필수 정보를 입력합니다.
생성한 명명된 영역의 이름을 기록합니다.

2단계: Unblu 봇 생성

Kore.ai 봇과 통합하기 위해 Unblu 계정에 봇을 생성해야 합니다

Unblu 봇은 Kore.ai 봇 플랫폼에서 직접 생성할 수 있습니다.

Kore.ai 플랫폼에서 봇을 생성하거나 엽니다.
왼쪽 탐색 메뉴에서 Channels 옵션을 선택합니다
채널 페이지에서Unblu를 클릭하여 봇에 동일하게 활성화합니다.
Configurations tab으로 이동하여 Unblu 계정에 봇을 생성하기 위한 다음 세부 정보를 입력하세요:
- Unblu Host URL -Unblu 애플리케이션의 URL입니다. 예를 들어, Unblu 클라우드에는 https://www.unblu.com/를 사용합니다.
- Unblu Account Username –Unblu 계정 사용자 이름을 입력하세요.
- Unblu Account Password –Unblu 사용자 이름과 연결된 암호를 입력하세요.
- Unblu Bot Name –Unblu 봇에 사용할 이름을 지정하세요.
- Unblu Bot Description – Unblu 봇의 간단한 설명을 입력하세요.
- Bot Person – 사용자에게 Unblu 봇을 나타낼 이름을 입력하세요.
- Secret Key – Unblu와 Kore.ai 봇 간의 통신을 보호하기 위한 비밀키를 입력하세요.
- Named Area – Kore.ai 봇과 연결하고자 하는 명명된 영역을 입력합니다. Kore.ai는 여기서 선택한 명명된 영역에서 시작된 사용자 채팅에만 응답합니다. 단일 Kore.ai 봇에 대한 Unblu 채널을 활성화하는 경우 필드는 선택사항입니다.
채널을 Enable합니다.

추가 지시 사항

Unblu에서 Kore.ai로의 원활한 정보 교환을 위해, 다음과 같은 수행 해야 하는 추가 단계가 몇 가지 있습니다:

Unblu SDK가 호스팅 될 host URL은 Unblu 계정의 Domain 섹션에 추가되어야 합니다.
Unblu 계정의 API Keys 섹션에서 API Keys를 기록합니다.
Unblu SDK를 설정하여 Kore.ai 봇에 액세스를 할당하고 아래 주어진 단계를 따릅니다.

Unblu SDK HTML 파일을 엽니다. 다음 속성이 반드시 설정되어야 합니다:

<head>에서 메타 태그는 다음과 같습니다: <meta name="unblu:named-area" content="<your-namedArea-Id>" /> 이것은 위의 1단계에서 생성한 명명된 영역입니다.
방문자 정보를 추가할 스크립트 태그는 Unblu 호스트를 가리켜야 합니다. <script src="<your-unblu-host>/unblu/js-api/v2/visitor/visitor-api.min.js"></script>
기능 setVisitorData를 호출하여 방문자 데이터를 Kore.ai 봇으로 보냅니다. visitorData는 문자열 형식이어야 하며 개체를 전달해야 하는 경우 Stringify를 사용합니다.
- 다음 섹션으로 이동하여 apiKey와 serverUrl 필드를 위에 언급된 값으로 채웁니다.
```
window.unblu.api
.configure({
   apiKey: "<your-unblu-apikey>",
   serverUrl: "<your-unblu-host>"
  })
```
다음 스크립트 태그에서, Unblu 호스트 URL과 API 키를 추가합니다:
<script type="text/javascript" defer="defer" src="<your-unblu-host>/unblu/visitor.js?x-unblu-apikey=<your-unblu-apikey>"></script>

전체 Unblu SDK HTML 파일은 다음과 같이 보입니다:

<!DOCTYPE html>
<html>

<head>

   <meta name="unblu:named-area" content="<your-namedArea-Id>" />

   <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
   <script src="<your-unblu-host>/unblu/js-api/v2/visitor/visitor-api.min.js"></script>

 <script>
   function setVisitorData(engagementType, visitorData) { 
      return Promise.resolve(JSON.stringify({ name: "John", about: "Tester" })); 
       }
     window.unblu.api
      .configure({
         apiKey: "<your-unblu-apikey>",
         serverUrl: "<your-unblu-host>"
       })
      .initialize().then(function (api) {
        console.log("API initialized successfully!");
        api.setNewConversationInterceptor(setVisitorData);
 
            }).catch(e => {
                console.log("------error : ", e);
                if (e.type === 'INITIALIZATION_TIMEOUT') {
                  //retry
                 } else if (e.type === 'UNSUPPORTED_BROWSER') {
                  // display unsupported browser dialog
                } else {
                 // show generic error message
                 }
           });

</script>

<script type="text/javascript" defer="defer"
src="<your-unblu-host>/unblu/visitor.js?x-unblu-apikey=<your-unblu-apikey>"></script>
</head>

<body>
</body>

</html>

사용자 정보와 함께 usercontext.customData에서 Unblu의 각 메시지에 대한 방문자 정보에 액세스할 수 있으며,

다음은 구조입니다 usercontext.customData

{
"timestamp" : 1594113137065.0,
"eventType" : "bot.dialog.opened",
"accountId" : "wZvcAnbBSpOps9oteH-Oxw",
"dialogToken" : "qG8dFE7ZQPW1p6qcI293hQ-c-QY7P7MNqTCuM6FHT-m-FSQ",
"dialogType" : "ONBOARDING",
"counterpartPerson" : {
   "type" : "PersonData",
   "id" : "xZHnVmhxQNKvyf5ybxyLoQ",
   "accountId" : "wZvcAnbBSpOps9oteH-Oxw",
   "personSource" : "VIRTUAL",
   "sourceId" : "awhFjUq1RQCvdMDoV5OW2Q",
   "sourceData" : null,
   "firstName" : null,
   "lastName" : null,
   "username" : null,
   "nickname" : null,
   "displayName" : "Visitor - xZHnV",
   "personType" : "VISITOR",
   "authorizationRole" : "ANONYMOUS_USER",
   "email" : null,
   "phone" : null,
   "teamId" : null,
   "teamName" : null,
   "avatar" : null
   },
"conversation" : {
   "type" : "ConversationData",
   "id" : "qG8dFE7ZQPW1p6qcI293hQ",
   "accountId" : "wZvcAnbBSpOps9oteH-Oxw",
   "topic" : null,
   "recipient" : {
   "type" : "NamedAreaData", 
   "id" : "WkUGFqcORCCor3bxHa3I5A",
   "accountId" : "wZvcAnbBSpOps9oteH-Oxw",
   "displayName" : "testlocal",
   "avatar" : null
  },
"participants" : [
 {
   "type" : "ParticipantData",
   "state" : "ACTIVE",
   "personId" : "yb8ALAiGQOWlCoBahUCfgQ",
   "connectedViaExternalMessenger" : false,
   "hidden" : true
 }
 ],
 "assigneePersonId" : null,
 "contextPersonId" : "xZHnVmhxQNKvyf5ybxyLoQ",
 "state" : "ONBOARDING",
 "initialEngagementType" : "CHAT_REQUEST",
 "locale" : "en",
 "tokboxSessionId" : null,
 "visitorData" : "{\"name\":\"John\",\"about\":\"Tester\"}",
 "conversationTemplateId" : "R6W3x2uzQ1KXzARnIqdNZw",
 "links" : [
 {
   "type" : "OPEN_IN_VISITOR_DESK",
   "url" : "https://kore.dev.unblu-test.com/unblu/visitordesk/#/conversation/qG8dFE7ZQPW1p6qcI293hQ"
 },
 {
  "type" : "OPEN_IN_AGENT_DESK",
  "url" : "https://kore.dev.unblu-test.com/unblu/desk/#/conversation/qG8dFE7ZQPW1p6qcI293hQ"
 },
{
  "type" : "OPEN_IN_AGENT_SINGLE_VIEW",
  "url" : "https://kore.dev.unblu-test.com/unblu/single/#/conversation/qG8dFE7ZQPW1p6qcI293hQ"
 }
 ],
 "externalMessengerChannelId" : null,
 "sourceId" : null,
 "configuration" : null,
 "text" : null
},
"presencePersonInfo" : {
  "id" : "OuG04Q0WSFe3-iaIA1GlLw",
  "creationTimestamp" : 1594112743472.0,
  "modificationTimestamp" : 1594112743472.0,
  "accountId" : "wZvcAnbBSpOps9oteH-Oxw",
  "joinedTimestamp" : 1594112743472.0,
  "leftTimestamp" : null,
  "personId" : "xZHnVmhxQNKvyf5ybxyLoQ",
  "deviceInfo" : {
    "id" : "fx7Q8qZyQXmnf62xpoePWg",
    "creationTimestamp" : 1594112743454.0,
    "modificationTimestamp" : 1594112743454.0,
    "accountId" : "wZvcAnbBSpOps9oteH-Oxw",
    "osName" : "Ubuntu",
    "osVersion" : "Other",
    "browserName" : "Chromium",
    "browserVersion" : "81.0",
    "userAgent" : null,
    "screenWidth" : null,
    "screenHeight" : null,
    "screenPixelRatio" : null,
    "type" : "DESKTOP",
    "identifier" : "awhFjUq1RQCvdMDoV5OW2Q",
    "identifierSource" : "COOKIE",
    "pushToken" : null,
    "ownerPersonId" : "xZHnVmhxQNKvyf5ybxyLoQ"
  },
 "touchTimestamp" : 1594113153628.0,
 "impersonationType" : "NONE",
 "impersonatedFromUserId" : null,
 "impersonatedFromAccountId" : null,
 "additionalInfo" : null,
 "authInfo" : null,
 "propagated" : false
 }
}

특별 참고 사항

여러 기능이 Kore.ai 봇과 Unblu 채널의 통합으로 인해 가능합니다.

봇에 명명된 영역을 매핑하는 경우, multiple named areas이 매핑될 수 있습니다. 이러한 방법으로 단일 Kore.ai 봇은 SDK 또는 명명된 영역과 같은 다양한 출처의 Unblu 대화 제안 요청을 수락할 역량을 가집니다.
또한, 명명된 영역 매핑은 단일 Kore.ai 봇에 대한 Unblu 채널을 활성화하는 경우 선택사항입니다.
Dialogflow에 agent transfer 노드를 추가하여 에이전트에 사용자 대화를 리디렉션할 수 있습니다. 이 채널에 대해 특별히 에이전트 전송 또는 BotKit를 활성화 할 필요는 없습니다. 에이전트 전송 노드가 있으면 충분합니다.
Unblu에서 각 메시지에 대한 사용자 정보는 usercontext.customData에서 사용할 수 있으며 이를 향후 진행 시 사용할 수 있습니다. 이 정보는 사용자의 deviceInfo, authInfo, joinedTime이 포함됩니다. 컨텍스트 개체 사용 방법은 여기를 참조하세요.

메시지 템플릿이 지원되는 Unblu 사용

기본값으로, 다음 메시지 템플릿이 사용됩니다 – 버튼/다중 선택, 목록 템플릿. 카드 메시지, 목록 메시지, 다중 선택/버튼 메시지와 같은 템플릿을 재정의할 수 있습니다. 다음은 위에 언급된 템플릿을 사용하는 방법에 대한 코드 예시이며, 필요에 따라 맞게 이를 바꿉니다:

Card Template:

var unbluCardTemplate = {
    "$_type": "CardPostMessageData",
    "type": "CARD",
    "imageUrl": "data:image/png;base64,",
    "imageAltText": "test image",
    "title": "Title",
    "body": "This is the **body text** with markdown",
    "bodyTextType": "MARKDOWN",
    "actions": [
      {
        "$_type": "MessageAction",
        "actionType": "LINK_INTERNAL",
        "label": "Unblu homepage",
        "value": "https://unblu.com"
      },
      {
        "$_type": "MessageAction",
        "actionType": "LINK_EXTERNAL",
        "label": "Wikipedia",
        "value": "https://www.wikipedia.org/"
      },
      {
        "$_type": "MessageAction",
        "actionType": "REPLY_MESSAGE",
        "label": "More info",
        "value": "Could you provide me with more info?"
      }
    ]
  };

print(JSON.stringify(unbluCardTemplate));

List Template:

var unbluListTemplate = {
    "$_type": "ListPostMessageData",
    "type": "LIST",
    "header": {
      "$_type": "MessageHeader",
      "imageUrl": "data:image/png;base64,",
      "imageAltText": "test image",
      "title": "Title",
      "body": "This is the **body text** with markdown",
      "bodyTextType": "MARKDOWN"
    },
    "items": [
      {
        "$_type": "PostListMessageCardItemData",
        "imageUrl": "data:image/png;base64,",
        "imageAltText": "test image",
        "title": "Title",
        "body": "This is the **body text** with markdown",
        "bodyTextType": "MARKDOWN",
        "action": null
      },
      {
        "$_type": "PostListMessageCardItemData",
        "imageUrl": "data:image/png;base64,",
        "imageAltText": "test image",
        "title": "Title",
        "body": "This is the **body text** with markdown",
        "bodyTextType": "MARKDOWN",
        "action": {
          "$_type": "MessageAction",
          "actionType": "LINK_INTERNAL",
          "label": "Unblu homepage",
          "value": "https://unblu.com"
        }
      }
    ],
    "actions": [
      {
        "$_type": "MessageAction",
        "actionType": "LINK_INTERNAL",
        "label": "Unblu homepage",
        "value": "https://unblu.com"
      },
      {
        "$_type": "MessageAction",
        "actionType": "LINK_EXTERNAL",
        "label": "Wikipedia",
        "value": "https://www.wikipedia.org/"
      },
      {
        "$_type": "MessageAction",
        "actionType": "REPLY_MESSAGE",
        "label": "More info",
        "value": "Could you provide me with more info?"
      }
    ]
}
print(JSON.stringify(unbluListTemplate));

Multi Choice Template:

var unbluMultiChoiceTemplate =  {
    "$_type": "MultichoiceQuestionPostMessageData",
    "type": "MULTICHOICE_QUESTION",
    "text": "Choose one of the options",
    "textType": "MARKDOWN",
    "options": [
      {
        "$_type": "MultichoiceQuestionOption",
        "label": "Option 1",
        "value": "1",
        "primary": true
      },
      {
        "$_type": "MultichoiceQuestionOption",
        "label": "Option 2",
        "value": "2",
        "primary": false
      }
    ]
  };
print(JSON.stringify(unbluMultiChoiceTemplate));

Unblu 채널 편집

Unblu 채널을 편집하려면, 수정하기 위해 채널 위로 마우스를 이동한 후 Settings 아이콘을 클릭하여 명령 메뉴를 표시합니다. 채널을 수정하려면 다음과 같은 명령 중 하나를 선택하세요.

Disable/Enable – Disable을 클릭하여 봇의 Unblu 사용을 일시적으로 비활성화합니다. Unblu 채널 사용을 활성화하려면, Enable을 클릭하세요.
Delete – Delete를 클릭한 후 Delete Confirmation 대화창의 OK을 클릭하여 봇 채널 설정을 영구적으로 삭제합니다.

Warning: 이 작업은 영구적이므로, 취소할 수 없습니다.

On this Page