共用方式為

自訂您的代理程式

當您為網站建立 Agent 時，它會使用受控網站的內容來產生回應。 Microsoft Dataverse 索引網站內容和設定表。 Copilot Studio 會匯總索引內容和資料表以產生回應。

經過驗證的網站使用者可以獲得與其網路角色相符的客製化、匯總式答案。 透過以下步驟最佳化資料，改善經過驗證的網站使用者的內容模型：

  1. 在 Power Pages 中，前往設定工作區。

  2. 在 Copilot 下，選擇新增 Agent。

  3. 在精簡資料下，選擇進行變更。

  4. 選擇選擇資料表尋找控制項來選擇或清除表。

    • 您可以在此區段中選擇多個資料表。 確保您選擇的每個表都在網站上使用。
    • 在後續頁面上，指定使用資料表產生參考 URL 的頁面。

  5. 選取下一步。

  6. 在選擇資料表下，然後選擇包含要選擇的欄和頁面連結的資料表。 只有當資料表至少有一個多行列時，才會顯示該表。

    您一次只能選取一個資料表。

  7. 在新增頁面連結下，選擇使用該資料表的頁面。

    注意

    • 確保您選擇正確的頁面。 否則，機器人會提供錯誤的答案參考 URL。
    • 頁面必須使用 id 作為查詢字串參數使用。 如果您使用任何其他參數名稱，參考 URL 將無法正常運作。

  8. 在選擇資料欄下，選擇頁面上使用的資料欄。 僅具有多行文字的資料欄可供選擇。

  9. 選取下一步，然後檢閱您的選擇。

  10. 選取儲存以提交變更。

自訂 Agent 外觀

您可以透過覆寫預設的層疊樣式表 (CSS) 類別來自訂 Agent 的樣式。 為此，請在標題範本中新增 style 元素，並按照下列步驟覆寫其值：

  1. 開啟網站的程式碼編輯器。

  2. 在 Explorer 導航中，展開網頁模板資料夾。

  3. 打開 Header.html。

  4. 新增您的 style 或 script 元素。

    Visual Studio 的螢幕擷取畫面，突顯了 Web 範本資料夾、Header.html檔案和帶有 CSS 選擇器的樣式元素。

  5. 覆寫適當的樣式。

Agent 小工具

聊天機器人小工具的螢幕擷取畫面。

Agent 摺疊圖示：

.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>

注意

將 <image URL> 替換為實際的影像來源 URL。 使用外部路徑或將影像上傳到 Web 檔案表並使用其 URL。

Agent 元素

本節中的 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. Agent 視窗

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

4. Agent 的泡沫

背景顏色：

.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;
}

.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;
}
  • Last updated on