Unbluは、金融サービス向けの会話型プラットフォームです。

Unbluをチャネルとしてセットアップするには、Unbluで外部インテグレーションボットを作成し、[名前付きエリア]を作成して、この[名前付きエリア]をKore.aiボットにマップする必要があります。

チャネルシステム連携

ステップ1：名前付きエリアを作成

Unbluの名前付きエリアは、ウェブサイトからのチャットリクエストの発信元を識別するために使用されます。Kore.aiボットは、チャットがこの名前付きエリアと関連したお使いのウェブサイトのセクションから発生した場合にのみ、ユーザーに応答するように、名前付きエリアに関連付ける必要があります。単一のkore.aiボットに対してのみUnbluチャネルを有効にする場合は、このマッピングはオプションになります。 

  1. お使いのUnbluアカウント管理にログインします。
  2. 名前付きエリアモジュールで、[新しい名前付きエリア]オプションを選択します。
  3. 要求されたすべての情報を提供します。
  4. 作成した名前付きエリアの名前をメモします。

ステップ2: Unbluボットを作成

ボットは、現在のKore.aiボットと統合するためにUnbluアカウントに作成される必要があります。

Unbluボットは、Kore.aiボットプラットフォームから直接に作成されることができます。

  1. Kore.aiプラットフォームでボットを作成または開きます。
  2. 左側のナビゲーションメニューから、チャネルオプションを選択します。
  3. チャネルページで、Unbluをクリックして、それをボットに対して有効にします。
  4. 構成タブに進み、お使いのUnbluアカウントにボットを作成するために次の詳細を提供します。
    • UnbluホストURL―UnbluアプリケーションのURL。たとえば、Unbluクラウドにはhttps://www.unblu.com/を使用します。
    • Unbluアカウントのユーザー名―Unbluアカウントのユーザー名を提供します。
    • Unbluアカウントのパスワード―Unbluユーザー名に関連付けられているパスワードを提供します。
    • Unbluボット名―Unbluボットに使用したい名前を指定します
    • Unbluボット説明―Unbluボットの短い説明を提供します
    • ボットパーソン―ユーザーにUnbluボットを代表する名前を提供します
    • シークレットキー―UnbluとKore.aiボットの間のコミュニケーションを保護するためのシークレットキーを提供します
    • 名前付きエリア―Kore.aiボットに関連付ける名前付きエリアを指定します。 Kore.aiは、ここで選択した名前付きエリアで発生したユーザーチャットにのみ応答します。単一のkore.aiボットに対してのみUnbluチャネルを有効にする場合は、このフィールドはオプションになり。 
  5. チャネルを有効にします。

手順の追加

UnbluからKore.aiへのシームレスな情報交換のために、いくつかの追加ステップを実行する必要があります。

  • Unblu SDKがホストされる“ホストURL”を、Unbluアカウントのドメインセクションに追加する必要があります。
  • UnbluアカウントのAPIキーセクションから、“APIキー”をメモします。
  • 以下のステップに従って、Kore.aiボットにアクセスできるようにUnblu SDKを構成します。
  • 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は文字列形式である必要があり、オブジェクトを渡す必要がある場合は［文字列化］を使用することに注意してください。
      • 次のセクションを見つけて、上記の値を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>
    • Unbluからの各メッセージのユーザー情報とともに、usercontext.customDataからビジターデータにアクセスできます。
    • 構造以下ようになります 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
 }
}

特記事項

UnbluチャネルとKore.aiボットのシステム連携によって実現できる複数の機能があります

  • 名前付きエリアをボットにマッピングする場合、“複数の名前付きエリア”をマッピングできます。このようにして、単一のKore.aiボットは、SDKや［名前付きエリア］などのさまざまなオリジンからのUnbluダイアログオファーリクエストを受け入れることができます。
  • また、単一のKore.aiボットに対してUnbluチャネルを有効にする場合、名前付きエリアのマッピングはオプションになります。 
  • ダイアログフローに“エージェント転送”ノードを追加することで、ユーザーの会話をエージェントにリダイレクトできます。このチャネル専用にエージェント転送またはBotKitを有効にする必要はないことに注意してください。エージェント転送ノードがあれば十分です。
  • Unbluからの各メッセージのユーザー情報は、usercontext.customDataで利用可能であり、それを追加処理に使うこともできます。この情報には、ユーザーの“deviceInfo”、“authInfo”、“joinedTime”が含まれます。コンテキストオブジェクトの使用方法については、こちらをご覧ください。

