エージェント会話を自動的に開始する

[アーティクル]
12/09/2024

エージェントを設定して、ユーザーとの会話を開始できます。カスタマイズされた挨拶と、エージェントの外観と雰囲気のカスタマイズを組み合わせることもできます。

重要

エージェントが会話を開始すると、それが分析に表示され、セッション数が増加します。

エージェントのユーザーがエージェントとエンゲージしない場合 (たとえば、ページをロードしてもエージェントに何も質問しない場合)、セッションはエンゲージされていないセッションとしてマークされます。これは分析に影響を与える可能性があります。

Web アプリケーション
Teams

デフォルトでは、 Copilot Studio で作成され Webサイトに公開されたエージェントは、挨拶なしで読み込まれ、ユーザーが会話を開始するのを受動的に待機します。

ただし、カスタム CSS およびJavaScriptコードを使用すると、エージェントが読み込まれたときにエージェントが自動的に会話を開始するようにすることができます。たとえば、エージェントが読み込まれるとすぐに、エージェントに「こんにちは、私は仮想オペレーターのBottyです」と言わせることができます。

最初に、挨拶をトリガーする引数を含むカスタムキャンバスをデプロイする必要があります。既定では、カスタムキャンバスは既定のシステムグリーティングトピックを呼び出します。挨拶として使用できる新しいトピックは作成できます。既定のシステムの挨拶トピックを新しいトピックに転送する必要があります。

重要

このドキュメントに含まれるサンプルコードは、 Copilot Studio 製品で使用するためにのみインストールして使用できます。サンプルコードは "現状のまま" ライセンスされており、任意のサービスレベル契約やサポートサービスから除外されています。お客様は、その使用に関するリスクを負うものとします。

Microsoft は、明示的な責任や保証責任または条件を一切負いません。また商品性、特定目的に対する適合性、非侵害性に関するいかなる黙示的保証も除外します。

トークンエンドポイントを取得する

キャンバスをカスタマイズするには、それがデフォルトのキャンバスであっても、接続で作成したカスタムキャンバスであっても、エージェントの詳細を取得する必要があります。

ナビゲーションメニューの設定で チャネル を選択します。
モバイルアプリを選択します。
トークンエンドポイントの隣で、コピーを選択します。

既定のキャンバスをカスタマイズする (簡易)

いくつかの簡易な CSS および JavaScript スタイルオプションを使用して、チャットキャンバスの外観を構成します。

最初に、ボットキャンバスを展開する場所を構成する必要があります。

エージェントを作成して公開します。

次の HTML コードをコピーして貼り付け、index.html と名前を付けて保存します。
次のコードもコピーして、w3schools.com HTML 試用版エディターに貼り付けることができます。トークンのエンドポイントを追加する必要があります。

<!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>"; の行にトークンエンドポイントを入力します。
最新のブラウザ (例: ) を使用して index.html Microsoft Edge を開き、カスタムキャンバスでエージェントを開きます。
エージェントをテストして、エージェントからの応答を受信していること、およびエージェントが正しく動作していることを確認します。

問題が発生した場合は、エージェントを公開したこと、およびトークンエンドポイントが正しい場所に挿入されていることを確認してください。トークンのエンドポイントは var theURL = "<YOUR TOKEN ENDPOINT>" の行の等号 (=) の後にあり、二重引用符 (") で囲む必要があります。

エージェントのデフォルトの挨拶を変更する

index.html ファイル内のコードにより、エージェントがロードされるとトピックが自動的に呼び出されます。既定では、コードがシステムグリーティングトピックを呼び出します。新しいトピックを作成して、既定のシステムグリーティングトピックをその新しいトピックに転送することもできます。

どちらの場合も、通常どおり、呼び出すトピックに変更を加えます。

トピックという新しい挨拶を変更または作成する場合は、ユーザーがエージェント (または「仮想オペレーター」) と会話していることを示す何らかの表示を含める必要があります。このような表示は、ユーザーが人間と話しているのではないことを理解するのに役立ちます。

index.html コードを編集する必要がないように、システムグリーティングトピックを変更することをお勧めします。

システムグリーティングトピックを変更する (推奨)

ナビゲーションメニューで トピック を選択し、あいさつ トピック行を選択します。
メッセージ ノード内のテキストを編集します。追加のノードを追加または削除することもできます。
保存を選びます。
エージェントを公開してください。

エージェントのカスタムキャンバスをデプロイしたWebページにアクセスして、エージェントをテストできるようになりました。ボットが挨拶トピックを自動的に表示して会話を開始するのがわかります。

新しいユーザートピックを作成します

警告

ユーザートピックを使用して会話を開始すると、請求されたセッションが増えます。課金セッションは、顧客とエージェント間のやり取りであり、1消費単位を表します。請求セッションは、ユーザートピックがトリガーされたときに開始されます。詳細については、課金されたセグメントの表示 (プレビュー) を参照してください。

ナビゲーションメニューで、トピック を選択します。
新しいトピックを選択し、名前を付けます。
メッセージ ノード内のテキストを追加します。
メッセージの編集が完了したら、保存を選択します。
ナビゲーションメニューで トピック を選択し、あいさつ トピック行を選択します。
挨拶トピックのメッセージノードを削除します。
エージェントをユーザーに自動的に転送するには、トピック, 選択 ノードを追加 (+) してノードを追加し、次に別のトピックに移動します。
ホップアップメニューで、上記で作成したユーザートピックを選択します。
メッセージの編集が完了したら、保存を選択します。
エージェントを公開してください。

エージェントのカスタムキャンバスをデプロイしたWebページにアクセスして、エージェントをテストできるようになりました。エージェントが新しいトピックを自動的に表示して会話を開始していることがわかります。

次の方法で共有