ウェブ SDK インストールガイド

このページでは、Contact Center AI Platform（CCAI Platform）ウェブ SDK をインストールして使用する方法について説明します。まず、Web SDK バージョン 2 のサンプルファイルをダウンロードして使用することをおすすめします。

始める前に

CCAI Platform ウェブ SDK ローダーをウェブクライアントに含めます。
```
<script src="https://websdk.ujet.co/v2/loader.js"></script>
```
COMPANY_KEY を使用して CCAI Platform ウェブ SDK を初期化します。
バックエンドコードを使用して COMPANY_SECRET で認証を初期化します。

インストールワークフロー

使ってみる

以降のセクションでは、CCAI Platform ウェブ SDK の使用を開始するための情報を提供します。

ウェブ SDK を初期化する

会社のキーを使用してウェブ SDK を初期化できます。

会社キーを取得する

会社のキーを取得する手順は次のとおりです。

管理者認証情報を使用して CCAI Platform ポータルにログインします。
[メニュー] をクリックし、[設定 > 開発者向け設定] をクリックします。
[Company key and secret code] ペインに移動し、[Company key] フィールドにコードを保存します。

その後、UJET(config) メソッドと ujet.on('created', function) イベントを使用して Web SDK を初期化できます。CCAI プラットフォームインスタンスのホスト（myccaip.uc1.ccaiplatform.com など）を指定します。

// INITIALIZE WEB SDK
var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ujet.on('created', function () {
  ujet.authenticate(getAuthToken);
});

また、作成したイベントなしで認証オプションを使用することもできます。

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  authenticate: getAuthToken,
  host: "https://myccaip.uc1.ccaiplatform.com",
});

ここで、getAuthToken() はバックエンドの JWT 署名メカニズムを呼び出す関数です。

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token')
    .then(function(resp) {
      // { token: '....' }
      return resp.json();
    });
}

ここで、fetch() はバックエンドの JWT 署名メカニズムを呼び出します。詳細については、Mozilla Fetch API をご覧ください。

共同閲覧用にウェブ SDK を構成する

共同ブラウジングは、エージェントがエンドユーザーの画面を確認し、必要に応じて操作できるオプション機能です。共同閲覧を使用するには、SDK の初期化時に CCAI Platform インスタンスの共同閲覧ドメインとライセンスキーを指定する必要があります。

共同ブラウジング用にウェブ SDK を構成する手順は次のとおりです。

CCAI Platform インスタンスの共同閲覧ドメインとライセンスキーを取得する手順は次のとおりです。
1. 管理者認証情報を使用して CCAI Platform ポータルにログインします。
2. [メニュー] をクリックし、[設定 > デベロッパー設定] をクリックします。
3. [Co-browse] ペインに移動し、切り替えボタンをクリックしてオンにします。
4. [Co-browse Domain] フィールドと [License Key] フィールドの値を保存します。
SDK の初期化時に共同閲覧ドメインとライセンスキーを指定するには、ウェブ SDK を初期化するときに次のコードを含めます。
```
var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
  },
  // other options
})
```
次のように置き換えます。
- LICENSE_KEY: 前の手順で保存したライセンスキー
- CO-BROWSE_DOMAIN: 前の手順で保存した共同ブラウジングドメイン

詳細については、共同ブラウジングを設定するをご覧ください。

会社のシークレットを使用して認証を初期化する

関数 getAuthToken() は、API を呼び出し、COMPANY_SECRET でペイロードをエンコードする必要があります。

次に、ExpressJS を使用した JWT 署名の例を示します。

const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = {}
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

任意のバックエンドサービスを使用できます。

コンテンツセキュリティポリシー

本番環境サーバーにコンテンツセキュリティポリシーがある場合は、https://websdk.ujet.co/ を script-src と frame-src に追加します。

Internet Explorer 11 のサポート

Internet Explorer をサポートするために、コードで babel-polyfill を使用しています。ウェブサイトでも babel-polyfill を使用している場合は、ウェブ SDK にインポートしないでください。同じライブラリをグローバルとウェブ SDK で使用すると、例外が発生する可能性があります。パッケージをインポートする前に、このチェックを行い、この問題を回避するためのコードを追加することをおすすめします。

ユーザーを追跡する

上記の例では、ユーザーの追跡は行われません。CRM でリピーターを特定し、ユーザー情報を含む事前作成された返信を使用する場合は、ユーザーに識別子を追加する必要があります。

そのためには、次の場所に識別子を追加する必要があります。

getAuthToken() でバックエンドに渡す

