Compartir a través de


Desarrollar un widget de chat en vivo personalizado

Microsoft proporciona una opción para crear un widget de chat en directo personalizado que puede asociar a su cuenta de Servicio al cliente de Dynamics 365. Cada componente del widget de chat en directo personalizado se puede personalizar tanto para la funcionalidad como para la interfaz de usuario.

En función de sus necesidades y resultados, puede personalizar el widget de chat mediante una de las siguientes opciones:

  • Uso del widget de chat en directo personalizable 2.0
  • Desarrollar su propio widget

Uso del widget de chat en directo personalizable 2.0

El widget de chat en directo personalizable 2.0 te permite editar todos los elementos del widget, como fuente, colores y estilos para que puedas hacer coincidir el widget con tu imagen de marca. El widget personalizado le ayuda a cultivar confianza y credibilidad, distinguir su marca, fomentar conexiones emocionales positivas y aumentar el valor que los clientes atribuyen a su producto.

El nuevo widget de chat en directo 2.0 se basa en el SDK de Chat Omnicanal y la biblioteca de componentes de la interfaz de usuario del widget de chat en directo.

Desarrollador de portales—Personalizar la interfaz de usuario predefinida basada en scripts

La opción para desarrolladores del portal le permite personalizar la interfaz de usuario del widget de chat, pero no modifica la configuración de funcionalidad lista para usar en el Centro de administración del servicio Copilot. Para personalizarlo, puede usar el script "data-customization-callback" que conecta el widget de fábrica a una función de JavaScript. La función puede contener personalizaciones de estilo CSS en los componentes de chat, con los mismos precedentes que la biblioteca de componentes de interfaz de usuario del widget de chat en directo omnicanal.

Editar el script del widget de chat en vivo para habilitar el widget de chat en vivo 2.0

Para usar el widget de chat en directo 2.0 y la personalización basada en scripts, modifique el fragmento de código del widget de chat en directo 2.0 de la forma siguiente.

  1. En el Centro de administración de Copilot, abra el flujo de trabajo de chat y seleccione Copiar script de Live Chat Widget 2.0 para copiar el fragmento de código.
  2. Cree una nueva función de JavaScript con todos los estilos de componentes. Más información: Widget de chat omnicanal
  3. Agregue "v2" después del atributo de script.
  4. Agregue "data-customization-callback" y haga referencia a la función de JavaScript.

El fragmento de código actualizado tendrá el siguiente aspecto.

Captura de pantalla del código del widget de chat en directo personalizado.

Una captura de pantalla de ejemplo de un widget de chat 2.0 personalizado para aumentar su tamaño es el siguiente.

Captura de pantalla de ejemplo del widget de chat en directo 2.0.

Vea el tutorial en vídeo de la configuración del widget de chat en vivo.

Uso de la orquestación de interacción web para personalizar el widget

La orquestación de interacción con sitios web permite mover las anulaciones de configuración desde el JavaScript de la página hacia el Centro de administración. Obtenga más información en Implementación de widgets de chat en sitios web mediante una sola etiqueta.

Desarrollar su propio widget

Use la información de las secciones siguientes para crear su propio widget.

Biblioteca de componentes UI del widget de chat en vivo omnicanal

La biblioteca Omnichannel Live Chat Widget UI Components proporciona un marco de componentes de React reutilizables. Los componentes se compilan mediante la biblioteca fluent UI. Infórmese más sobre la biblioteca de componentes de la interfaz de usuario para el widget de chat en vivo omnicanal.

SDK de chat omnicanal

El SDK de Chat omnicanal es un paquete de código abierto que proporciona métodos y características de chat para agregar funcionalidad a un widget de chat en directo. Obtenga más información sobre el SDK de Chat omnicanal.

Personalización del widget de chat en directo

Después de instalar la versión más reciente del SDK de Chat Omnicanal, personalice el widget de chat en directo utilizando los métodos del SDK de Chat Omnicanal y editando los estilos CSS básicos de los componentes de la interfaz de usuario del Widget de Chat en Directo Omnicanal.

Nota:

El SDK de chat omnicanal es un requisito previo para instalar la biblioteca de componentes de la interfaz de usuario del widget de chat en vivo omnicanal.

Personalizar los widgets de chat en directo para aplicaciones móviles
startChat
cerrarChat
lcw:closeChat
lcw:threadUpdate
lcw:chatRetrieved
lcw:chatQueued