Webchat Playground は、Copilot エージェントの Web チャットの外観と動作のカスタマイズに役立ちます。 直感的なユーザー インターフェイスを使用すると、ブランドの ID に合わせて色、フォント、サムネイルなどを変更できます。 この記事では、Webchat Playground を使用してテーマを作成、管理し、スタイルを JSON または HTML としてエクスポートする方法について説明します。
Webchat Playground UI
Webchat Playground のユーザーフレンドリーなインターフェースは、Web チャット の外観と操作感の定義に役立ちます。 簡単に調整を行い、変更のリアルタイム プレビューを確認できます。
インターフェイスには、次の 3 つの主要な領域があります:
左側のウィンドウには、プライマリ、セカンダリ、アクセントの各色で保存されたテーマが表示されます。 テーマを選択して編集またはプレビューします。
中央のウィンドウには、選択したテーマまたは編集中のテーマのプレビューが表示されます。
右側のウィンドウでは、JSON とコード スニペット タブを切り替えることができます。 JSON ビューは現在のスタイルを JSON 配列で提供します。この配列を既存の Web チャットに貼り付けることができます。 コード スニペット ビューには、スタイルが埋め込まれた Web チャットのサンプル HTML が含まれています。
この UI の例は以下を示しています:
左のペインには、テーマを編集または作成するスタイル エディターが表示されます。
セクションには、一般、送信ボックス、提案ボックス、アバター、バブルが含まれます。 エディターには、該当するすべてのセクションのアクセシビリティ チェックも含まれています。 上部のアクションを保存、削除します。
右のペインでは、サンプル HTML を表示するコード スニペット タブが表示されています。 JSON タブに切り替えて、サンプル JSON を表示します。
定義済みのテーマを使用するか、独自のテーマを作成する
Webchat Playground には、Web チャット エクスペリエンスのさまざまなカスタマイズ オプションを示す定義済みのテーマが用意されています。 これらのテーマは、新しいテーマをデザインする際のスタート地点となります。 また、特定のニーズに合わせて新しいテーマを作成し、今後の使用のために保存することもできます。
テーマをプレビューする
左側のウィンドウ (色付きで表示されている) からテーマを選択して、Web チャット プレビューを開きます。
新しいテーマを作成する
新しいテーマを作成する方法:
- 左ペインで、テーマの追加を選択します。
左ペインはスタイル エディタとなり、そこで変更を加えることができます。 - テーマの名前を入力します。
- 保存を選択します。
テーマの編集
既存のテーマを編集する方法:
- 左側のウィンドウで、テーマ名の横にある鉛筆アイコンを選択します。
- スタイル エディターで変更を加えます。
- 終了したら 保存 を選択します。
テーマの削除
既存のテーマを削除する方法:
- 編集モードでテーマを開きます。
- 上部にある削除 (ごみ箱) アイコンを選択します。
スタイルのエクスポート
エクスポートの方法:
- テーマ セレクターから目的のテーマを選択します。
- 右側のペインで、JSON タブを選択します。
- ビュー内のテキストをすべてコピーし、
styleOptions変数を使用して Web チャット HTM Lに貼り付けます。
HTML スニペットのエクスポート
HTML スニペットをエクスポートする方法:
- テーマ セレクターから目的のテーマを選択します。
- 右側のペインで Code スニペット タブを選択します。
- ビュー内のすべての HTML マークアップを、.html 拡張子を持つファイルとして保存します。
- HTML ファイルを Web サーバーにアップロードします。
サンプル HTML
このサンプル HTML スニペットには、選択したスタイルが適用されたフローティング ウィジェットWeb チャットコントロールが用意されています。
