設定代理程式以在載入時自動開始交談

文章
03/19/2025

您可以設定您的代理程式來與使用者開始交談。您還可以將客製化的問候與代理程式的外觀和風格自訂相結合。

重要

讓代理程式開始交談會顯示在您的分析中，並增加您的工作階段計數。

如果您的代理程式的使用者不與代理程式互動 (例如，他們載入頁面但不向代理程式詢問任何事情)，則該工作階段將標記為未參與的工作階段。這可能會影響您的分析。

Web 應用程式
Teams

預設情況下，使用 Copilot Studio 建立並發佈到網站的代理程式在載入時不會進行問候，而是被動等待使用者開始交談。

但是，您可以使用自訂 CSS 和 JavaScript 程式碼讓代理程式在載入時自動開始交談。例如，您可以讓您的代理程式在代理程式載入時說「嗨，我是虛擬代理程式 Botty」。

首先，您需要部署包含觸發問候語之參數的自訂畫布。根據預設，自訂畫布會呼叫預設的系統問候主題。但是，您可以建立一個新主題當作問候語。您需要將預設的系統問候主題轉移到新主題中。

重要

您可以安裝和使用本文件中所包含的範例程式碼，僅供 Copilot Studio 產品使用。範例程式碼是依「現況」授權，不包含在任何服務等級協定或支援服務中。您必須承擔使用本文件的風險。

Microsoft 不提供任何明示擔保、保證或條件，並排除所有默示擔保，包括適售性、適合特定用途，以及未侵權。

擷取權杖端點

要自訂畫布，無論它是預設畫布還是您連接到的自訂畫布，您都需要擷取代理程式詳細資訊。

在導覽功能表的設定底下，選取管道。
選取行動裝置應用程式。
在權杖端點旁邊，選取複製。

自訂預設畫布 (簡易)

使用一些簡單 CSS 和 JavaScript 樣式選項來設定聊天畫布的外觀。

首先，您需要設定您要部署機器人畫布的位置。

建立並發佈代理程式。

複製並貼上此處顯示的 HTML 程式碼，並將它儲存為 index.html。
您也可以將程式碼複製並貼到 w3schools.com HTML try it editor 中。您仍需新增權杖端點。

<!DOCTYPE html>
<html>
<head>
    <title>Contoso Sample Web Chat</title> 
    <!-- This styling is for the Web Chat demonstration purposes. It is recommended that style is moved to a separate file for organization in larger projects -->
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
        }

        h1 {
            font-size: 16px;
            font-family: Segoe UI;
            line-height: 20px;
            color: whitesmoke;
            display: table-cell;
            padding: 13px 0px 0px 20px;
        }

        #heading {
            background-color: black;
            height: 50px;
        }

        .main {
            margin: 18px;
            border-radius: 4px;
        }

        div[role="form"]{
            background-color: black;
        }

        #webchat {
            position: fixed;
            height: calc(100% - 50px);
            width: 100%;
            top: 50px;
            overflow: hidden;
        }

    </style>

</head>
<body>
    <div>
        <div id="heading">
            <!-- Change the h1 text to change the bot name -->    
            <h1>Contoso Bot Name</h1>
        </div>
        <div id="webchat" role="main"></div>
    </div>    

  <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>

  <script>
        const styleOptions = {

           // Add styleOptions to customize Web Chat canvas
           hideUploadButton: true
        };

        // Add your BOT token endpoint below
        var theURL = "<BOT TOKEN ENDPOINT>";

        var environmentEndPoint = theURL.slice(0,theURL.indexOf('/powervirtualagents'));
        var apiVersion = theURL.slice(theURL.indexOf('api-version')).split('=')[1];
        var regionalChannelSettingsURL = `${environmentEndPoint}/powervirtualagents/regionalchannelsettings?api-version=${apiVersion}`; 

        var directline;
            fetch(regionalChannelSettingsURL)
                .then((response) => {
                    return response.json();
                    })
                .then((data) => {
                    directline = data.channelUrlsById.directline;
                    })
                .catch(err => console.error("An error occurred: " + err));

      fetch(theURL)
            .then(response => response.json())
            .then(conversationInfo => {
                window.WebChat.renderWebChat(
                    {
                        directLine: window.WebChat.createDirectLine({
                            domain: `${directline}v3/directline`,
                            token: conversationInfo.token,
                        }),
                        styleOptions
                    },
                    document.getElementById('webchat')
                );
            })
            .catch(err => console.error("An error occurred: " + err));

    </script>
  </body>
</html>

在您所建立 index.html 檔案的 var theURL = "<YOUR TOKEN ENDPOINT>"; 行中，輸入您的權杖端點。
使用新式瀏覽器 (例如 Microsoft Edge) 開啟 index.html 以在自訂畫布中開啟代理程式。
測試代理程式以確保您收到來自代理程式的回應並且代理程式正常工作。

如果遇到問題，請確保您已發佈代理程式，並且權杖端點已插入正確的位置。權杖端點應該位於 var theURL = "<YOUR TOKEN ENDPOINT>" 行的等號 (=) 後面，並以雙引號 (") 括住。

變更代理程式的預設問候語

index.html 檔案中的程式碼會導致在載入代理程式時自動呼叫主題。根據預設，程式碼會呼叫系統問候主題。您也可以建立新的主題，並將預設的系統問候語轉移至新的主題中。

在兩種情況下，您都像平常一樣對您要呼叫的主題進行變更。

如果您修改或建立新的問候主題，則應該包含某種指示，表明使用者正在與代理程式 (或「虛擬代理程式」) 交談。這樣的指示將幫助使用者理解他們不是在與真人交談。

建議您修改系統問候主題，這樣就不需要編輯 index.html 程式碼。

修改系統問候主題 (建議使用)

在導覽功能表中，選取主題，然後選取問候主題列。
編輯訊息節點中的文字。您也可以新增或刪除其他節點。
選取儲存。
發佈您的代理程式。

現在，您可以透過前往部署代理程式的自訂畫布的網頁來測試您的代理程式。您可以透過自動顯示問候主題來看到機器人開始交談。

建立新使用者主題

警告

使用使用者主題開始交談時，將會增加您的付費工作階段。計費工作階段是顧客與代理程式之間的一次互動，代表一個消費單位。當使用者主題被觸發時，計費工作階段就會開始。如需詳細資訊，請參閱管理訊息容量。

在導覽功能表中，選取主題。
選取新增主題，並為其指定名稱。
新增訊息節點中的文字。
完成編輯訊息時，選取儲存。
在導覽功能表中，選取主題，然後選取問候主題列。
在問候主題上刪除訊息節點。
若要自動將代理程式轉移到使用者主題，請選擇新增節點 (+) 以新增節點，然後選擇前往其他主題。
在彈出式功能表中，選取您在上述所建立的使用者主題。
完成編輯訊息時，選取儲存。
發佈您的代理程式。

現在，您可以透過前往部署代理程式的自訂畫布的網頁來測試您的代理程式。您可以看到代理程式透過自動顯示新主題來開始交談。

分享方式：

設定代理程式以在載入時自動開始交談

擷取權杖端點

自訂預設畫布 (簡易)

變更代理程式的預設問候語

修改系統問候主題 (建議使用)

建立新使用者主題

變更代理程式的預設問候語

意見反映

更多資源