function getAuthToken() {
  // YOU SHOULD HAVE THIS KIND OF API ON YOUR SERVER
  return fetch('/auth/token', {
    headers: {
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({
      payload: {
        identifier: 'c727f2851b64b29761da170d0adee67a9a89c2d9960c8eee0ae53737413cfa4e',
        name: 'Test user',
        email: 'test@user.com',
        phone: '1800UJETSDK'
      }
    })
  }).then(function(resp) {
    return resp.json();
  });
}

JWT のエンコード時にペイロードに追加

const express = require('express')
const jwt = require('jsonwebtoken')

const port = process.env.PORT || 3000
const secret = process.env.COMPANY_SECRET || 'secret'

const app = express()

app.use(express.json())

app.post('/auth/token', function (req, res) {
  const payload = req.body.payload
  payload['iss'] = 'YOUR_COMPANY_NAME'
  const iat = parseInt(Date.now() / 1000, 10)
  payload['iat'] = iat
  payload['exp'] = iat + 600
  const token = jwt.sign(payload, secret, { algorithm: 'HS256' })
  res.json({ token })
})

app.listen(port, function () {
  console.log(`Listing at http://localhost:${port}`)
})

authentication() に追加オプションを追加する

new UJET({
  // ...
  authenticate: function() {
    return getAuthToken().then({ token } => {
      return {
        token: token,
        user: {
          identifier: YOUR_UNIQUE_USER_ID,
          name: 'Test user' //optional,
          email: 'test@user.com', //optional,
          phone: '000000000' //optional
        }
      };
    });
  },
})

外部 chatbot への転送

仮想エージェントからエージェントにチャットを転送するときに、あいさつメッセージをオーバーライドし、external_chat_transfer フィールドをカスタムデータにバックフィルすることで、文字起こしをエージェントに渡すことができます。greeting_override はマークダウン形式をサポートしています。

{
  "external_chat_transfer": {
    "greeting_override": "Please hold while we connect you with a human agent.",
    "agent": {
      "name": "Agent Name",
      "avatar": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
    },
    "transcript": [
      {
        "sender": "agent",
        "timestamp": "2021-03-15 12:00:00Z",
        "content": [
          {
            "type": "text",
            "text": "Hello! How can I help you today?"
          },
          {
            "type": "buttons",
            "buttons": [
              {
                "label": "Create New Order",
                "selected": false
              },
              {
                "label": "Check Order Status",
                "selected": true
              },
              {
                "label": "Check Account Balance",
                "selected": false
              }
            ]
          }
        ]
      },
      {
        "sender": "end_user",
        "timestamp": "2021-03-15 12:00:15Z",
        "content": [
          {
            "type": "txt",
            "text": "Ceck Order Status"
          }
        ]
      },
      {
        "sender": "aget",
        "timestamp": "021-03-15 12:00:16Z",
        "content": [
          {
            "type": "txt",
            "text": "Ican help you with that, what's your order number?"
          }
        ]
      },
      {
        "sender": "enduser",
        "timestamp": "021-03-15 12:00:20Z",
        "content": [
          {
            "type": "mdia",
            "media": {
              "type": image",
              "url": "https://ujet.s3.amazonaws.com/default-virtual-agent-avatar-1.png"
            }
          }
        ]
      }
    ]
  }
}

署名されていないカスタムデータ

チャットが開始されると、チャットオブジェクトでカスタムデータを渡すことができます。カスタムデータには、オペレーティングシステム、バージョン番号、場所など、チャットに関連する可能性のあるデータを使用できます。このデータは暗号化されていないため、個人を特定できる情報（PII）を含めるべきではありません。

このカスタムデータを仮想エージェントに渡すこともできます。詳細については、バーチャルエージェントをご覧ください。

var ujet = new UJET({
  // other parameters
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
    }
  },
});

カスタムデータ形式は JSON に似ています。各データフィールドには、キー、ラベル、値が含まれています。以下に例を示します。

{
  "k1": {
    "label": "Version",
    "value": "1.2.3"
  },
  "k2": {
    "label": "Dashboard",
    "value": "http://example.com"
  }
}

この例では、k1 と k2 がキーです。label は CRM ページのラベルで、value はラベルの値です。

カスタムデータの表示を防止する

customData オブジェクトで invisible_to_agent プロパティを使用すると、署名付きまたは署名なしのカスタムデータがエージェントアダプタに表示されないようにできます。次の例では、エージェントアダプターにバージョンが表示されていますが、プラットフォームは表示されていません。

var ujet = new UJET({
  // Other parameters
});

ujet.config({
  customData: {
    version: {
      label: 'Version',
      value: '1.1.0'
      invisible_to_agent: true
    },
    platform: {
      label: 'Platform',
      value: navigator.platform
      invisible_to_agent: false
    }
  }
});

注: invisible_to_agent プロパティは、予約済みデータプロパティがエージェントアダプタに表示されるのを防ぎません。

カスタムデータオブジェクトに "invisible_to_agent" : true プロパティを含めると、次のような動作が想定されます。

カスタムデータはセッションメタデータファイルに含まれます。
カスタムデータは CRM レコードには含まれません。

詳細については、エージェントアダプタでセッションデータを表示するをご覧ください。

予約済みのデータプロパティ

セッションの開始時に、予約済みのデータプロパティを署名付きカスタムデータとして Contact Center AI プラットフォーム（CCAI プラットフォーム）に送信できます。詳細については、予約済みデータプロパティを送信するをご覧ください。

