データ タグを使用してライブ チャット ウィジェットをカスタマイズする
ライブ チャット ウィジェットは、ウィジェット スクリプトのデータ タグを使用してカスタマイズできます。 Customer Service 管理センターの管理アプリからコピーしたチャット ウィジェットのスクリプトでは、次のタグを使用できます。 詳細情報: ウェブサイトやポータルにチャット ウィジェットを埋め込む
| 属性名 | 説明設定 | 例 |
|---|---|---|
data-hide-chat-button |
チャット ウィジェットを実装するときに、既定のチャット ボタンを使用する代わりに、モバイル アプリのエクスペリエンスに合わせたチャット ボタンを追加できます。 このような場合は、このデータ タグを使用して、ライブ チャット ウィジェットで使用可能な既定の [チャットを開く] ボタンを非表示にします。 | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-hide-chat-button="true"></script> |
data-hide-minimize-button |
チャット ウィジェットを実装する場合、デフォルトのチャット内の最小化ボタンを無効にすることができます。 このデータ タグを使用して、ライブ チャット ウィジェットで使用できるデフォルトのチャットを最小化するボタンを非表示にします。 | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-hide-minimize-button="true"></script> |
data-disable-telemetry |
既定では、すべてのウィジェットで利用統計情報収集がオンになっています。 利用統計情報収集を無効にする場合は、このデータ タグの値を true に設定します。 詳細: ライブ チャット ウィジェットの利用統計情報 |
<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-disable-telemetry="true"></script> |
data-render-mobile |
モバイル モードでチャット ウィジェットを開きます。 モバイル デバイスで使用する場合、チャット ウィジェットにヘッダーはありません。 詳細情報: モバイル アプリ用にライブ チャット ウィジェット をカスタマイズする | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-render-mobile="true" ></script> |
data-color-override |
このデータ タグを使用して、既定のチャット ウィジェットのテーマ色を上書きします。 この上書きは、どの管理アプリのカラー テーマ設定よりも優先されます。 | 次に、ウィジェットのテーマ色を青に変更する例を示します。<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-color-override="#0000FF"></script> |
data-font-family-override |
既定のフォント ファミリは Segoe UI です。 このデータ タグを使用して、既定のフォント ファミリをサポートされている別のネイティブ フォントで上書きします。 | 例 1: 既定の Segoe UI フォントを上書きし、フォント ファミリを Arial に設定するには: <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-font-family-override="Arial, Segoe UI"></script> 例 2: Monotype Corsiva のようなカスタム フォント ファミリを追加するには: <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-font-family-override="Monotype Corsiva"></script> |
data-open-in-window |
このデータ タグを使用して、チャット ウィジェットを新しいウィンドウで開きます。 このタグを true または false (既定値) に設定できます。 既定では、チャット ウィジェットは同じブラウザ ウィンドウで開きます。 true に設定すると、チャット ウィジェットを選択すると新しいブラウザー ウィンドウで開きます。 |
<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-open-in-window="true"></script> |
data-suggested-action-layout |
このデータ タグを使用して、推奨されるアクションを垂直に表示します。 既定では、提案されたアクションは水平方向に表示されます。 提案されたアクションを垂直方向に表示するには、このデータ タグの値を stacked として設定します。 |
<script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-suggested-action-layout="stacked"></script> |
data-enable-lcw-autofill |
このデータ タグを使用して、チャット ウィジェットが埋め込みモードでブラウザ ウィンドウを自動入力できるようにします。 | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-enable-lcw-autofill="true"></script> |
data-custom-close-button-text |
このデータ タグを使用して、チャット ウィジェットの閉じるボタンをカスタマイズします。 入力はテキスト文字列で、既定の 「X」 閉じるボタンの代わりに表示されます。 | <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-custom-close-button-text="End Chat"></script> |
data-enable-sso-magic-code |
このデータ タグを使用して、サインイン後にチャットまたはクライアント経由でサイレントに、マジック コードをユーザーに自動的に送信します。 この機能は多要素認証と同様に、フィッシング攻撃を防ぐのに役立ちます。 このタグを true (既定値) または false に設定できます。 false に設定すると、サインイン後、コードはクライアント経由でサイレントに自動的に送信されます。 true に設定すると、サインイン後、手動でチャットに参加するためのマジック コードがユーザーに表示されます。 詳しくは、この記事の ブラウザの追加設定 のセクションを参照してください。 |
この例では、ユーザーによる入力を必要とせずに、サインイン後にマジック コードがクライアントに自動的に渡されます。 <script id="Microsoft_Omnichannel_LCWidget" src="<valid-src>" data-app-id="<valid-app-id>" data-org-id="<valid-org-id>" data-org-url="<valid-org-url>" data-enable-sso-magic-code="false"></script> |
ブラウザの追加設定
ここで説明するブラウザ固有の手順を実行して、マジック コードを自動的に渡します。
クロム ベースのブラウザ
- Microsoft Edge のアドレスバーに 「edge://flags/#third-party-storage-partitioning」 と入力します。 Google Chrome のアドレスバーに 「chrome://flags/#third-party-storage-partitioning」 と入力します。
- 表示されるページで、サードパーティ ストレージのパーティション分割 フラグを 無効 に設定します。
Firefox
- Firefox のアドレス バーに「about:preferences#privacy」と入力します。
- 表示されるページで カスタム を選択し、Cookieで クロスサイト追跡クッキー を選択します。
Safari
設定ダイアログで、機能フラグ を選択し、 ブロードキャスト チャネル オリジン パーティション分割 の選択を解除します。
次の手順
参照
プロアクティブにチャットを開始
ライブ チャット ウィジェットのテレメトリ
モバイル アプリ用にライブ チャット ウィジェットをカスタマイズする
ライブ チャット リファレンス