URL パラメータからのメッセージのトリガー

自動トリガーの仕組み

チャットウィジェットの読み込みが完了すると、スクリプトは以下のアクションを実行します：

• チャットウィジェットの初期化が完了するのを確実にするため、短時間待機します。

• 現在のページ URL からクエリパラメータを読み取ります。例えば https://yoursite.com?data=hello、

• 抽出した値を自動的にチャットメッセージとして送信します。

この技術は、会話の事前入力、特定のチャットフローへのディープリンク、または文脈認識型インタラクションの自動化に有用です。

ステップ1: チャットインスタンスに送信するデータをクエリする

チャットウィジェットが完全に読み込まれた後に実行する関数 onChatLoad を作成する。 以下の動作を行います：

• フラグ pageload を使用して、自動ロジックが一度だけ実行されることを保証します。

• チャットウィジェットのUIが初期化されるのを確実にするため、5秒間待機します。

• URLURLSearchParams からデータクエリパラメータをAPIを使用して抽出します。

• . instance.send()を使用して、抽出された値をチャットに送信します。

• 後で必要になる場合に備え、チャットインスタンスをグローバルに保存します。

function onChatLoad(instance) {
    
    let pageload = false;
    if (!pageload){
        setTimeout(() => {
            const params = new URLSearchParams(window.location.search);
            const data = params.get('data');
            if (data) {
                instance.send(data);
            }
        }, 5000)
        pageload = true;
    }
    chatInstance = instance;
}

ステップ2: スクリプトをテストする

スクリプトをウェブページに追加し、 URL にデータクエリパラメータを含めてください。 例:

https://mywebsite.com/deep-link?data=generate%20a%20sample%20email

チャットウィジェットが読み込まれると、自動的に以下のメッセージが 関数 instance.send() を通じて送信されます。

generate a sample email

完全なスクリプト

以下のスクリプトを使用して、このチュートリアルのコードをチャットウィジェットに適用してください：

<script>
function onChatLoad(instance) {

    let pageload = false;

    if (!pageload) {
        setTimeout(() => {
            const params = new URLSearchParams(window.location.search);
            const data = params.get('data');
            if (data) {
                instance.send(data);
            }
        }, 10000)
        pageload = true;
    }
    chatInstance = instance;
}

window.wxOConfiguration = {
    orchestrationID: "your-orgID_orchestrationID",
    hostURL: "https://dl.watson-orchestrate.ibm.com",
    rootElementID: "root",
    showLauncher: false,
    deploymentPlatform: "ibmcloud", // Required for IBM Cloud 
    crn: "your-org-crn", // Required for IBM Cloud. Learn how to get the CRN in https://cloud.ibm.com/docs/key-protect?topic=key-protect-retrieve-instance-ID&interface=ui
    chatOptions: {
        agentId: "your-agent-id",
        agentEnvironmentId: "your-agent-env-id",
        onLoad: onChatLoad // Callback function when the chat widget is loaded
    },
};
setTimeout(function () {
    const script = document.createElement('script');
    script.src = `${window.wxOConfiguration.hostURL}/wxochat/wxoLoader.js?embed=true`;
    script.addEventListener('load', function () {
        const chatInstance = wxoLoader.init();

    });
    document.head.appendChild(script);
}, 0);
</script>