カスタムデータの予約済みデータプロパティの例を次に示します。

  {
    "custom_data": {
      "reserved_verified_customer": {
        "label": "Verified Customer",
        "value": "VERIFIED_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_bad_actor": {
        "label": "Bad Actor",
        "value": "VERIFIED_BAD_ACTOR_BOOLEAN": ,
        "type": "boolean"
      },
      "reserved_repeat_customer": {
        "label": "Repeat Customer",
        "value": "REPEAT_CUSTOMER_BOOLEAN": ,
        "type": "boolean"
      }
    }
  }

次のように置き換えます。

VERIFIED_CUSTOMER_BOOLEAN: このエンドユーザーが正当な顧客であると見なす場合は true。
VERIFIED_BAD_ACTOR_BOOLEAN: このエンドユーザーが不正行為者である可能性があると判断した場合に true。
REPEAT_CUSTOMER_BOOLEAN: このエンドユーザーが以前にコンタクトセンターに連絡したことがあると判断された場合は true。

添付ファイルを無効にする

disableAttachment オプションを使用すると、コンシューマーによる添付ファイルのアップロードを停止できます。

new UJET({
// ...
  disableAttachment: true
});

disableAttachment: true の場合、チャット入力エリアに添付アイコンが表示されず、消費者はファイルをメッセージエリアにドラッグできません。

チャットの回避

エージェントが対応できない場合、ウェブチャットとモバイルチャットでこの状況を自動的に処理するためのオプションを指定できます。

チャットの回避オプションは、CCAI Platform ポータルの [Settings] > [Chat] > [Web & mobile deflection] で確認できます。

営業時間外の回避

営業時間外の転送は、コンタクトセンターまたはキューが営業時間外である場合にのみ発生します。営業時間外の転送を有効にするには、次の操作を行います。

CCAI Platform ポータルで、[設定] > [チャット] > [ウェブとモバイルの回避] に移動します。
[営業時間外の転送] がオフになっている場合は、[営業時間外の転送] オプションを選択して有効にできます。
次の動作について、[転送を許可] オプションを変更して、営業時間外のキューへの転送を許可します。
- エージェントアダプターで、エージェントは次のキューを転送先オプションとして確認できます。
  - 営業時間内のすべてのキュー
  - 営業時間外で、エージェントがログインしており、たらい回しが有効になっていないアクティブなすべてのキュー
  - 24 時間対応モードで仮想エージェントが割り当てられている営業時間外のすべてのキュー
- エージェントは、次のタイプのキューを表示できません。
  - 営業時間外のキューで、営業時間外の転送が有効になっているものすべて
  - 営業時間外のすべてのキューで、割り当てられたバーチャルエージェントがキューの営業時間内に制限されている

容量超過の回避

容量超過の回避は、現在のエージェントの容量と、セッションが割り当てられているキューの現在の待ち時間に固有のものです。このオプションを有効にするには、次の操作を行います。

Contact Center AI Platform Portal の [設定] > [チャット] > [ウェブとモバイルの回避] で設定します。
[Overcapacity Deflection] がオフになっている場合は、[Overcapacity Deflection] 切り替えボタンを選択してオンにします。
キューのステータスが過剰容量に変わるまでの待ち時間を分単位で設定します。

この時間しきい値の設定は、エンドユーザーに容量超過のメッセージが表示される頻度を設定するためにも使用されます。

Deflection オプション

たらい回しが発生したときにエンドユーザーが利用できるオプションを指定できます。

メール

メールオプションを有効にすると、エンドユーザーをメールに転送できるようになります。営業時間外にエンドユーザーがウェブまたはモバイルのチャットセッションを開始すると、メールを作成するかどうかを尋ねるメッセージが表示されます。

具体的な動作は次のとおりです。

モバイル: メール回避が有効になっていて、推定待ち時間のしきい値が満たされている場合、エンドユーザーが [チャット] オプションをタップすると、デフォルトのメールアプリにリダイレクトされます。アプリのバージョンと iOS/Android のバージョンがメール本文に自動的に挿入され、件名は「[選択したメニューパス] のサポート」になります。または、メールフォームが有効になっている場合があります。詳細については、モバイル SDK とウェブ SDK の統合メールフォームをご覧ください。
ウェブ: エンドユーザーにメールオプションを表示します。クリックすると、メールフォームが表示されます。詳細については、モバイルとウェブの SDK 向けの統合メールフォームをご覧ください。
Keep Waiting（ウェブのみ）: エンドユーザーがオプションをクリックして待機を継続できるようにします。

共同閲覧の同意ダイアログを使用すると、エンドユーザーは最初の共同閲覧セッションリクエストだけでなく、その後のリモート制御リクエストやデバイスへのフルアクセスリクエストにも同意できます。共同閲覧用にウェブ SDK を構成すると、ウェブ SDK はデフォルトの同意ダイアログとセッション終了ボタンを提供します。ただし、cobrowseOptions オブジェクトにオプションのフィールドを追加して、同意モードのダイアログとセッション終了ボタンをカスタマイズできます。これにより、これらの要素のルックアンドフィールを制御できるだけでなく、同意ダイアログの同意ステートメントを要件に合わせて調整することもできます。

同意ステートメントは同意ダイアログに表示されます。同意文言は、エンドユーザーが共同ブラウジングエクスペリエンスでどのような動作が想定されるか、また、どのようなことに同意しているかを示します。共同ブラウジングセッションを記録する場合は、同意文にその旨を記載する必要があります。同意ステートメントを含むカスタマイズされた同意モードダイアログの例については、カスタマイズされた同意モードダイアログのコードサンプルをご覧ください。

手順

共同閲覧用にウェブ SDK を構成し、同意ダイアログをカスタマイズするには、次の手順を行います。

CCAI Platform インスタンスの共同閲覧ドメインとライセンスキーを取得する手順は次のとおりです。
1. 管理者認証情報を使用して CCAI Platform ポータルにログインします。
2. [メニュー] をクリックし、[設定 > デベロッパー設定] をクリックします。
3. [Co-browse] ペインに移動し、切り替えボタンをクリックしてオンにします。
4. [Co-browse Domain] フィールドと [License Key] フィールドの値を保存します。
ウェブ SDK を初期化して、共同閲覧のカスタマイズフィールドを含めるには、次のコードを実行します。
```
var ujet = new UJET({
  // other options
  cobrowseOptions: {
    license: "LICENSE_KEY",
    trustedOrigins: ["CO-BROWSE_DOMAIN"],
    api: "CO-BROWSE_DOMAIN"
    cobrowseRequestHtml: "COBROWSE_REQUEST_HTML",
    remoteControlHtml: "REMOTE_CONTROL_HTML",
    fullDeviceHtml: "FULL_DEVICE_HTML",
    styles: "STYLES",
    sessionControlsHtml: "SESSION_CONTROLS_HTML"
  },
  // other options
})
```
次のように置き換えます。
- LICENSE_KEY: 前の手順で保存したライセンスキー
- CO-BROWSE_DOMAIN: 前の手順で保存した共同ブラウジングドメイン
- COBROWSE_REQUEST_HTML: 画面共有モードの共同ブラウジングセッションの同意ダイアログの HTML コード。例については、カスタマイズされた同意モードのダイアログのコードサンプルの cobrowseRequestHtml をご覧ください。
- REMOTE_CONTROL_HTML: リモートコントロールモードの共同ブラウジングセッションの同意ダイアログの HTML コード。例については、カスタマイズされた同意モードのダイアログのコードサンプルの remoteControlHtml をご覧ください。
- FULL_DEVICE_HTML: デバイス全体モードの共同ブラウジングセッションの同意ダイアログの HTML コード。例については、カスタマイズされた同意ダイアログのコードサンプルの fullDeviceHtml をご覧ください。
- STYLES: 同意モードのダイアログとセッション終了ボタンの要素のスタイル情報。例については、カスタマイズされた同意モードのダイアログのコードサンプルの styles をご覧ください。
- SESSION_CONTROLS_HTML: セッション終了ボタンの HTML コード。例については、カスタマイズされた同意モードのダイアログのコードサンプルの sessionControlsHtml をご覧ください。

ボタンクラス

同意ダイアログには、ユーザーが共同閲覧リクエストを許可または拒否したり、同意ダイアログを閉じたりできるボタンが含まれています。これらのボタンがウェブ SDK と通信するには、次のボタンクラスを対応するボタンタイプに関連付ける必要があります。ウェブ SDK は、コードでこれらのクラスを検索し、それぞれにイベントリスナーを追加します。ボタンのクラスは次のとおりです。

cobrowse-allow: エンドユーザーがリクエストを許可するためのボタン
cobrowse-deny: エンドユーザーがリクエストを拒否するためのボタン
cobrowse-close: エンドユーザーが同意ダイアログを閉じるためのボタン

次のコードサンプルには、カスタマイズされた同意モードのダイアログ、セッション終了ボタン、これらの要素のスタイル情報が含まれています。例の各同意ダイアログには、同意ステートメントが含まれています。3 つの共同ブラウジングモードのそれぞれについて、同意ダイアログのプロパティを以下に示します。

cobrowseRequestHtml: 画面共有モードの同意ダイアログ
remoteControlHtml: リモートコントロールモードの同意ダイアログ
fullDeviceHtml: デバイスのフルモードの同意ダイアログ

"cobrowseOptions": {
    "license": "example_license",
    "trustedOrigins": "[https://example.com]",
    "cobrowseRequestHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n <svg width=\"14\" height=\"14842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n  <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9",
    "remoteControlHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n  </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n  <li>Stop screen sharing at any time</li>\n  <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n</ul>\n</div>\n<div class=\"description\">\n<svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n<span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n</span>\n</div>\n<div class=\"footer\">\n<span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "fullDeviceHtml": "<div class=\"custom-backdrop\">\n <div class=\"cobrowse-confirm-dialog\">\n <div class=\"title\">\n <div></div>\n <span>Co-browse</span>\n <div class=\"cobrowse-close cobrowse-deny\">\n  <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M7 5.35294L2.47059 0.823529C2.01577 0.368707 1.27835 0.368707 0.823529 0.823529C0.368707 1.27835 0.368706 2.01576 0.823529 2.47059L5.35294 7L0.823529 11.5294C0.368707 11.9842 0.368707 12.7216 0.823529 13.1765C1.27835 13.6313 2.01576 13.6313 2.47059 13.1765L7 8.64706L11.5294 13.1765C11.9842 13.6313 12.7216 13.6313 13.1765 13.1765C13.6313 12.7216 13.6313 11.9842 13.1765 11.5294L8.64706 7L13.1765 2.47059C13.6313 2.01577 13.6313 1.27835 13.1765 0.823529C12.7216 0.368707 11.9842 0.368706 11.5294 0.823529L7 5.35294Z\" fill=\"#919191\"/>\n </svg>\n </div>\n </div>\n <div class=\"body\">\n <h2>Get step-by-step live and secure guidance with a Care Expert</h2>\n \n <ul>\n <li>Stop screen sharing at any time</li>\n <li>Personal info automatically hidden</li>\n <li>Only your_company_name screens are shared</li>\n </ul>\n </div>\n <div class=\"description\">\n <svg id=\"loader\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>\n <span>\n Co-browse lets us view your active session in a limited way to give you live, on-screen assistance. We won't be able to view any other applications on your device.\n </span>\n </div>\n <div class=\"footer\">\n <span>\n By tapping accept & continue, you are consenting to allow the your_company_name Expert to view your screen to initiate assisted navigation. <a href=\"https://www.example.com\">View the your_company_name Privacy Policy</a>\n </span>\n  <button class=\"cobrowse-allow\">Accept & continue</button>\n </div>\n </div>\n </div>",
    "styles": ".some-end-button {\n border-radius: 20px;\n background-color: blue;\n color: white;\n display: marquee;\n width: 20rem;\n font-size:200%;\n height: 20rem;\n }\n .custom-backdrop {\n background: rgba(0, 0, 0, 0.1);\n position: fixed;\n z-index: 2147483647;\n bottom: 0;\n top: 0;\n left: 0;\n right: 0;\n }\n .cobrowse-confirm-dialog {\n color: #232424;\n font-family:sans-serif;\n line-height:140%;\n position:fixed;\n background:white;\n border-radius:5px;\n z-index:2147483647;\n top:50px;\n left:50%;\n width:75%;\n max-width:450px;\n transform:translateX(-50%);\n box-shadow:2px 2px 30px rgb(0,0,0,0.08);\n padding: 1.5rem;\n }\n .title {\n text-align:center;\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 125%;\n line-height: 25px;\n padding: 20px;\n border-radius: 5px 5px 0 0;\n }\n \n .description {\n height: 8rem;\n display: flex;\n flex-direction:column;\n justify-content: center;\n align-items: center;\n background-color: #F3F3F3;\n }\n \n #loader {\n height:4rem;\n }\n \n .footer {\n margin-top: 1rem;\n margin-bottom: 1rem;\n display: flex;\n flex-direction: column;\n justify-content: flex-start\n }\n .cobrowse-allow {\n background-color: pink;\n color: white;\n flex-grow: 2;\n height: 3rem;\n }\n #cobrowse-end-button {\n cursor: pointer;\n position: fixed;\n z-index: 2147483647;\n top: 50%;\n left: 25%;\n transform: translateX(-50%);\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #cobrowse-end-button:hover {\n background-color: #92162D;\n }",
    "sessionControlsHtml": " <div class=\"some-end-button\">\n End Session\n </div>"
  }

詳細については、共同ブラウジングを設定するをご覧ください。

複数の言語とビジュアルメッセージのカスタマイズ

新しい CCAI Platform（オプション）メソッドには、複数の言語とビジュアルメッセージのカスタマイズをサポートする 2 つのフィールドがあります。

lang: エンドユーザーが優先言語を選択しなかった場合のデフォルトの言語を示します。このコードは ISO 639-1 に準拠しており、省略するとデフォルトで en になります。
translation: ウェブ SDK は、表示されるテキストの複数の言語をサポートしています。翻訳オブジェクトを使用すると、既存の言語のテキストをカスタマイズしたり、新しい言語のテキストを追加したりできます。例: de、es、fr、ja。

以下は、英語のコピーをカスタマイズする変換オブジェクトの例です。ご覧のとおり、翻訳オブジェクトの最上位のキーは言語コードである必要があります。

// ES6
let translation = `{
  "en": {
    "ujet_start_title": "Hi!"
  },
  "es": {
    "ujet_start_title": "¡Hola!"
  },
  "fr": {
    "ujet_start_title": "Salut!"
  },
  "de": {
    "ujet_start_title": "Hallo!"
  },
  "it": {
    "ujet_start_title": "Ciao!"
  },
  "ja": {
    "ujet_start_title": "こんにちは！"
  },
  "ko": {
    "ujet_start_title": "안녕하세요!"
  },
  "pt": {
    "ujet_start_title": "Olá!"
  },
  "pt-BR": {
    "ujet_start_title": "Olá!"
  },
  "sv": {
    "ujet_start_title": "Hej!"
  }
}`;

// initialize when dom ready
var ujet = new UJET({
  // other fields
  lang: 'en',
  translation: translation
});

カスタマイズメッセージは次のとおりです。

"ujet_ask_phone_number_button_title": "Call Me"
"ujet_ask_phone_number_description": "Provide your phone number below"
"ujet_ask_phone_number_title_instant": "We'll Call You"
"ujet_ask_phone_number_title_scheduled": "Let's Schedule a Call"
"ujet_ask_phone_number_warning": "Your call may be monitored or recorded for training and quality assurance purposes."
"ujet_call_confirm_content": "Your phone should be ringing right about - {0}"
"ujet_call_confirm_start_new_conversation": "Start A New Conversation"
"ujet_call_record_permission_subtitle": "Do you give permission for {0} to record your call for training and quality?"
"ujet_call_record_permission_title": "Permission to Record"
"ujet_channel_chat": "Let's connect you to one of our chat support specialists",
"ujet_channel_instant_call": "Let one of our support specialists give you a call now",
"ujet_channel_menu_chat": "Chat now"
"ujet_channel_menu_email": "Email"
"ujet_channel_menu_instant_call": "Call now"
"ujet_channel_menu_keep_waiting": "Keep Waiting"
"ujet_channel_menu_scheduled_call": "Schedule call"
"ujet_channel_scheduled_call": "Let's schedule a time for a support specialist to call and help you",
"ujet_channel_email": "Please send us an email so we can help",
"ujet_chat_end": "End chat"
"ujet_chat_ended": "This chat has ended"
"ujet_chat_input_placeholder": "Type your message here"
"ujet_chat_leave": "Leave chat"
"ujet_chat_timed_out": "This chat has timed out"
"ujet_chat_title_with_multiple_agent": "Multiple Agents"
"ujet_chat_title_with_one_agent": "Chatting with {0}"
"ujet_chat_title_with_two_agent": "Chatting with {0} & {1}"
"ujet_chat_transfer_failed": "Transfer has failed"
"ujet_chat_transfer_joined": "<b>{0}<\/b> just joined the conversation"
"ujet_chat_transfer_left": "<b>{0}<\/b> just left the conversation"
"ujet_chat_transfer_started_menu": "<b>{0}<\/b> is transferring this chat to another agent..."
"ujet_chat_transfer_started_user": "<b>{0}<\/b> is adding another agent to this conversation..."
"ujet_common_back": "Back"
"ujet_common_cancel": "Cancel"
"ujet_common_end": "End"
"ujet_common_no": "No"
"ujet_common_save": "Save"
"ujet_common_submit": "Submit"
"ujet_common_support": "Support"
"ujet_common_yes": "Yes"
"ujet_deflection_menu_title": "Select from the options below"
"ujet_error_no_available_language": "No Available Language"
"ujet_error_phone_number_invalid": "Please input a valid phone number."
"ujet_file_upload_button": "Choose a file to upload"
"ujet_file_upload_failure_size": "Looks like we couldn't upload. <br> Please try uploading a file <br> that is less than {0}."
"ujet_file_upload_failure_type": "Looks like we couldn't upload. <br> We only accept <br> .JPG, .PNG, or .MP4."
"ujet_file_upload_failure_unknown": "Looks like we couldn't upload. <br> Please try again!"
"ujet_file_upload_subtitle": "Drop files here to upload"
"ujet_file_upload_title": "Upload Files"
"ujet_greeting": "Hi there, how can we help?"
"ujet_instant_call_confirm_content": "Your phone should be ringing shortly"
"ujet_language_chinese": "中文"
"ujet_language_english": "English"
"ujet_language_french": "Français"
"ujet_language_german": "Deutsch"
"ujet_language_italian": "Italiano"
"ujet_language_japanese": "日本語"
"ujet_language_korean": "한국어"
"ujet_language_portuguese": "Português (Portugal)"
"ujet_language_portuguese_brazil": "Português (Brazil)"
"ujet_language_spanish": "Español"
"ujet_language_swedish": "Svenska"
"ujet_menu_title": "Select an option"
"ujet_message_back_in_menu": "Looks like you changed your mind! How else can we help?"
"ujet_message_channel": "How would you like to communicate?"
"ujet_message_chat_deflection_afterhour": "We are currently closed. We look forward to helping you during our normal business hours."
"ujet_message_chat_deflection_default": "We are currently experiencing a high volume of requests with a current wait time of <b>{0}<\/b>. How would you like to reach out?"
"ujet_message_chat_deflection_email": "Please contact us via email: <b><a href="mailto:{0}">{0}<\/a><\/b>."
"ujet_message_chat_deflection_keepwaiting": "Thank you for continuing to wait. The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_deflection_outage": "We are currently experiencing a high volume of request, how would you like to reach out?"
"ujet_message_chat_deflection_recurring": "Thanks for your patience! The remaining wait time is <b>{0}<\/b>."
"ujet_message_chat_restart": "Connecting to your ongoing chat, one moment please..."
"ujet_message_chat_start": "One moment please..."
"ujet_message_queue": "Let's help you with<br /><strong>{0}<\/strong>"
"ujet_rating_feedback_placeholder": "Let us know how we can improve."
"ujet_rating_result_subtitle": "We appreciate your feedback"
"ujet_rating_result_title": "Thank you!"
"ujet_rating_title": "Rate Your Experience"
"ujet_redirect_action_title": "Open this page in a new tab"
"ujet_redirect_url_title": "Visit the page below"
"ujet_schedule_time_description": "Pick a time that works best for you"
"ujet_schedule_time_title": "Let's Schedule a Call"
"ujet_scheduled_call_cancel_cancel": "Cancel"
"ujet_scheduled_call_cancel_content": "You scheduled a support call for<br><b>{0}<\/b> at <b>{1}<\/b>."
"ujet_scheduled_call_cancel_keep": "Keep It"
"ujet_scheduled_call_cancel_title": "Cancel the existing call?"
"ujet_screenshot_init_cancel": "No Thanks"
"ujet_screenshot_init_okay": "Accept"
"ujet_screenshot_init_title": "Screenshot Request"
"ujet_screenshot_install_cancel": "Cancel"
"ujet_screenshot_install_okay": "Install"
"ujet_screenshot_install_title": "Install Chrome Extension"
"ujet_screenshot_take_action": "Take Screenshot"
"ujet_screenshot_take_title": "Click the button below to send a screenshot to the agent"
"ujet_screenshot_verify_cancel": "No"
"ujet_screenshot_verify_okay": "Yes"
"ujet_screenshot_verify_title": "Successfully Installed Chrome Extension"
"ujet_start_title": "Need any help?"
"ujet_tap_to_minimize": "Tap to minimize"
"ujet_time_hour": "hour | hours"
"ujet_time_minute": "minute | minutes"

ロゴとアイコンのカスタマイズ

new UJET(option) メソッドには、ロゴとアイコンのカスタマイズをサポートするフィールドがあります。

logo: ロゴ画像の URL
ウィジェットの位置（パソコンのみに適用）
- right: 右端の位置を px で設定します（デフォルト値は 50）。
- bottom: 下端の位置を px で設定します（デフォルト値は 50）。
アイコンの位置（パソコンのみに適用）
- right: 右端の位置を px で設定します（デフォルト値は 50）。
- bottom: 下端の位置を px で設定します（デフォルト値は 50）。

ロゴとアイコンのカスタマイズの例

new UJET({
  logo: 'https://example.com/logo.svg',
  // widget position
  right: '50px',
  bottom: '150px',

  // launcher position
  launcher: {
    right: '50px',
    bottom: '50px',
  }
})

ロゴとアイコンのカスタマイズ

ロゴとアイコンのカスタマイズ

ロゴとアイコンのカスタマイズ

ロゴとアイコンのカスタマイズ

テーマのカスタマイズ

new UJET(option) メソッドには、テーマのカスタマイズをサポートするフィールドがあります。

style: テーマオブジェクトは、ウィジェットの 4 つの値をサポートします。
- links: ウェブフォントのスタイルシートリンクのリスト
- --primary-font: ウェブ UI 全体に適用される font-family CSS スタイルの値（例: Merriweather）
- --primary-color: ウェブ UI のメインカラーとして使用される 16 進数コード値（例: #51C3C3）
- --link-color: ウェブ UI のリンクの色として使用される 16 進数コード値（例: #51C3C3）
launcher: ランチャーオブジェクトは、ランチャーの 4 つの値をサポートします。
- cssText: ランチャーの CSS スタイルとして使用される CSS 構文
- chatIcon: 通常のチャットアイコンに使用される SVG アイコンの URL
- closeIcon: 閉じるアイコンに使用される SVG アイコンの URL
- style: この分離されたテーマオブジェクトは、ランチャーの 2 つの値をサポートします。
  - --background-color: ランチャーの背景色として使用される 16 進数コード値（例: #E85230）--icon-color: ランチャーアイコンのアイコンの色として使用される 16 進数コード値（例: #FFF）

var ujet = new UJET({
  // ...
  style: {
    links: [
      'https://fonts.example.com/css?family=Droid+Serif:400,700&display=swap',
    ],
    '--primary-font': 'Droid Serif, Georgia, serif',
    '--primary-color': '#F1684A',
    '--link-color': '#F1684A',
  },
  launcher: {
    cssText: '.wrap button {background: #E85230}',
    chatIcon: 'https://example.com/logo.svg',
    closeIcon: 'https://example.com/close.svg',
    style: {
      '--background-color': '#F1684A',
      '--icon-color': '#fff',
    }
  }
});

ランチャーのスタイル

チャネルの選択とメール送信のトラッキング

チャネルの選択とメールの送信をトラッキングできるように、ウェブ SDK は postMessage 関数を使用して、次のデータを含むメッセージを渡します。

application: デバイスのタイプ。
sdk_version: Web SDK のバージョン。
user_agent: ブラウザのバージョン。
company: テナント名。
menu_name: エンドユーザーが選択したキューまたはメニューの名前。
menu_path: エンドユーザーが選択したキューまたはメニューへのパス。
menu_id: エンドユーザーが選択したキューまたはメニューのメニュー ID。
url: エンドユーザーがチャネルを選択したとき、またはメールを送信したときにアクセスしていたウェブページの URL。
timestamp: エンドユーザーが選択を行った時刻。
has_attachments: メールが送信されたときに添付ファイルがあったかどうか（これはメールの送信時にのみ表示され、チャネルの選択時には表示されません）。

メッセージデータは、2 つの属性を持つ ujet オブジェクトに保存されます。1 つは完了したアクションの名前を含む文字列となる action、もう 1 つは前述のデータを含む data です。

メッセージからデータを取得するには、「message」をリッスンするイベントリスナーを作成します。アクションとデータをコンソールに出力する例については、次のセクションで説明します。動作する例は tracking-channel-selection フォルダにあります。

window.addEventListener('message', (e) => {
  if (e.data && e.data.ujet) {
    console.log(`Action: ${e.data.ujet.action}`);
    console.log(`Message Data: ${e.data.ujet.data}`);
  }
});

エージェントのロゴの枠線を非表示にする

エージェントのロゴの枠線を非表示にするには、スタイル属性に「--logo-shadow: none」を追加し、新しい UJET（オプション）で true に設定します。

new UJET({
  // ...
  style: {
    '--logo-shadow': 'none',
  }
});

「新しい画面を開く」アイコンを非表示にする

デザイン上の理由から、ウェブ UI の起動アイコンを非表示にして、代わりにプロアクティブチャットトリガーを使用したり、プログラムでチャットを開始したりすることもできます。起動アイコンを削除するには、新しい UJET（オプション）でランチャー属性を追加して true に設定します。

new UJET({
  // ...
  launcher: false,
});

プログラムでウェブ UI を起動するには、プログラムでウェブ UI を起動するをご覧ください。プロアクティブチャットトリガーでウェブ UI を開始するには、プロアクティブトリガーをご覧ください。

ダイレクトアクセスポイントを使用する

直接アクセスを使用すると、エンドユーザーを特定のキューに直接送信できます。

直接アクセスポイントを使用する手順は次のとおりです。

CCAI Platform ポータルにログインします。
[設定] > [キュー] に移動します。
[use] を切り替えて、ウェブチャネルが有効になっていることを確認します。
ウェブチャネルの [編集] > [表示] に移動します。ウェブ構造が表示されます。
エンドユーザーに直接移動してほしいキューを選択します。
[アクセスポイント] セクションに移動し、[直接アクセスポイントを作成] をクリックします。
次の情報をお知らせください。
1. アクセスポイントタイプを一般に設定します。
2. アクセスポイント名を指定します。これは、[アクセスポイント] リストに表示される名前です。
3. 一般的なアクセスポイントのラベルを指定します。この値は、ウェブ SDK の構成に使用します。
[作成] をクリックします。

ujet.start(options) メソッドを使用して、直接アクセスポイントの名前を渡すことができます。次の例をご覧ください。

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start({ menuKey: '__MENU_KEY__' });
  }
});

