Déclenchement de messages à partir des paramètres d' URL

Comment fonctionne le déclenchement automatique?

Lorsque le widget de chat a fini de se charger, le script exécute les actions suivantes :

• Attend un court instant pour s'assurer que le widget de chat termine son initialisation.

• Lit les paramètres de requête de la page actuelle URL, par exemple. https://yoursite.com?data=hello

• Envoie automatiquement la valeur extraite sous forme de message instantané.

Cette technique est utile pour préremplir les conversations, créer des liens profonds vers des flux de discussion spécifiques ou automatiser les interactions contextuelles.

Étape 1 : Interroger les données à envoyer à l'instance de chat

Créez la onChatLoad fonction à exécuter une fois le widget de chat entièrement chargé. Il effectue les actions suivantes :

• Utilise un pageload indicateur pour garantir que la logique automatique ne s'exécute qu'une seule fois.

• Attend 5 secondes pour s'assurer que l'interface utilisateur du widget de chat est initialisée.

• Extrait le paramètre de requête de données de l' URL e à l'aide de URLSearchParams l'API.

• Envoie la valeur extraite dans le chat à l'aide de instance.send().

• Stocke l'instance de chat globalement si vous en avez besoin plus tard.

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;
}

Étape 2 : Testez votre script

Ajoutez le script à votre page Web et incluez un paramètre de requête de données dans l' URL. Par exemple :

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

Une fois le widget de chat chargé, il envoie automatiquement le message suivant via la instance.send() fonction.

generate a sample email

Script complet

Utilisez le script suivant pour appliquer le code de ce tutoriel à votre widget de chat :

<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 () {
            wxoLoader.init();
        });
        document.head.appendChild(script);
    });
</script>