Iniciar automáticamente una conversación de chatbot

  • Artículo

Importante

Las capacidades y características de Power Virtual Agents son ahora parte de Microsoft Copilot Studio tras importantes inversiones en IA generativa e integraciones mejoradas en Microsoft Copilot.

Algunos artículos y capturas de pantalla pueden hacer referencia a Power Virtual Agents mientras actualizamos la documentación y el contenido de capacitación.

Puede configurar su bot para iniciar una conversación con un usuario. También puede combinar el saludo personalizado con personalización para la apariencia del bot.

Importante

Si establece que el bot inicie la conversación aparecerá en los análisis y aumentará el recuento de sesiones.

Si el usuario del bot no interactúa con el bot (por ejemplo, carga la página pero no pregunta nada al bot), la sesión se marcará como una sesión sin compromiso. Esto podría afectar sus análisis.

De forma predeterminada, los bots de chats creados con Microsoft Copilot Studio y publicados en un sitio web se cargará sin un saludo y esperará pasivamente a que el usuario inicie la conversación.

Sin embargo, puede usar código personalizado de CSS y JavaScript para que el bot inicie automáticamente la conversación cuando se carga el bot. Por ejemplo, podría hacer que su bot diga "Hola, soy Botty, un agente virtual" tan pronto como se cargue el bot.

Primero, deberá implementar un lienzo personalizado que incluya argumentos que activen el saludo. De manera predeterminada, el lienzo personalizado llama al tema de saludo predeterminado del sistema. Sin embargo, puede crear un nuevo tema para usarlo como saludo, aunque deberá desviar el tema de saludo predeterminado del sistema a un nuevo tema.

Importante

Puede instalar y utilizar el código de muestra incluido en esta documentación solo para utilizarlo con el producto Microsoft Copilot Studio. El código de muestra tiene licencia "tal cual" y está excluido de cualquier acuerdo de nivel de servicio o servicios de soporte. Usted asume el riesgo de su uso.

Microsoft no ofrece garantías expresas, garantías ni condiciones y renuncia a todas las garantías implícitas, incluidas las de comerciabilidad, idoneidad para un propósito genérico y ausencia de infracción.

Recuperar el extremo del token

Para personalizar su lienzo, ya sea el lienzo predeterminado o uno personalizado al que se conecta, debe recuperar los detalles de su bot.

  1. En el menú de navegación, en Configuración, seleccione Canales.

  2. Seleccione Aplicación móvil.

    Captura de pantalla del mosaico de canal de la aplicación móvil.

  3. Junto a Extremo de token, seleccione Copiar.

    Captura de pantalla del id. del token de punto de conexión.

Personalizar el lienzo predeterminado (sencillo)

Configure el aspecto del lienzo de chat con algunas sencillas opciones de estilo de CSS y JavaScript.

Primero, debe configurar dónde está implementando su lienzo de bot.

  1. Crear y publicar un bot.

  2. Copie y pegue el código HTML a continuación y guárdelo como index.html.
    También puede copiar y pegar el siguiente código en el editor para probar HTML en w3schools.com. Aún necesitará agregar su extremo de token.

    <!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. En archivo index.html que creó, ingrese su extremo de token en la línea var theURL = "<YOUR TOKEN ENDPOINT>";.

  4. Abra index.html utilizando un navegador moderno (por ejemplo, Microsoft Edge) para abrir el bot en el lienzo personalizado.

  5. Pruebe el bot para asegurarse de que está recibiendo respuestas del bot y de que funciona correctamente.

    Si encuentra problemas, asegúrese de haber publicado el bot y que el extremo del token se haya insertado en el lugar correcto. Debe aparecer después del signo igual (=) en la línea var theURL = "<YOUR TOKEN ENDPOINT>" y estar rodeado de comillas dobles (").

Cambiar el saludo predeterminado del bot

El código en el archivo index.html hace que se llame automáticamente al tema cuando se carga el bot. De forma predeterminada, llama al tema de saludo del sistema. También puede crear un nuevo tema y desviar el saludo predeterminado del tema del sistema al nuevo tema.

En ambos casos, usted realiza los cambios en el tema al que desea llamar como lo haría normalmente.

Si modifica o crea un nuevo tema de saludo, es una práctica recomendada incluir algún tipo de identificación de que el usuario está hablando con un bot (o "agente virtual"), para que no crean que están hablando con una persona.

Le recomendamos que modifique el tema del saludo del sistema para que no tenga que editar el código index.html.

  1. En el menú de navegación, seleccione Temas y luego seleccione la fila de tema Saludo.

    Captura de pantalla de la página Temas con el tema Saludo resaltado.

  2. Edite el texto dentro de los nodos Mensaje. También puede agregar o eliminar nodos adicionales.

  3. Seleccione Guardar.

  4. Publicar el bot.

Ahora puede probar su bot yendo a la página web donde implementó el lienzo personalizado de su bot. Verá que el bot inicia la conversación mostrando automáticamente el tema de saludo.

Crear un nuevo tema de usuario

Advertencia

Usar un tema de usuario para iniciar una conversación aumentará sus sesiones facturadas. Una sesión facturada es una interacción entre un cliente y un bot y representa una unidad de consumo. La sesión facturada comienza cuando se activa un tema de usuario. Para obtener más información, consulte el tema Analizar la información de la sesión facturada.

  1. Seleccione Temas en el menú de navegación.

  2. Seleccione Nuevo tema y asígnele un nombre.

  3. Agregue el texto dentro del nodo Mensaje.

  4. Seleccione Guardar cuando haya terminado de editar el mensaje.

  5. En el menú de navegación, seleccione Temas y luego seleccione la fila de tema Saludo.

  6. Eliminar los nodos de mensajes en el tema Saludo.

  7. Para desviar el bot automáticamente a un tema de usuario, seleccione Agregar nodo (+) para agregar un nodo, y luego Ir a otro tema.

  8. En el menú desplegable, seleccione el tema de usuario que creó anteriormente.

  9. Seleccione Guardar cuando haya terminado de editar el mensaje.

  10. Publicar el bot.

Ahora puede probar su bot yendo a la página web donde implementó el lienzo personalizado de su bot. Verá que el bot inicia la conversación mostrando automáticamente el nuevo tema.