Unbluチャネルの追加5 min read

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

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

チャネルシステム連携

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

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

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

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

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

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

Kore.aiプラットフォームでボットを作成または開きます。
左側のナビゲーションメニューから、チャネルオプションを選択します。
チャネルページで、Unbluをクリックして、それをボットに対して有効にします。
構成タブに進み、お使いの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チャネルを有効にする場合は、このフィールドはオプションになり。
チャネルを有効にします。

手順の追加

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をクリックして、ボットチャネル構成を完全に削除します。

警告：この操作は永久的で、元に戻す、ことはできません。

On this Page