Iniciar automáticamente una conversación de copiloto

  • Artículo

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

Importante

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

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

De forma predeterminada, los copilotos 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 copiloto inicie automáticamente la conversación cuando se carga el copiloto. Por ejemplo, podría hacer que su copiloto diga "Hola, soy Botty, un agente virtual" tan pronto como se cargue el copiloto.

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, puedes crear un nuevo tema para usarlo como saludo. Necesita desviar el saludo predeterminado del tema 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 copiloto.

  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 copiloto.

  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 token de punto de conexión.

    <!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 copiloto en el lienzo personalizado.

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

    Si encuentra problemas, asegúrese de haber publicado el copiloto y que el punto de conexión del token se haya insertado en el lugar correcto. El token de punto de conexión 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 copiloto

El código en el archivo index.html hace que se llame automáticamente al tema cuando se carga el copiloto. De forma predeterminada, el código 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 modificas o creas un nuevo saludo tema, debes incluir algún tipo de indicación de que el usuario está hablando con un copiloto (o "agente virtual"). Esta indicación ayudará al usuario a comprender que no está hablando con un humano.

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 su copiloto.

Ahora puede probar su copiloto yendo a la página web donde implementó el lienzo personalizado de su copiloto. 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 copiloto y representa una unidad de consumo. La sesión facturada comienza cuando se activa un tema de usuario. Para más información, consulte Ver sesiones facturadas (versión preliminar).

  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 copiloto 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 su copiloto.

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