Introducción a Chat en web

  • Artículo

SE APLICA A: SDK v4

En este artículo se incluyen los detalles del componente Chat en web de Bot Framework. El componente Chat en web de Bot Framework es un cliente basado en web muy personalizable para Bot Framework SDK V4. Bot Framework SDK V4 permite a los desarrolladores modelar la conversación y crear aplicaciones sofisticadas de bots.

Si desea migrar desde Chat en web v3 a v4, vaya a la sección sobre la migración.

Introducción a Chat en web

Nota:

Para versiones anteriores de Chat en web (v3), visite la rama del Chat en web v3.

En primer lugar, cree un bot mediante Azure AI Bot Service. Una vez creado el bot, deberá obtener el secreto Chat en web del bot en Azure Portal. A continuación, use el secreto para generar un token y páselo a Chat en web.

En el ejemplo siguiente se muestra cómo agregar un control Chat en web a un sitio web.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>

         // Set style options.
         const styleOptions = {
            botAvatarInitials: 'BF',
            userAvatarInitials: 'WC'
         };

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID',
               username: 'Web Chat User',
               locale: 'en-US',
               styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

userID, username, locale, botAvatarInitials y userAvatarInitials son parámetros opcionales para pasar al método renderWebChat. Para obtener más información sobre el estilo, vea ¿Por qué styleOptions?. Para obtener más información sobre las propiedades de Chat en web, consulte la sección referencia de API de Chat en web.

Además, si el bot es un bot regional (lo que significa que el recurso del bot está en una región distinta de "global"), debe especificar la dirección URL de línea directa regional estableciendo en un campo adicional domain en el window.WebChat.createDirectLine() método . Especifique el dominio como europe.webchat.botframework.com, unitedstates.webchat.botframework.com o india.webchat.botframework.com, el que sea adecuado para la región elegida. Lea Responder a la llamada de Europa: Almacenar y procesar datos de la UE para obtener información sobre la residencia de datos.

Integración con JavaScript

Chat en web está diseñado para integrarse con su sitio web existente mediante JavaScript o React. La integración con JavaScript le proporcionará algunos estilos y personalización, para obtener más información, consulte Integrar Chat en web en su sitio web.

Puede usar el paquete completo y típico botframework-webchat que contiene las características más usadas.

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'YOUR_DIRECT_LINE_TOKEN'
               }),
               userID: 'YOUR_USER_ID'
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

Vea el ejemplo funcional del conjunto completo de Chat en web.

Integración con React

Para una capacidad de personalización completa, puede usar React para volver a componer los componentes de Chat en web.

Para instalar la compilación de producción desde npm, ejecute npm install botframework-webchat.

import { DirectLine } from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_DIRECT_LINE_TOKEN' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } userID='YOUR_USER_ID' />
      element
    );
  }
}

También puede ejecutar npm install botframework-webchat@master para instalar una compilación de desarrollo sincronizada con la rama master del GitHub de Chat en web.

Vea un ejemplo funcional de Chat en web representado vía React.

Sugerencia

Si no está familiarizado con React y jsx, puede encontrar el entrenamiento en la página introducción de Reacts.

Personalizar la interfaz de usuario de Chat en web

Chat en web está diseñado para ser personalizable sin bifurcación del código fuente. En la tabla siguiente se describe el tipo de personalizaciones que puede lograr al importar Chat en web de diferentes maneras. Esta lista no es exhaustiva.

Personalización Agrupación CDN React
Cambiar colores ✔️ ✔️
Cambiar tamaños ✔️ ✔️
Actualizar y reemplazar estilos CSS ✔️ ✔️
Escuchar eventos ✔️ ✔️
Interactuar con la página web de hospedaje ✔️ ✔️
Personalizar actividades de representación ✔️
Personalizar datos adjuntos de representación ✔️
Agregar nuevos componentes de interfaz de usuario ✔️
Recomponer toda la interfaz de usuario ✔️

Consulte la información sobre la personalización de Chat en web para aprender más sobre la personalización.

Nota:

Para obtener información sobre las redes de entrega de contenido (CDN), consulte Redes de entrega de contenido (CDN).

Migración desde Chat en web v3 a v4

