次の方法で共有

カスタム ライブチャットを開発するウィジェット

  • [アーティクル]

Microsoft は、Dynamics 365 Customer Service のアカウントに添付できるカスタムライブチャット ウィジェットを作成するオプションを提供しています。 カスタムライブ チャット ウィジェットの各コンポーネントは、機能性とユーザー インターフェイスの両方でカスタマイズすることができます。

要件と結果に応じて、次のいずれかのオプションを使用してチャット ウィジェットをカスタマイズできます。

  • カスタマイズできるライブ チャット ウィジェット 2.0 を使用する
  • 独自のウィジェットを開発する

カスタマイズできるライブ チャット ウィジェット 2.0 を使用する

カスタマイズできるライブ チャット ウィジェット 2.0 を使用すると、フォント、色、スタイルなど、ウィジェットのすべての要素を編集して、ウィジェットをブランド イメージに合わせることができます。 カスタマイズされたウィジェットは、信頼と信用を育み、ブランドを際立たせ、ポジティブで感情的なつながりを育み、顧客が製品に与える価値を高めるのに役立ちます。

新しいライブ チャット ウィジェット 2.0 は、オムニチャネル チャット SDK とライブ チャット ウィジェット UI コンポーネント ライブラリに基づいて構築されています。

ポータル開発者—すぐに使えるスクリプトベースの UI をカスタマイズする

ポータル開発者オプションを使用して、チャット ウィジェット UI のパーソナライズ設定を行なうことができますが、Customer Service 管理センターですぐに利用できる機能設定は変更されません。 カスタマイズするには、すぐに使えるウィジェットを JavaScript 関数に接続する "data-customization-callback" スクリプトを使用できます。 関数には CSS スタイル カスタマイズを、オムニチャネル ライブ チャット ウィジェット UI コンポーネント ライブラリ と同じ参照元のあるチャット コンポーネントに含めることができます。

ライブ チャット ウィジェット スクリプトを編集して、ライブ チャット ウィジェット 2.0 を有効にする

ライブ チャット ウィジェット 2.0 とスクリプトベースのカスタマイズを使用するには、すぐに使えるライブ チャット ウィジェット 2.0 のコード スニペットを次のように変更します。

  1. Customer Service 管理センターでチャット ワークストリームを開き、ライブ チャット ウィジェット 2.0 スクリプトのコピー を選択してコード スニペットをコピーします。
  2. すべてのコンポーネント スタイルを使用して、新しい JavaScript 関数を作成します。 詳細情報: オムニチャネル チャット ウィジェット
  3. "v2" をスクリプト属性の後に追加します。
  4. "data-customization-callback" を追加し、JavaScript 関数を参照します。

更新されたコード スニペットは次のようになります。

カスタマイズされたライブ チャット ウィジェット コードのスクリーンショット。

次は、サイズを大きくするようにカスタマイズされたチャット ウィジェット 2.0 のスクリーンショットの例です。

ライブ チャット ウィジェット 2.0 のサンプル スクリーンショット。

ライブ チャット ウィジェット設定に関する チュートリアル を見る。

独自のウィジェットを開発する

以下のセクションの情報を使用して、独自のウィジェットを作成してください。

オムニチャネル ライブチャット ウィジェット UI コンポーネント ライブラリ

オムニチャネル ライブ チャット ウィジェット UI コンポーネント ライブラリは、再利用可能な React コンポーネントのフレームワークを提供します。 これらのコンポーネントは、流暢な UI ライブラリ で構築します。 オムニチャネル ライブ チャット ウィジェット UI コンポーネントの詳細について。

オムニチャネル チャット SDK

オムニチャネル チャット SDK は、ライブ チャット ウィジェットの機能を追加するためのチャット メソッドと機能を提供するオープンソースのパッケージです。 オムニチャネルチャットSDKの詳細について。

ライブチャットをカスタマイズするウィジェット

オムニチャネル チャット SDK をインストールした後、オムニチャネル チャット SDK を使用して、オムニチャネル チャット ライブ チャット ウィジェット UI の基本 CSS スタイルを編集してライブ チャット ウィジェットをカスタマイズすることができます。

注意

オムニチャネル チャット SDK は、オムニチャネル ライブチャット ウィジェット UI コンポーネント ライブラリのインストールの前提条件です。

参照

モバイル アプリ用にライブ チャット ウィジェットをカスタマイズする
startChat
closeChat
lcw:closeChat
lcw:threadUpdate
lcw:chatRetrieved
lcw:chatQueued