Unbluがサポートするメッセージテンプレートの使用

デフォルトでは、次のメッセージテンプレートが使用できます―ボタン/複数選択、リストテンプレート。カードメッセージ、リストメッセージ、複数選択/ボタンメッセージなどのテンプレートを上書きできます。以下は、上記のテンプレートを使用する方法のコード例です。必要に合わせて変更してください。

  • カードテンプレート： 
    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));
  • リストテンプレート: 
    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));
  • 複数選択テンプレート： 
    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チャネルを編集するには、変更するチャネルにマウスを合わせてから、表示される設定アイコをクリックしてコマンドメニューを表示します。チャネルを変更するには、次のコマンドのいずれかを選択します：

  • 無効化/有効化―無効化をクリックして、ボットに対するUnbluの使用を一時的に無効にします。Unbluチャネルの使用を有効にするには、有効化をクリックします。
  • 削除―削除をクリックし、削除の確認ダイアログでOKをクリックして、ボットチャネル構成を完全に削除します。
警告：この操作は永久的で、元に戻す、ことはできません。

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

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

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

채널 통합

1단계: 명명된 영역 생성

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

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

2단계: Unblu 봇 생성

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

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

  1. Kore.ai 플랫폼에서 봇을 생성하거나 엽니다.
  2. 왼쪽 탐색 메뉴에서 Channels 옵션을 선택합니다
  3. 채널 페이지에서Unblu를 클릭하여 봇에 동일하게 활성화합니다.
  4. 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 채널을 활성화하는 경우 필드는 선택사항입니다. 
  5. 채널을 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": "정보를 좀 더 주실 수 있나요?" } ] }; 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": "이것은 마크다운을 포함한 **본문 텍스트**입니다", "bodyTextType": "MARKDOWN" }, "items": [ { "$_type": "PostListMessageCardItemData", "imageUrl": "data:image/png;base64,", "imageAltText": "test image", "title": "Title", "body": "이것은 마크다운을 포함한 **본문 텍스트**입니다", "bodyTextType": "MARKDOWN", "action": null }, { "$_type": "PostListMessageCardItemData", "imageUrl": "data:image/png;base64,", "imageAltText": "test image", "title": "Title", "body": "이것은 마크다운을 포함한 **본문 텍스트**입니다", "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": "정보를 좀 더 주실 수 있나요?" } ] } print(JSON.stringify(unbluListTemplate));
  • Multi Choice Template: 
    var unbluMultiChoiceTemplate = { "$_type": "MultichoiceQuestionPostMessageData", "type": "MULTICHOICE_QUESTION", "text": "옵션 중 하나를 선택하세요", "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: 이 작업은 영구적이므로, 취소할 수 없습니다.

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Unblu is a Conversational Platform for Financial Services.

To setup Unblu as a channel, you will need to create an External Integration bot in Unblu, create a ‘Named Area’ and map this Named Area to your Kore.ai bot.

Channel Integration

Step 1: Create a Named Area

Named Areas in Unblu are used to identify the origins of the chat requests from your website. The Kore.ai bot should be associated with a Named Area to ensure that it responds to users only when the chat has originated from the sections of your website associated with this Named Area. This mapping is optional if you are enabling the Unblu channel for a single kore.ai bot alone. 

  1. Login to your Unblu Account Administration.
  2. Under the Named Areas module, select the ‘New named area’ option.
  3. Provide all the requested information.
  4. Make a note of the name of the Named Area you have created.

Step 2: Create Unblu Bot

A bot should be created in your Unblu account for integrating it with your current Kore.ai bot.

The Unblu Bot can be directly created from the Kore.ai Bots Platform.

  1. Create or Open the bot in the Kore.ai platform.
  2. From the left navigation menu, select Channels option.
  3. On the Channels page, click on Unblu to enable the same for the bot.
  4. Proceed to the Configurations tab and provide the following details for creating a bot in your Unblu account:
    • Unblu Host URL -the URL of your Unblu application. For example, use https://www.unblu.com/ for the Unblu cloud.
    • Unblu Account Username –Provide your Unblu account username.
    • Unblu Account Password – Provide the password associated with your Unblu username.
    • Unblu Bot Name – Provide a name you would like to use for your Unblu bot
    • Unblu Bot Description – Provide a short description of your Unblu bot
    • Bot Person – Provide a Name to represent the Unblu bot to your users
    • Secret Key – Provide a confidential key to secure the communication between Unblu and Kore.ai bots
    • Named Area – Provide the Named Area you would like to associate with your Kore.ai bot. Kore.ai will respond only to the user chats that have originated in the Named Area that you have selected here. This field is optional if you are enabling Unblu channel for a single kore.ai bot alone. 
  5. Enable the channel.

Additional Instructions

For the seamless exchange of information from Unblu to Kore.ai, a few additional steps need to be performed:

  • The host URL where the Unblu SDK would be hosted needs to be added to the Domain section of your Unblu Account.
  • From your Unblu Account, API Keys section, make a note of the API Key.
  • Configure the Unblu SDK to give access to Kore.ai Bot, following the steps given below.
  • Open the Unblu SDK HTML file. Ensure that the following attributes are set:
    • In the <head> the meta tag should look thus: <meta name="unblu:named-area" content="<your-namedArea-Id>" /> This is the named area that you created in Step 1 above.
    • Script tag to populate the visitor information needs point to the Unblu host: <script src="<your-unblu-host>/unblu/js-api/v2/visitor/visitor-api.min.js"></script>
    • Invoke the function setVisitorData to pass the visitor data to Kore.ai bot. Note that the visitorData should be in string format and if you need to pass an object use Stringify.
      • Locate the following section and populate the apiKey and serverUrl fields with the above-mentioned values. 
        window.unblu.api
.configure({
   apiKey: "<your-unblu-apikey>",
   serverUrl: "<your-unblu-host>"
  })
    • In the following Script tag, add Unblu host URL and the API key: <script type="text/javascript" defer="defer" src="<your-unblu-host>/unblu/visitor.js?x-unblu-apikey=<your-unblu-apikey>"></script>
    • The entire Unblu SDK HTML file would look like this: 
      <!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>
    • You can access the Visitor Data from the usercontext.customData  along with the user information for each message from Unblu,
    • Following is the structure of the 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
 }
}

