logo
Desarrollo
ResumenEspacioDesarrolloEspacioTrabajoReferenciaAPIMejoresPrácticasRegistroCambios
Buscar
Español
EspacioDesarrollo / Agente / Integración / WidgetBurbuja
Widget de burbuja (Bubble Widget)
Última actualización：hace 3 meses

Widget de burbuja (Bubble Widget)

Insertar el Agent como widget de burbuja en el sitio web de su empresa. Los usuarios pueden hacer clic en el widget de burbuja para abrir una ventana de chat y recibir servicios como atención al cliente en línea, consultoría de preventa y captación de clientes potenciales (leads).

Cómo integrar en un sitio web

  1. Acceder a Agent-Integration-Widget Bubble y copiar el «Integration Code».
    alt text
  2. Pegar el código dentro de la etiqueta <head> de la página HTML del sitio web.
  3. Publicar el sitio web para completar la inserción del AI Agent e iniciar la conversación.
  4. Si se necesita personalizar la IU y el logotipo, controlar la frecuencia de mensajes de los usuarios o mostrar mensajes proactivos para mejorar las tasas de interacción, se puede continuar con la configuración avanzada.

Personalización de la IU

Esta función permite configurar el tamaño, la posición, el color, el icono, el logotipo y el nombre de la burbuja del widget.
alt text

  • Apodo del widget: Personalizar el nombre.
  • Descripción del widget: Personalizar la descripción.
  • Configuración del tema: Personalizar el color del tema del widget, el icono de la burbuja y la apariencia del Agent.
  • Personalización de la burbuja: Personalizar la posición de visualización y el tamaño de la burbuja según las necesidades del negocio.
  • Personalización de la ventana de chat: Personalizar el ancho y el alto de la ventana de chat según las necesidades del negocio (para garantizar la compatibilidad con pantallas pequeñas, no se recomienda establecer valores demasiado grandes).
  • Logotipo del Agent:
    • Logotipo de la plataforma: Muestra el logotipo de GPTBots.
    • Logotipo de la organización: Muestra el logotipo personalizado cargado por la empresa aquí. Todos los Agents de la organización utilizan el mismo logotipo de la organización.
    • Logotipo personalizado: Muestra el logotipo personalizado cargado. Cada Agent puede utilizar un logotipo diferente. Esta función es un privilegio avanzado y requiere ponerse en contacto con el equipo de ventas para su activación.
    • Sin logotipo: El componente de la ventana de chat no muestra información de logotipo.

Mensajes proactivos

Los mensajes proactivos se pueden mostrar como tarjetas o mensajes de aviso para atraer la atención de los usuarios y guiarlos a iniciar una conversación o a la captación de clientes potenciales (leads) antes de que hagan clic en el widget de burbuja. Hay dos estilos de mensajes proactivos: «Prompt Messages» y «Card Messages».

Cómo crear «Prompt Messages»

alt text

  • Contenido del mensaje: Permite configurar hasta 3 elementos de contenido, que se mostrarán dinámicamente de abajo hacia arriba en la página una vez activados.
  • Reglas de visualización: Permite configurar hasta 3 condiciones de activación, mostrando mensajes proactivos cuando se cumplan las condiciones del entorno del usuario.
    • Condiciones de activación: Permite evaluar en función del navegador, el idioma del navegador, la zona horaria, la región o el país, el sistema operativo, los parámetros UTM, etc.
    • Expresiones: Proporciona operadores como =, ≠, rango, contiene, no contiene, tiene valor y sin valor para distintos tipos de valores, como número/cadena.
    • AND / OR: Permite configurar que se cumplan todas las condiciones o que cualquier condición pueda activar el mensaje proactivo.
    • Eventos: Admite activar mensajes proactivos de forma inmediata o después de N segundos.
  • Control de frecuencia de visualización de mensajes: Para evitar que mensajes proactivos frecuentes molesten a los usuarios, se admite la gestión del control de frecuencia estableciendo el número máximo de visualizaciones por «sitio web»/«página» y por «día»/«semana»/«mes».

Cómo crear «Card Messages»

alt text
Tras configurar el contenido del mensaje de tarjeta, el resto de opciones de configuración son las mismas que las anteriores.

  • Carga de imagen: Admite la carga de imágenes personalizadas. Se recomienda controlar el tamaño de la imagen para evitar tiempos de carga prolongados.
  • Título/Contenido: Permite introducir texto personalizado.

Cómo habilitar los mensajes proactivos

alt text

  1. En la lista de mensajes proactivos, seleccionar el mensaje objetivo y hacer clic en el botón de habilitación.
  2. Visitar la página del sitio web para ver el mensaje proactivo.
  3. Hacer clic en el mensaje proactivo para abrir la ventana de chat.

Seguridad y control de frecuencia

  • Lista de permitidos de dominios: Define el rango de dominios en los que se puede insertar el widget bubble integration code. Si está deshabilitada, se considera sin restricciones.
    Domain Whitelist

  • Límite de consumo de créditos: Define el límite de consumo de créditos para el «widget bubble». Si está deshabilitado, se considera sin restricciones.
    Widget Credit Total Limit

    • Se pueden establecer hasta 3 reglas.
    • Admite establecer el límite total de consumo de créditos del widget de burbuja por periodo «diario»/«semanal»/«mensual».

  • Límite de consumo por usuario: Define el límite de consumo de créditos para cada usuario. Si está deshabilitado, se considera sin restricciones.
    User Credit Consumption Limit

    • Se pueden establecer hasta 3 reglas.
    • Admite establecer el límite de consumo de créditos para cada usuario por periodo «diario»/«semanal»/«mensual».

  • Límite de frecuencia por usuario: Define el límite de frecuencia de envío de mensajes para cada usuario. Si está deshabilitado, se considera sin restricciones.
    User Message Frequency Limit

    • Se pueden establecer hasta 3 reglas.
    • Admite establecer el número máximo de mensajes enviados por cada usuario por intervalo de tiempo.
    • Cuando se supera el límite, el Agent dejará de responder y enviará automáticamente el contenido del mensaje preestablecido.

Devolución de llamada (callback) de eventos

Cómo enviar eventos de comportamiento del usuario del widget de burbuja a GA4 o a sistemas de terceros

  1. Crear un callback de GA4, obtener el Measurement Protocol API Secret y el Measurement ID del proyecto de destino de GA4 y rellenarlos.

  2. Crear un callback de webhook, seleccionar el evento de callback requerido según las indicaciones de la página y completar la URL y la información de autenticación.
    alt text

  3. Habilitar el callback en la lista de callback de eventos y comprobar si los datos son correctos en la dirección de GA4 o Webhook. Una vez que los datos se almacenen correctamente, se podrán analizar los datos de usuario.

Uso avanzado

Establecer el ID de usuario

Se permite a los desarrolladores de Agent establecer el ID de identidad del usuario.

window.ChatBot.setUserId("your_user_id")
                      
                      window.ChatBot.setUserId("your_user_id")
Este bloque de código en una ventana flotante

Establecer el correo electrónico del usuario

Se permite a los desarrolladores de Agent establecer el correo electrónico del usuario. Cuando el usuario solicite atención humana, podrá omitir el paso de introducir el correo electrónico. Si no se configura, el usuario debe introducir la dirección de correo electrónico para solicitar atención humana.

window.ChatBot.setEmail("somebody@mail.com")
                      
                      window.ChatBot.setEmail("somebody@mail.com")
Este bloque de código en una ventana flotante

Establecer variables personalizadas

Los desarrolladores pueden establecer valores temporales de variables personalizadas que son efectivos durante la conversación actual. Esto permite aplicar lógica y generar respuestas dinámicas por parte del Agent.

window.ChatBot.setCustomVariables({"var_key1": "value1", "var_key2": "value2"})
                      
                      window.ChatBot.setCustomVariables({"var_key1": "value1", "var_key2": "value2"})
Este bloque de código en una ventana flotante

Configurar la visualización automática de la ventana de chat

Permite que los desarrolladores de Agent configuren la visualización automática de la ventana de chat. Si el usuario no hace clic en el componente de burbuja, la ventana de chat se muestra automáticamente. Si el usuario hace clic en el componente de burbuja, la ventana de chat se cierra.

<script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js" onload="ChatBot.show()"></script>
                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js" onload="ChatBot.show()"></script>
Este bloque de código en una ventana flotante

Configurar la omisión del estado predeterminado

Permite que los desarrolladores de Agent omitan el estado predeterminado de la ventana de chat para priorizar la visualización de mensajes de bienvenida y preguntas preestablecidas.

<script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js?skipWelcome=1"></script> 
                      
                      <script src="https://www.gptbots.ai/widget/xxxxxxxxxxxxxx/chat.js?skipWelcome=1"></script>
Este bloque de código en una ventana flotante

Formato de los datos del callback de eventos

Los eventos y los atributos de eventos del widget de burbuja transmitidos mediante Webhook o GA4 utilizan el siguiente formato de datos. Deben analizarse y almacenarse en consecuencia.

{ "client_id": "", //Preferably obtained using GA4's gtag method. If not available, generated by GPTBots. "user_id": "", //UserId set by the developer, null if not set. "event_name": "Show widget bubble", //Event name "event_params": { "key1": "abc", //Event attribute name: attribute value (string) "key2": 123 //Event attribute name: attribute value (number) } }
                      
                      {
  "client_id": "",  //Preferably obtained using GA4's gtag method. If not available, generated by GPTBots.
  "user_id": "",  //UserId set by the developer, null if not set.
  "event_name": "Show widget bubble",     //Event name
  "event_params": {  
      "key1": "abc",  //Event attribute name: attribute value (string)
      "key2": 123     //Event attribute name: attribute value (number)
    }
}
Este bloque de código en una ventana flotante

Insertar el widget de burbuja en Shopify

  1. Copiar el código de inserción del widget de burbuja.
    image-20240523180748897

  2. Acceder al panel de administración de la tienda Shopify, localizar la plantilla en uso y acceder a "Edit Code".
    1

  3. Localizar el archivo "theme.liquid", pegar el código de inserción dentro de la etiqueta <head> y guardarlo.
    2

  4. El widget de burbuja aparecerá en la esquina inferior derecha del sitio web de la tienda para que los visitantes lo utilicen para consultas.
    image-20240523180959768