El AI Growth Widget te permite agregar un widget de chat personalizable a tu sitio web, para que los visitantes puedan interactuar con tu negocio y contactarte a través de los canales de mensajería compatibles.

Esta guía te explica paso a paso cómo crear y configurar un AI Growth Widget: desde los ajustes de marca e interacción hasta la instalación en tu sitio web y la verificación de que todo funcione correctamente. Al finalizar la configuración, tu widget estará listo para publicarse e interactuar con los visitantes.

Cómo acceder a la página de configuración del AI Growth Widget

Sigue estos pasos para acceder a la página de configuración del AI Growth Widget:

1. Ve a la página “Canales” haciendo clic en el ícono en la barra de navegación izquierda
2. En la página “Canales”, haz clic en “AI Growth Widget” en el panel izquierdo
3. Serás redirigido a la página principal del AI Growth Widget
   
4. Para crear tu AI Growth Widget, haz clic en “Iniciar configuración” para comenzar

Paso 1: Marca y ajustes básicos

En este paso puedes personalizar la apariencia de tu AI Growth Widget y cómo se muestra a los visitantes de tu sitio web. Aquí definirás tu identidad de marca, los mensajes predeterminados y los ajustes de idioma.

Personalizar la identidad de marca

En Identidad de marca, configura los elementos visuales y de presentación de tu widget. Estos ajustes determinan cómo se muestra el widget en tu sitio web y cómo se representa tu negocio en las conversaciones.

• Logotipo de la empresa
  
  • Sube un logotipo que represente tu marca. Este logotipo aparece en la pantalla de bienvenida del widget y también se usa como avatar del remitente en las conversaciones del chat.
• Color del botón
  
  • Elige el color que se usará para el botón del widget y los principales elementos de llamada a la acción. Esto ayuda a que el widget se alinee visualmente con la identidad de marca de tu sitio web.
    • Haz clic en el ícono para elegir un color, o ingresa directamente el código de color HEX
• Color de la burbuja de mensaje
  
  • Define el color que se usará para las burbujas de mensaje en la ventana de chat. Esto afecta cómo se ven los mensajes durante las conversaciones con los visitantes.
    • Haz clic en el ícono para elegir un color, o ingresa directamente el código de color HEX
• Nombre visible del chat en vivo
  
  • Ingresa el nombre que verán los visitantes como título del widget. Por lo general, es el nombre de tu empresa o producto, y ayuda a los visitantes a identificar con quién están conversando.
• Nombre visible del remitente
  
  • Define el nombre que se mostrará como remitente de los mensajes en el chat. Este es el nombre que los visitantes verán en las respuestas enviadas a través del widget.
• Mensaje de bienvenida
  
  • Ingresa el mensaje predeterminado que se muestra cuando un visitante inicia un chat en una página que no tiene un mensaje emergente configurado. Este mensaje marca el tono de la conversación y anima a los visitantes a interactuar.

Elegir el modo de visualización del widget

En “Modo de visualización del widget”, selecciona cómo debe aparecer y comportarse el AI Growth Widget en tu sitio web. Este ajuste determina la experiencia de interacción principal para tus visitantes.

Puedes elegir entre dos modos de visualización:

Widget Navegador

Una barra de chat flotante ubicada en la parte inferior central de tu sitio web.

• Se expande en una experiencia de chat enfocada
• Atenúa el fondo para dirigir la atención hacia la conversación
• Diseñado para interactuar activamente con los visitantes mientras navegan
• Incluye una barra lateral integrada para ver los enlaces compartidos por el agente de IA

Cuando el agente de IA incluye enlaces en su respuesta, la barra lateral se abre automáticamente y muestra el primer enlace en una vista de navegador integrada. Si se incluyen varios enlaces, los visitantes pueden alternar entre ellos desde el pie de la barra lateral, hacer clic en los enlaces del chat para actualizar el contenido de la barra lateral, o abrir la página en una nueva pestaña del navegador.

Esto permite que los visitantes sigan explorando páginas de productos, artículos o formularios sin salir de tu sitio web ni interrumpir la conversación.

💡 Ideal para: descubrimiento de productos e interacción guiada

Widget de soporte

Un ícono de chat clásico ubicado en la esquina de tu sitio web.

• Se abre en una ventana de chat al hacer clic
• Permanece visible sin interrumpir la experiencia de navegación
• Diseñado para ofrecer soporte de una manera conocida y sin fricciones
• Mantiene el contenido de tu sitio web totalmente en foco hasta que los visitantes decidan iniciar una conversación

Esto permite que los visitantes exploren tu sitio web a su propio ritmo y se comuniquen contigo solo cuando necesiten ayuda.

Configurar los ajustes de idioma

En Ajustes de idioma, elige los idiomas que admitirá tu AI Growth Widget. Estos ajustes determinan qué versión de idioma del widget se muestra a los visitantes.

• Idioma principal
  
  • Elige el idioma predeterminado de tu widget. Este idioma se usa cuando el idioma del navegador del visitante no es compatible.
    • Haz clic en el menú desplegable para seleccionar un idioma.

• Idiomas adicionales
  
  • Agrega más idiomas para ofrecer una experiencia localizada a los visitantes
    • Haz clic en “Agregar” para incluir otros idiomas compatibles.
    • Los visitantes verán el widget en un idioma compatible que coincida con la configuración de su navegador. Si no se encuentra una coincidencia, se usará el idioma principal.

