次の方法で共有

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

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

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

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

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

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

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

ポータル開発者 - 標準で用意されたスクリプトベースのUIをカスタマイズする

ポータル開発者オプションを使用すると、チャット ウィジェットの UI をカスタマイズできますが、Copilot Service 管理センターの既定の機能設定は変更されません。 カスタマイズするには、すぐに使用できるウィジェットを JavaScript 関数に接続する "data-customization-callback" スクリプトを使用できます。 この関数には、 Omnichannel Live Chat Widget UI Components ライブラリと同じ優先順位を持つチャット コンポーネントに対する CSS スタイルのカスタマイズを含めることができます。

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

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

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

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

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

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

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

設定されたライブ チャット ウィジェットの チュートリアル ビデオ をご覧ください。

Web エンゲージメント オーケストレーションを使用してウィジェットをカスタマイズする

Web エンゲージメント オーケストレーションを使用すると、ページの JavaScript から管理センターに構成オーバーライドを移動できます。 詳細については、「 1 つのタグを使用して Web サイト間でチャット ウィジェットをデプロイする」を参照してください。

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

次のセクションの情報を使用して、独自のウィジェットを作成します。

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

オムニチャネル Live Chat ウィジェット UI コンポーネント ライブラリには、再利用可能な React コンポーネントのフレームワークが用意されています。 コンポーネントは Fluent UI ライブラリを使用してビルドされます。 オムニチャネル Live Chat ウィジェット UI コンポーネント ライブラリの詳細を確認します。

Omnichannel Chat SDK

Omnichannel Chat SDK は、ライブ チャット ウィジェットに機能を追加するためのチャット方法と機能を提供するオープンソース パッケージです。 オムニチャネル チャット SDK の詳細を確認します。

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

オムニチャネル チャット SDK の最新バージョンをインストールしたら、オムニチャネル チャット SDK メソッドを使用して、およびオムニチャネル ライブ チャット ウィジェット UI コンポーネントの基本的な CSS スタイルを編集して、ライブ チャット ウィジェットをカスタマイズします。

注

オムニチャネル チャット SDK は、オムニチャネル Live Chat Widget UI コンポーネント ライブラリをインストールするための前提条件です。

モバイル アプリ用にライブ チャット ウィジェットをカスタマイズする
スタートチャット
closeChat
lcw:closeチャット
lcw:スレッド更新[lcw:threadUpdate]
lcw:チャット取得[lcw:chat]
lcw:チャットキュー

  • Last updated on