自動的にコパイロットの会話を開始する

[アーティクル]
05/07/2024

コパイロットがユーザーと会話を開始するように構成できます。カスタマイズされた挨拶をコパイロットの外観のカスタマイズと組み合わせることもできます。

重要

コパイロットに会話を開始させることは、分析に表示され、セッション数を増やします。

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

Web アプリケーション
Teams

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

ただし、カスタム CSS と JavaScript コードを使用して、コパイロットが読み込まれたときに自動的に会話を開始させることができます。たとえば、コパイロットが読み込まれるとすぐに、コパイロットに「こんにちは、私は Botty、V仮想オペレーターです」と言わせることができます。

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

重要

このドキュメントに含まれているサンプルコードは、Microsoft 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>"; の行にトークンエンドポイントを入力します。
最新のブラウザー (例: Microsoft Edge) を使用して index.html を開き、ユーザー定義キャンバスのコパイロットを開きます。
コパイロットからの応答を受信していること、およびコパイロットが正しく動作していることを確認するために、コパイロットをテストします。

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

コパイロットの既定の挨拶を変更する

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

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

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

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

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

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

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

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

警告

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

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

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

次の方法で共有