Paso 2: Interacción y canales

En este paso, definirás cómo interactúan los visitantes con tu AI Growth Widget. Esto incluye configurar mensajes emergentes, decidir si se recopilan los datos de contacto de los visitantes y elegir qué canales de mensajería externos pueden usar para contactar a tu negocio.

Configurar el mensaje emergente

En Mensaje emergente, puedes crear un mensaje breve que aparece en tu sitio web para saludar a los visitantes y animarlos a iniciar una conversación.

• Nombre del mensaje
  • Ingresa un nombre que te ayude a identificar este mensaje emergente. Este nombre es solo para referencia interna y no se muestra a los visitantes.
• Contenido del mensaje
  • Ingresa el mensaje que se muestra a los visitantes cuando aparece la ventana emergente. Este mensaje debe ser breve y atractivo, y tiene un límite de 500 caracteres.
• Tiempo de visualización
  • Elige cuánto tiempo esperar antes de mostrar el mensaje emergente después de que un visitante llega a la página.
  • Ingresa un número para establecer el retraso en segundos. Por ejemplo, si ingresas 3, el mensaje emergente aparecerá 3 segundos después de que el visitante llegue a la página.
  • Este retraso se aplica a cada visita de página donde el mensaje emergente esté habilitado.

Configurar los ajustes de “Recopilar datos del cliente”

Activa Recopilar datos del cliente si quieres que los visitantes proporcionen su información de contacto antes de iniciar una conversación.

Cuando esta opción está activada, los visitantes deben ingresar los datos requeridos antes de poder continuar chateando a través del widget.

Puedes elegir qué información recopilar:

• El número de teléfono es obligatorio: Los visitantes deben ingresar un número de teléfono válido antes de iniciar una conversación.
• El correo electrónico es obligatorio: Los visitantes deben ingresar un correo electrónico válido antes de iniciar una conversación.

Puedes activar una o ambas opciones, según la información que quieras recopilar.

Configurar los canales de mensajería externos (opcional)

Los canales de mensajería externos permiten que los visitantes contacten a tu negocio a través de plataformas de mensajería compatibles, en lugar de continuar la conversación dentro del widget.

Solo se pueden habilitar y mostrar a los visitantes los canales que ya están conectados en tu espacio de trabajo.

Para cada canal, puedes:

• Seleccionar una cuenta de canal conectada (cuando corresponda)
• Activar o desactivar el canal para controlar si aparece en el widget

Cuando están habilitados, estos canales aparecen como opciones de contacto alternativas en el widget, lo que permite a los visitantes elegir cómo quieren comunicarse con tu negocio.

Agregar Llamada telefónica como canal de mensajería externo

También puedes agregar una línea telefónica directa a tu widget, para que los visitantes puedan contactar a tu equipo de ventas o soporte con un solo clic.

En Llamada telefónica, configura lo siguiente:

• Número de teléfono: ingresa el número completo en formato internacional, por ejemplo +1 234 567 890

Cómo funciona para los visitantes:

• En dispositivos móviles: Al tocar la opción de teléfono, se abre el marcador nativo del dispositivo con el número ya cargado
• En computadoras de escritorio: Al hacer clic en la opción de teléfono, es posible que se abra una app de llamadas como FaceTime, o que se muestre el número para que el visitante lo marque manualmente

Cuando está habilitado, el canal Llamada telefónica aparece junto a tus otros canales de mensajería externos en la sección Contáctanos del widget.

Paso 3: Implementar

En este paso, instalarás el AI Growth Widget en tu sitio web y verificarás que funcione correctamente antes de finalizar la configuración.

Instalar e implementar el widget en tu sitio web

Sigue las instrucciones en pantalla para instalar el widget:

1. Ve a tu sitio web
   1. Inicia sesión en la plataforma de tu sitio web y abre el editor de código.
2. Insertar el fragmento de código
   1. Copia el fragmento de código que se muestra y pégalo en el código de tu sitio web.
   2. Para mostrar el widget en páginas específicas, pega el fragmento antes de la etiqueta de cierre </body> en esas páginas.
   3. Para mostrar el widget en todas las páginas, agrega el fragmento a tu encabezado o pie de página global.
3. Guardar y actualizar tu sitio web
   1. Guarda los cambios y actualiza tu sitio web. El widget ya debería aparecer.
4. Probar el widget
   1. Envía un mensaje de prueba a través del widget para confirmar que está conectado a SleekFlow.
   2.  

Verificar tu instalación

Después de instalar el widget, confirma que esté configurado correctamente:

1. Ingresa la URL de la página donde instalaste el widget
2. Haz clic en “Verificar instalación”
3. Revisa el resultado de la verificación

Si la verificación es exitosa

• Verás una confirmación de que la instalación del widget se realizó correctamente
  
• Haz clic en “Listo”, en la esquina inferior derecha, para completar la configuración y publicar tu widget.

Si la verificación falla

• Verás un mensaje que indica que no se pudo verificar la instalación.
  
• Revisa las indicaciones de solución de problemas y verifica lo siguiente:
  • El fragmento de código está instalado en la página o el dominio correctos
  • Los cambios de tu sitio web se hayan publicado
  • El script del widget no esté bloqueado por políticas de seguridad de contenido ni bloqueadores de anuncios