プログラムでウェブ UI を閉じる

このステップの実行は任意です。この手順を行わないと、ウェブ UI は自動的に終了して最小化されます。

このステップでは、コンシューマーが Web SDK を閉じようとしたときにコールバック関数を呼び出すことができます。

ujet.on('close', function() {
  // do something here
});

プログラムでウェブ UI を起動する

このステップの実行は任意です。この手順を行わないと、エンドユーザーはウェブ UI 起動アイコンをクリックしてウェブ UI を起動できます。

この手順では、ujet.start(options) メソッドを使用してウェブ UI をプログラムで開くことができます。エンドユーザーが追加のボタンをクリックしてウェブ UI を開くようにしたい場合は、次のようにします。

<button id="launcher">クリックして開く</button>

var ujet = new UJET({
  companyId: "YOUR_COMPANY_ID",
  host: "HOST_URL",
  launcher: false
});

var launcher = document.getElementById('launcher');
launcher.addEventListener('click', function() {
  if (ujet.status === 'open') {
    ujet.close();
  } else {
    ujet.start();
  }
});

ujet.on('ready', function() {
  launcher.textContent = 'ready to talk';
});

ujet.registerHook('loading', function() {
  launcher.textContent = 'loading';
});

ujet.registerHook('open', function() {
  launcher.textContent = 'Click to close';
});

