Activación de mensajes a partir de parámetros de URL

Cómo funciona el disparo automático

Cuando el widget de chat termina de cargarse, el script ejecuta las siguientes acciones:

• Espera un breve periodo de tiempo para garantizar que el widget de chat finalice su inicialización.

• Lee los parámetros de consulta de la página actual URL, por ejemplo. https://yoursite.com?data=hello

• Envía automáticamente el valor extraído como un mensaje de chat.

Esta técnica es útil para rellenar previamente conversaciones, crear enlaces profundos a flujos de chat específicos o automatizar interacciones sensibles al contexto.

Paso 1: Consultar los datos que se enviarán a la instancia de chat

Crea la onChatLoad función que se ejecutará después de que el widget de chat se cargue por completo. Realiza las siguientes acciones:

• Utiliza un pageload indicador para garantizar que la lógica automática solo se ejecute una vez.

• Espera 5 segundos para garantizar que la interfaz de usuario del widget de chat se inicialice correctamente.

• Extrae el parámetro de consulta de datos del URL utilizando la URLSearchParams API.

• Envía el valor extraído al chat utilizando instance.send().

• Almacena la instancia de chat globalmente por si la necesitas más adelante.

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

Paso 2: Prueba tu script

Añade el script a tu página web e incluye un parámetro de consulta de datos en URL. Por ejemplo:

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

Una vez que se carga el widget de chat, envía automáticamente el siguiente mensaje a través de la instance.send() función.

generate a sample email

Guion completo

Utiliza el siguiente script para aplicar el código de este tutorial a tu 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 () {
        const chatInstance = wxoLoader.init();

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