Special Notes

There are multiple functionalities that can be achieved by the integration of Unblu channel with Kore.ai bots

  • When mapping named area to a bot, multiple named areas can be mapped. This way a single Kore.ai bot has the ability to accept Unblu dialog offer requests from different origins like SDKs or namedAreas.
  • Also, the named area mapping is optional if you are enabling the Unblu channel for a single Kore.ai bot. 
  • You can redirect user conversations to agents by adding an agent transfer node in the dialog flow, note that you need not enable the Agent Transfer or BotKit specifically for this Channel. Having an agent transfer node is sufficient.
  • The user information for each message from Unblu is available in the usercontext.customData and you can use it for further processing. This information includes deviceInfo, authInfo, joinedTime of the user. See here for how to use context object.

Using Unblu supported message templates

By default, the following message templates are used – Button/multi-choice, List template. You can override templates like card message, List message, multi-choice/Button message.

Following is a code example for how to use the above mentioned templates, change it to suit your requirements:

  • 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));

Editing the Unblu Channel

To edit the Unblu channel, hover your mouse over the channel to modify, and then click the Settings icon to display the command menu . Select one of the following commands to modify the channel:

  • Disable/Enable – Click Disable to temporarily disable the use of the Unblu for your Bot. To enable the use of the Unblu channel, Click Enable.
  • Delete – Click Delete, and then click OK in the Delete Confirmation dialog to permanently delete the Bot channel configuration.
Warning: This operation is permanent, and cannot be undone.

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed