logo
Desarrollo
Buscar
iframe

iframe

Insertar el Agent en el sitio web de su empresa mediante un iframe. Cuando los usuarios visitan la página web de destino, se carga la ventana de chat del Agent, ofreciendo servicios como atención al cliente en línea, consultoría de preventa y recopilación de clientes potenciales (leads).

Cómo integrar en un sitio web

  1. Acceder a Agent-Integration-iframe y copiar el «Integration Code».
  2. Pegar el código en la ubicación deseada de la página HTML del sitio web.
  3. Publicar el sitio web para completar la inserción del Agent e iniciar la conversación.
  4. Si se necesita personalizar la interfaz de usuario (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.

Interfaz de usuario personalizada (IU)

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

  • Apodo del widget: Permite personalizar el nombre.
  • Descripción del widget: Permite personalizar la información de la descripción.
  • Configuración del tema: Permite personalizar el color del tema del widget, el icono de la burbuja y la apariencia del Agent.
  • Personalización de la burbuja: Permite configurar 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: Permite configurar el ancho y el alto de la ventana de chat según las necesidades del negocio (para compatibilidad con pantallas más pequeñas, no se recomiendan valores 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.

Seguridad y limitación de frecuencia

  • Lista de dominios permitidos: 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 puntos: Define el límite de consumo de puntos para el «widget bubble». Si está deshabilitado, se considera sin restricciones.
    Total Points Limit

    • Hasta 3 configuraciones
    • Permite establecer el límite total de consumo de puntos del widget de burbuja por periodo «diario»/«semanal»/«mensual»
  • Límite de consumo por usuario: Define el límite de consumo de puntos para cada usuario. Si está deshabilitado, se considera sin restricciones.
    User Points Consumption Limit

    • Hasta 3 configuraciones
    • Permite establecer el límite de consumo de puntos para cada usuario por periodo «diario»/«semanal»/«mensual»
  • Limitación 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

    • Hasta 3 configuraciones
    • Permite establecer el límite de envío de mensajes para cada usuario en función de «número de mensajes/periodo de tiempo»
    • Cuando se supera el límite, el Agent dejará de responder y se enviará automáticamente un 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 deseado según las indicaciones de la página y completar la URL y la información de autenticación.
    alt text
  3. Activar 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

  1. Opción 1: La regla de dirección para insertar un iframe en una página web es: iframe_url+?user_id=your_user_id

    Nota: Se permite a los desarrolladores de Agent configurar el ID de usuario

  2. Opción 2: Configurar dinámicamente el ID de usuario mediante código JavaScript
Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))
                      
                      Array.from(document.getElementsByTagName('iframe')).filter(iframe => iframe.src.includes('gptbots')).forEach(iframe => iframe.contentWindow.postMessage('{"type":"UserId","data":"your_user_id"}', '*'))

                    
Este bloque de código en una ventana flotante

Establecer el correo electrónico del usuario

Para insertar la página web mediante iframe, añadir el correo electrónico del usuario a la URL del iframe como sigue: iframe_url?email=somebody@mail.com
Nota: Esto permite a los desarrolladores de Agent rellenar previamente el correo electrónico del usuario, de modo que los usuarios no necesiten introducir su dirección de correo electrónico al solicitar atención humana. Si no se configura el correo electrónico, los usuarios deben proporcionar su dirección de correo electrónico antes de poder iniciar una solicitud de atención humana.

Establecer variables personalizadas

Los desarrolladores pueden establecer valores temporales para variables personalizadas, que serán efectivos durante la conversación actual. Esto permite aplicar lógica y generar respuestas dinámicas por parte del Agent.
Para insertar la página web mediante iframe con variables personalizadas, utilizar el siguiente formato de URL: iframe_url?var_key1=value1&var_key2=value2

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 the GA4 gtag method to get the client id. If not available, it is generated by GPTBots. "user_id": "", //Developer-set UserId, 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 the GA4 gtag method to get the client id. If not available, it is generated by GPTBots.
  "user_id": "",  //Developer-set UserId, 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