次の方法で共有


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

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

重要

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

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

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

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

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

重要

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

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

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

キャンバスをカスタマイズするには、既定のキャンバスまたは接続するユーザー定義キャンバスでも、コパイロットの詳細を取得する必要があります。

  1. ナビゲーション メニューの 設定チャネル を選択します。

  2. モバイル アプリを選択します。

    モバイル アプリ チャネル タイルのスクリーンショット。

  3. トークン エンドポイントの隣で、コピーを選択します。

    エンドポイント トークン id のスクリーンショット。

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

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

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

  1. コパイロットを作成および公開 します。

  2. 次の 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>
    
  3. 作成した index.html ファイルで、var theURL = "<YOUR TOKEN ENDPOINT>"; の行にトークン エンドポイントを入力します。

  4. 最新のブラウザー (例: Microsoft Edge) を使用して index.html を開き、ユーザー定義キャンバスのコパイロットを開きます。

  5. コパイロットからの応答を受信していること、および コパイロットが正しく動作していることを確認するために、コパイロットをテストします。

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

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

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

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

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

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

  1. ナビゲーション メニューで トピック を選択し、あいさつ トピック行を選択します。

    グリーティング トピックが強調表示されたトピック ページのスクリーンショット。

  2. メッセージ ノード内のテキストを編集します。 追加のノードを追加または削除する こともできます。

  3. 保存 を選びます。

  4. コパイロットを公開します

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

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

警告

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

  1. ナビゲーション メニューで、トピック を選択します。

  2. 新しいトピックを選択し、名前を付けます。

  3. メッセージ ノード内のテキストを追加します。

  4. メッセージの編集が完了したら、保存を選択します。

  5. ナビゲーション メニューで トピック を選択し、あいさつ トピック行を選択します。

  6. 挨拶トピックのメッセージノードを削除 します。

  7. コパイロットをユーザー トピックに自動的に転送するには、ノードの追加 (+) を選択してノードを追加し、別のトピックに移動します。

  8. ホップアップ メニューで、上記で作成したユーザー トピックを選択します。

  9. メッセージの編集が完了したら、保存を選択します。

  10. コパイロットを公開します

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