エージェントをカスタマイズする

Web サイト用のエージェントを作成すると、ホスティング サイトのコンテンツを使用して応答が生成されます。 Microsoft Dataverse はサイト コンテンツと構成済みテーブルのインデックスを作成します。 Copilot Studio は、インデックスが作成されたコンテンツとテーブルを要約して応答を生成します。

認証されたサイトのユーザーは、自身の Web 上のロールに沿った、カスタマイズされた要約された回答を得ることができます。 以下の手順でデータを改良し、認証済みサイト ユーザーのコンテンツ モデルを改善します:

1. Power Pages で、ワークスペースの設定に移動します。

2. Copilot 配下で、 エージェントの追加を選択します。

3. データの調整 の下で、変更 を選択します。

4. テーブルを選択またはクリアするには テーブル検索コントロールの選択 を選択します。

   • このセクションでは複数のテーブルを選択できます。 選択したすべてのテーブルがサイトで使用されていることを確認してください。
   • 以降のページでは、テーブルが使用されているページを指定して、引用 URL を生成します。

5. 次へを選択します。

6. テーブルの選択 の下で、選択する列とページ リンクを含むテーブルを選択します。 テーブルは、少なくとも 1 つの複数行の列がある場合にのみ表示されます。

   一度に選択できるテーブルは 1 つだけです。

7. ページ リンクの追加 の下で、テーブルが使用されているページを選択します。

   ヒント

   • 正しいページを選択する必要があります。 そうでない場合、ボットは回答に対して誤った引用 URL を提供します。
   • ページでは、クエリ文字列パラメータとして id を使用する必要があります。 他のパラメータ名を使用すると、引用 URL が正しく機能しません。

8. 列の選択で、ページで使用する列を選択します。 複数行テキストを含む列のみを選択できます。

9. 次へを選択し、選択内容を確認します。

10. 保存 を選択し、変更を送信します。

エージェントのデザインをカスタマイズする

既定のカスケーディング スタイルシート (CSS) クラスを上書きすることで、エージェントのスタイルをカスタマイズできます。 これを行うには、ヘッダー テンプレートに style 要素を追加し、次の手順に従って値を上書きします。

1. サイトのコード エディターを開きます。

2. エクスプローラーのナビゲーションで、Web-テンプレート フォルダを展開します。

3. Header.html を開きます。

4. styleまたはscript要素を追加します。

   

5. 適切なスタイルをオーバーライドします。

エージェント ウィジェット

エージェントが折りたたまれたアイコン:

.pva-embedded-web-chat-widget {
    background-color: #484644;
    border: 1px solid #FFFFFF;
}

ヒント:

.pva-embedded-web-chat-widget .pva-embedded-web-chat-widget-tooltip-text {
    background: white;
    color: #323130;
}

アイコン画像:

<script>
document.addEventListener('DOMContentLoaded', function() {
   var buttons = document.getElementsByClassName("pva-embedded-web-chat-widget");
    buttons[0].innerHTML = '<img src="<image URL>" height= "70px" width = "70px" />';
}, false);
</script>

エージェント要素

このセクションの CSS サンプルは、次のスクリーンショットの各要素をカスタマイズする方法を示しています。

1. ヘッダー

.pages-chatbot-header
{
    background: #77a145;
    color: #ffffff;
}

2. 高さと幅の設定

.pva-embedded-web-chat[data-minimized='false'] {
    height: 80%;
    width: 25%;
    max-width: 400px;
    max-height: 740px;
}

3. エージェントウィンドウ

.pva-embedded-web-chat-window {
    background: white;
}

4.エージェントからのバブル

背景の色:

.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
    background-color: #77a145 !important;
    border-radius: 5px !important;
}

テキストの色:

.webchat__bubble:not(.webchat__bubble--from-user) p {
    color: #ffffff;
}

5. バブルからのユーザー

背景の色:

.webchat__bubble.webchat__bubble--from-user .webchat__bubble__content {
    background-color: #797d81 !important;
    border-radius: 5px !important;
}

テキストの色:

.webchat__bubble.webchat__bubble--from-user p {
    color: #ffffff;
}

6. 参照リンク

.webchat__link-definitions__badge {
    color: blue !important;
}

.webchat__link-definitions__list-item-text {
    color: blue !important;
}

.webchat__render-markdown__pure-identifier {
    color: blue !important;
}

7.プライバシーメッセージ設定

背景の色:

.pva-privacy-message {
    background: #797d81;
}

テキストの色:

.pva-privacy-message p {
    color: #ffffff;
    font-size: 12px;
    font-weight: 400;
}

関連情報

• Power Pages の AI 搭載、Copilot 機能の概要
• Bing 検索を使用して公開データから回答を生成する
• 責任ある AI: サイト エージェントに関するよくあるご質問