Visión general del desarrollo del chat web

Si desea personalizar el estilo y la apariencia del chat web más allá de las opciones disponibles en la pestaña Estilo de la configuración del chat web, puede hacerlo eligiendo un tema de Carbon Design diferente.

Los temas admitidos son temas de color definidos por IBM Carbon Design. Para establecer el tema Carbon, utilice la opción de configuración " carbonTheme ".

También puede establecer variables individuales dentro del tema para personalizar elementos específicos de la interfaz de usuario. Por ejemplo, el texto que se visualiza en la ventana de conversación utiliza las fuentes IBMPlexSans, Arial, Helvetica, sans-serif. Si desea utilizar un tipo de letra diferente, puede especificarlo utilizando el método de instancia ' updateCSSVariables().

La pantalla de inicio saluda al cliente y, opcionalmente, muestra una lista de sugerencias para iniciar una conversación. Puede personalizar el estilo y el contenido de la pantalla de inicio:

• Para añadir elementos a la pantalla de inicio, puedes definir HTML personalizado utilizando la variable temática ' writeableElements.homeScreenAfterStartersElement ':

  instance.writeableElements.homeScreenAfterStartersElement.innerHTML = 
    '<div class="MyCustomClass">This is my custom element</div>';
  

  Ejemplo: Para ver un ejemplo práctico que muestra cómo añadir elementos personalizados a la pantalla de inicio, consulta Elementos personalizados de la pantalla de inicio para el chat web del AI assistant builder.

• Para cambiar el estilo de la pantalla de inicio, utilice las clases de ayuda CSS.

Puede personalizar las cadenas que definen las distintas etiquetas y frases codificadas que muestra el chat web. Para personalizar las cadenas, utilice el método de instancia ' updateLanguagePack() ' para sustituir las cadenas del paquete de idioma actual. Para más información, consulte Idiomas.

Por defecto, las cadenas mostradas por el chat web están en inglés. Para cambiar a otro idioma, utilice el método de instancia ' updateLanguagePack() ' para sustituir el paquete de idioma actual por uno de los paquetes de idioma traducidos disponibles. Para más información, consulte Apoyo a audiencias globales en el chat web.

Para integrarse mejor con su sitio web, puede sustituir el icono incorporado del lanzador por un mecanismo diferente para abrir el chat web. Para ocultar el lanzador predeterminado, establezca la opción de configuración " showLauncher " en " false. Para abrir el chat web basado en alguna otra interacción, utilice el método de instancia ' openWindow.

' ' Tutorial: Para ver un tutorial que muestra cómo implementar un lanzador personalizado, consulta ' Utilizar un lanzador personalizado.

Si desea mantener el chat web siempre abierto en su página, utilice la configuración openChatByDefault para mostrar la página con la ventana de chat abierta, y la opción hideCloseButton para evitar que los clientes la cierren.

El diseño de su sitio web puede requerir que cambie dónde y cómo se muestra la ventana de chat en su sitio web. Por ejemplo, puede que desee que aparezca en una posición diferente de la página, con un tamaño diferente o anidado dentro de otro elemento de la página.

Para cambiar el tamaño de la ventana de chat web, puede utilizar el método de instancia updateCSSVariables() para modificar el estilo CSS.

Si necesita cambiar la posición de la ventana de chat web, o necesita cambiar el tamaño más allá de los límites permitidos en el CSS, puede utilizar un elemento DOM personalizado para contener la ventana de chat web. Para ello, utilice la opción de configuración " element ".

' ' Tutorial: Para un tutorial que muestra cómo renderizar el chat web en un elemento personalizado, véase ' Tutorial: Personalizar el tamaño y la posición del chat web.

Puedes utilizar una WebView con un puente JavaScript para añadir el chat web a tu aplicación móvil. Para más información, consulta Añadir el chat web a tu aplicación móvil.

Al suscribirse a eventos, su código puede interceptar los mensajes que se envían y reciben entre el cliente y el asistente, e incluso modificar su contenido.

Suscríbete al evento ' pre:receive ' si quieres interceptar el mensaje de un cliente antes de que se envíe al asistente de IA. Por ejemplo, puede que desee eliminar información personal identificable del texto del mensaje o añadir variables de contexto a la carga útil del mensaje.

Suscríbase al evento ' pre:send ' si desea interceptar una respuesta entrante del asistente de IA antes de que se muestre al cliente. Por ejemplo, puede que desee añadir formato, enlaces u otros elementos específicos del chat web.

' ' Tutorial: Para ver un tutorial que muestra cómo utilizar el evento ' pre:receive ' para interceptar y modificar los mensajes entrantes, consulta ' Tutorial: implementación de botones de opción personalizados en el chat web.

Si su asistente AI envía respuestas especializadas utilizando un tipo de respuesta personalizada (user_defined), puede implementar una vista personalizada para mostrar estas respuestas en la ventana de chat web. Para ello, suscríbete al evento ' customResponse ', que se dispara cada vez que se recibe una respuesta ' user_defined '. En tu método manejador de eventos, puedes entonces leer el contenido de la respuesta y renderizar la salida usando tus propios elementos.

Tutorial: Para ver un tutorial que muestra cómo renderizar un tipo de respuesta personalizada en sustitución de la respuesta de opciones predeterminada, consulte Tutorial: implementación de botones de opción personalizados en el chat web.

Puede utilizar uno de los kits de inicio de chat web para integrarse con una plataforma de centro de contacto (servicio de atención al cliente) distinta de las disponibles en las integraciones del generador de asistentes de IA. Hay disponibles implementaciones de referencia totalmente funcionales para varias plataformas de centros de contacto; además, puede utilizar un kit de inicio para desarrollar una integración personalizada con la plataforma de su elección.

Para obtener más información, consulte Añadir asistencia al centro de contacto.

El chat web asocia un ID de usuario a cada mensaje que envía al asistente de IA; este ID de usuario se utiliza para la facturación basada en el usuario y otros fines. Puede permitir que el chat web genere un ID anónimo para cada usuario, o puede controlar usted mismo el ID de usuario.

Dependiendo de si ha habilitado la seguridad para el chat web, puede utilizar el método de instancia ' updateUserID o el método ' updateIdentityToken ' para especificar la información de identidad del usuario.

Para obtener más información sobre cómo se especifica la información de identidad de usuario y cómo se utiliza, consulte Gestión de la información de identidad de usuario en el chat web.

Para proteger el chat web, puede utilizar JSON Web Token (JWT) para autenticar a los usuarios y cifrar los datos privados. Para obtener más información, consulte Seguridad del chat web.

El código del chat web alojado en IBM Cloud se actualiza periódicamente con mejoras y nuevas funciones. Por defecto, el script de incrustación utiliza automáticamente la última versión del chat web. Para evitar cambios inesperados que puedan afectar a su sitio web, es posible que desee controlar qué versión del chat web utiliza su sitio web, dándole la oportunidad de probar cada nueva versión antes de desplegarla en producción.., para evitar cambios inesperados cuando se publique una nueva versión.

Para obtener más información sobre el versionado del chat web, consulte ' Control de la versión del chat web.