ujet.registerHook('close', function() {
  launcher.textContent = 'Click to open';
});

ujet.on('created', function() {
  ujet.authenticate(getAuthToken);
});

ujet.close() メソッドでウィジェットを閉じたり、ujet.destroy() メソッドでウィジェットを削除したりすることもできます。

プロアクティブトリガー

プロアクティブトリガーを使用すると、ウェブ SDK をトリガーして、エンドユーザーにメッセージをプロアクティブに送信できます。

プロアクティブトリガーを設定する手順は次のとおりです。

CCAI Platform ポータルで、[設定] > [チャット] に移動します。
[Web Proactive Chat Triggers] ペインに移動し、[View triggers] をクリックします。[トリガー] ペインが表示されます。
[トリガーを追加] をクリックします。[名前を選択] ペインが表示されます。
[トリガー名] フィールドに名前を入力し、[次へ] をクリックします。[条件を設定] ペインが表示されます。
条件を設定する手順は次のとおりです。
1. [エンドユーザー] の横で条件を選択します。
2. [キーワードを入力] フィールドに、条件で参照するキーワードを入力し、Enter キーを押します。
3. 入力するキーワードごとに、上記の手順を繰り返します。
4. 別の条件を追加するには、[別の条件を追加] をクリックし、目的の条件タイプをクリックします。
5. 条件の構成オプションを設定します。
6. 別の条件を追加するには、前の 2 つの手順を繰り返します。
7. [次へ] をクリックします。[アクションの定義] ペインが表示されます。
アクションを定義する手順は次のとおりです。
1. [キューの割り当て] で、エンドユーザーを割り当てるチャットキューノードの名前を入力します。この名前のチャットキューが存在する場合は、フィールドの下に名前が太字で表示されます。
2. 太字のチャットキュー名をクリックします。確認ダイアログが表示されます。
3. [OK] をクリックして続行します。
4. [チャットメッセージ] に、トリガーされたチャットに表示するメッセージを入力します。
5. [完了] をクリックします。
6. 新しいトリガーを有効にするには、[ライブ配信を開始] をクリックします。

