Incorporación de la conversación web en la página
Para añadir el widget de chat web a tu sitio web, necesitas incrustar un elemento de script generado en tu fuente HTML.
La integración del chat web se incluye automáticamente para cada asistente de IA, y se configura por separado para cada entorno.
Para la integración de webchat con una aplicación basada en React, consulte las formas alternativas aquí.
Para añadir el chat web a su sitio web:
En la página Integraciones de '
', busca el mosaico Chat web y haz clic en Abrir. Se abrirá la ventana Abrir conversación web.En el campo Entorno, selecciona el entorno al que quieres que se conecte el widget de chat web. Pulse Confirmar.
Se abrirá la página Conversación web, que muestra los valores de la integración de conversación web en el entorno seleccionado.
El panel de vista previa muestra el aspecto que tendrá el chat web cuando se incruste en una página web. Si ves un mensaje que empieza por "
There is an error", es probable que aún no hayas añadido ninguna acción a tu asistente. Después de añadir una acción, puede probar la conversación desde el panel de vista previa.Haga clic en la pestaña Incrustar.
Se genera un fragmento de código basado en la configuración de la conversación web. Usted (o un desarrollador web) añadirá este fragmento de código a la página web en la que debe aparecer la conversación web.
Este fragmento de código contiene un elemento HTML
script. El script llama a un código JavaScript alojado en un sitio de IBM y crea una instancia de un widget que se comunica con el asistente de IA.Haga clic en el icono '
' Copiar al portapapeles para copiar el script incrustado en el portapapeles.Edite el código fuente HTML para la página web en la que deba aparecer el widget de conversación web. Pegue el fragmento de código en la página. Pegue el código lo más cerca posible de la etiqueta
</body>de cierre para asegurarse de que la página se visualiza con mayor rapidez.No modifique los valores de propiedad
integrationIDoregionen el script de incorporación generado.Si no está preparado para añadir la conversación web a un sitio web activo, puede probarlo rápidamente utilizando un archivo HTML local. Utilice este código HTML como fuente para una página de prueba:
<html> <head></head> <body> <title>My Test Page</title> <p>The body of my page.</p> <!-- copied script elements --> </body> </html>Copie este código en un archivo con la extensión '
.html', y sustituya el elemento 'script' por el script de incrustación que copió en el paso anterior.Los identificadores en el script de incrustación (como '
integrationID'serviceInstanceID) no se consideran secretos, y son visibles para cualquiera que tenga acceso a su sitio web. Para más información, consulte Seguridad.Si el sistema que aloja su sitio web tiene acceso limitado a Internet (por ejemplo, si utiliza un proxy o un cortafuegos), asegúrese de que las URL que alojan el chat web son accesibles. Para obtener más información, consulte Acceso a hosts de chat web.
Abra la página web (o el archivo de prueba local) en el navegador. Debería ver el icono del lanzador
en la página.Pulse el icono del lanzador para abrir la ventana de conversación.
Pegue el mismo script de incrustación en cada página web en la que desee que el asistente de IA esté disponible para sus clientes.
Puede pegar el mismo código de script en tantas páginas de su sitio web como desee. Añádelo en cualquier lugar donde quieras que los usuarios puedan contactar con tu asistente de IA para pedir ayuda. Sin embargo, asegúrese de añadirlo solo una vez en cada página.
Ahora puedes probar tu asistente de IA y ver sus respuestas tal y como lo harían tus clientes.
Sin embargo, antes de utilizar la conversación web en producción, probablemente deseará personalizarlo para su sitio y para las necesidades de sus clientes. Para obtener más información, consulte Visión general del desarrollo del chat web.