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

2025-06-17

ユーザーとの会話を開始するようにエージェントを構成できます。カスタマイズされた挨拶をエージェントのルックアンドフィールのカスタマイズと組み合わせることもできます。

重要

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

エージェントのユーザーがエージェントと連携していない場合 (たとえば、ページを読み込むが、エージェントに何も要求しない)、セッションは未従事セッションとしてマークされます。この動作は、分析に影響する可能性があります。

Web アプリケーション
チーム

既定では、Copilot Studio およびウェブサイトに公開で作成されたエージェントは挨拶なしで読み込まれ、ユーザーが会話を始めるのを受動的に待ちます。

ただし、カスタム CSS と、エージェントが読み込まれたときに自動的にエージェントに会話を開始させる JavaScript コードを使用することができます。たとえば、エージェントが読み込まれるとすぐに、エージェントに「こんにちは、私はボティ、Virtual Agent です」と言わせることができます。

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

重要

この記事に含まれるサンプルコードは、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 Web Chat demonstration purposes. For larger projects, we recommend you move style to a separate file -->
    <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 the token endpoint for your agent below
        var theURL = "<YOUR 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 ファイル内のコードにより、エージェントの読み込み時にトピックが自動的に呼び出されます。既定では、このコードは Greeting トピックを呼び出します。新しいトピックを作成し、既定のあいさつトピックをその新しいトピックに転送することもできます。

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

Greeting トピックを変更するか、新しいトピックを作成する場合は、ユーザーがエージェント (または "仮想エージェント") と通信していることを示す必要があります。このような表示は、ユーザーが人間と話していないことを理解するのに役立ちます。

index.html コードを編集する必要がないように、定義済みの Greeting トピックを変更することをお勧めします。

定義済みのあいさつ文トピックを変更する (推奨)

エージェントの [トピック] ページに移動し、 Greeting トピックを選択します。
メッセージ ノード内のテキストを編集します。ノードを追加または削除することもできます。
保存を選択します。
エージェントを公開します。

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

新しいカスタムトピックを作成する

警告

カスタムトピックを使用して会話を開始すると、課金されるセッションが増えます。請求されたセッションは、顧客とエージェントの間の相互作用であり、1 つの消費単位を表します。課金されるセッションは、カスタムトピックがトリガーされたときに開始されます。詳細については、メッセージ容量の管理を参照してください

エージェントの トピック ページに移動します。
[トピックの追加] を選択します>空白から。
新しいトピックの名前を入力します。
メッセージノードを追加し、目的のメッセージで構成します。
メッセージの編集が完了したら 、[保存] を選択します。
[ トピック ] ページにもう一度移動し、[Greeting]\( あいさつ \) トピックを選択します。
Greeting トピックからすべてのメッセージノードを削除します。
エージェントを新しいトピックに自動的に転送するには、宛先の新しいトピックを含むリダイレクトノードを追加します。
「保存」を選択し、エージェントを公開します。

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

次の方法で共有

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

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

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

エージェントの既定の挨拶を変更する

定義済みのあいさつ文トピックを変更する (推奨)

新しいカスタム トピックを作成する

フィードバック

その他のリソース

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

新しいカスタムトピックを作成する