既存のチケット ID

エンドユーザーの既存のチケットがある場合は、CRM からチケット ID を取得し、ujet.start() を呼び出してウェブ SDK に渡すことができます。

次に例を示します。

yourFunctionToRetrieveTicket()
  .then((existingTicket) => {
    ujet.start({ ticketId: existingTicket });
  });

チケット ID フォルダの例を参考にしてください。

ウェブ SDK インストール ガイド コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

始める前に

使ってみる

ウェブ SDK を初期化する

会社キーを取得する

共同閲覧用にウェブ SDK を構成する

会社のシークレットを使用して認証を初期化する

コンテンツ セキュリティ ポリシー

Internet Explorer 11 のサポート

ユーザーを追跡する

外部 chatbot への転送

署名されていないカスタムデータ

カスタム データの表示を防止する

予約済みのデータ プロパティ

添付ファイルを無効にする

チャットの回避

営業時間外の回避

容量超過の回避

Deflection オプション

メール

共同ブラウジングの同意ダイアログとセッション終了ボタンをカスタマイズする

同意ステートメント

手順

ボタンクラス

カスタマイズされた同意モードのダイアログのコードサンプル

複数の言語とビジュアル メッセージのカスタマイズ

ロゴとアイコンのカスタマイズ

ロゴとアイコンのカスタマイズの例

テーマのカスタマイズ

チャネルの選択とメール送信のトラッキング

エージェントのロゴの枠線を非表示にする

「新しい画面を開く」アイコンを非表示にする

ダイレクト アクセス ポイントを使用する

プログラムでウェブ UI を閉じる

プログラムでウェブ UI を起動する

プロアクティブ トリガー

既存のチケット ID

ウェブ SDK インストールガイド

コンテンツセキュリティポリシー

カスタムデータの表示を防止する

予約済みのデータプロパティ

複数の言語とビジュアルメッセージのカスタマイズ

ダイレクトアクセスポイントを使用する

プロアクティブトリガー