Existen tres posibles rutas que la migración puede tomar al migrar de v3 a v4. Compare el escenario inicial con el que se muestra a continuación.

  • Para actualizar un control Chat en web incrustado en , <iframe>consulte la documentación del repositorio de Chat en web para el paquete de inserción.
  • Para actualizar un control de Chat en web que usa poco a ninguna personalización, revise el ejemplo Chat en web 00.migration/a.v3-to-v4, que describe el proceso.
  • Para actualizar una versión bifurcada de una Chat en web altamente personalizada, consulte la guía de migración de Chat en web.

Referencia de Web Chat API

Hay varias propiedades que pueden transmitirse en el componente de React del Chat en web (<ReactWebChat>) o el método renderWebChat(). Para obtener una breve descripción de las propiedades disponibles, consulte Chat en web referencia de API. Además, no dude en examinar el código fuente a partir de packages/component/src/Composer.js.

Compatibilidad con el explorador

Chat en web admite las 2 últimas versiones de los exploradores modernos como Chrome, Edge y FireFox. Si necesita Chat en web en Internet Explorer 11, consulte el paquete y la demostración de ES5.

  • Chat en web no admite Internet Explorer anterior a la versión 11
  • No se admite la personalización como se muestra en ejemplos que no son ES5 para Internet Explorer. Dado que IE11 es un explorador no moderno, no es compatible con ES6 y muchos ejemplos que usan funciones de flecha y promesas modernas deben convertirse manualmente en ES5. Si necesitas una gran personalización para tu aplicación, te recomendamos encarecidamente desarrollar tu aplicación para un explorador moderno, como Google Chrome o Edge.
  • Chat en web no tiene ningún plan para admitir ejemplos de IE11 (ES5).
  • Para los clientes que deseen volver a escribir manualmente nuestros otros ejemplos para trabajar en IE11, se recomienda revisar la conversión de código ES6+ a ES5 con polyfills y transpilers como babel.

Cómo realizar pruebas con los bits más recientes del Chat en web

La prueba de características no publicadas solo está disponible a través del empaquetado de MyGet en este momento.

Si desea probar una característica o corrección de errores que aún no se ha publicado, querrá apuntar el paquete de Chat en web a la fuente diaria de Chat en web, en lugar de la fuente oficial de npmjs.

Actualmente, puede tener acceso a fuentes diarias de Chat en web suscribiéndose a nuestra fuente MyGet. Para ello, deberá actualizar el registro en el proyecto. Este cambio es irreversible y nuestras instrucciones incluyen cómo volver a suscribirse a la versión oficial.

Suscribirse a los bits más recientes en myget.org

Para ello puede agregar los paquetes y, a continuación, cambiar el registro del proyecto.

  1. Agregue las dependencias del proyecto que no sean Chat en web.
  2. En el directorio raíz del proyecto, cree un archivo .npmrc.
  3. Agregue la siguiente línea al archivo: registry=https://botbuilder.myget.org/F/botframework-webchat/npm/
  4. Agregue Chat en web a las dependencias del proyecto npm i botframework-webchat --save.
  5. En el package-lock.json, los registros a los que apunta ahora son MyGet. El proyecto de Chat en web tiene el origen ascendente habilitado para proxy, que redirigirá los paquetes no MyGet a npmjs.com.

Vuelva a suscribirse a la versión oficial en npmjs.com

Para volver a suscribirse, es necesario restablecer el registro.

  1. Elimine su .npmrc file.
  2. Elimine su package-lock.json raíz.
  3. Quite el directorio node_modules.
  4. Vuelva a instalar los paquetes con npm i
  5. package-lock.jsonEn , los registros apuntan de nuevo.https://npmjs.com/

Contribución

Consulte nuestra página de contribución para obtener más información sobre cómo compilar el proyecto y nuestras directrices de repositorio para las solicitudes de incorporación de cambios.

El proyecto ha adoptado el Código de conducta de código abierto de Microsoft. Para obtener más información, consulte las preguntas más frecuentes del código de conducta o póngase en contacto con opencode@microsoft.com si tiene cualquier otra pregunta o comentario.

Informe de problemas de seguridad

Las incidencias y problemas de seguridad se deben informar de forma privada, por correo electrónico al Centro de respuestas de seguridad de Microsoft (MSRC) en secure@microsoft.com. Debería recibir una respuesta en 24 horas. Si por algún motivo no lo hace, realice un seguimiento por correo electrónico para asegurarse de que recibimos su mensaje original. Puede encontrar más información, incluida la clave MSRC PGP, en TechCenter de seguridad.