チャットボットの会話を自動的に開始する

[アーティクル]
04/01/2024

重要

Power Virtual Agents 機能は、生成 AI への多大な投資と Microsoft Copilot 全体の統合の強化により、現在 Microsoft Copilot Studio の一部となっています。

ドキュメントやトレーニングコンテンツが更新される間、一部の記事やスクリーンショットで Power Virtual Agents が参照される場合があります。

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

重要

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

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

Web アプリケーション
Teams

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

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

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

重要

このドキュメントに含まれているサンプルコードは、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 を開き、ユーザー定義キャンバスのボットを開きます。
ボットをテストして、ボットから応答を受信していることと、ボットが正常に機能していることを確認します。

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

ボットの既定の挨拶を変更する

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

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

挨拶のトピックを修正したり、新たに作成したりする場合は、ユーザーが人間と話していると思わないように、ボット (または「Virtual Agent」) と話していることを示す何らかの情報を含めるのが最善の方法です。

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

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

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

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

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

警告

ユーザートピックを使用して会話を開始すると、請求されたセッションが増えます。請求されたセッションは、顧客とボットの間の相互作用であり、1 つの消費単位を表します。請求済みセッションは、ユーザートピックがトリガーされたときに開始されます。詳細については、トピック請求されたセッション情報を分析するを参照してください。

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

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