Widget de Peaking AI: Tu Asistente Activo en tu Sitio Web

La presencia digital de tu empresa no está completa sin un canal de atención inmediata. Con el Widget de Peaking AI, puedes crear, personalizar y desplegar tu propio asistente conversacional en cuestión de segundos, permitiéndote capturar leads y resolver dudas directamente en tu landing page o sitio web.

Esta herramienta actúa como un recepcionista digital 24/7, diseñado para integrarse estéticamente con tu marca y operativamente con tu estrategia de atención. En este tutorial, te guiaremos paso a paso para configurar la apariencia de tu widget y obtener el código necesario para su implementación.

¿Por qué implementar el Widget de Peaking?

Atención Inmediata: Reduce la tasa de rebote en tu sitio web al ofrecer respuestas instantáneas.

Personalización Total: Ajusta colores, textos y logotipos para que el asistente se sienta como una extensión natural de tu marca.

Captura de Leads: Convierte visitantes anónimos en prospectos dentro de tu CRM de Peaking AI de manera automática.

Facilidad de Despliegue: No necesitas conocimientos avanzados de programación; el proceso es intuitivo y rápido.

A. Configuración

1. Acceso a la Configuración

Para iniciar el proceso, debes dirigirte al menú de administración de la plataforma:

Navega a la sección de Integraciones en el menú lateral izquierdo.

Dentro del panel de Conectar Nueva Plataforma, localiza la opción de Sitio Web.

Haz clic en el botón azul Activar Widget.

2. Personalización Estética y de Identidad

Una vez activado, se desplegará el panel de Personaliza tu Widget de Chat. Aquí puedes ajustar la apariencia del asistente para que coincida con tu marca:

Logo (opcional): Sube una imagen representativa. Se recomienda un tamaño de 200x200px en formato PNG o JPG.

Color primario y de fondo: Define los tonos exactos utilizando códigos hexadecimales para los botones y la interfaz del chat.

Mensaje de bienvenida: Redacta el primer saludo que verán tus usuarios al abrir el chat.

Nombre del bot: Asigna un nombre público a tu asistente (ej. "Asistente Virtual").

Texto del input: Personaliza el mensaje de sugerencia que aparece en la barra donde el usuario escribe (ej. "Escribe tu mensaje...").

Icono del botón flotante: Selecciona el icono que aparecerá en la esquina de tu sitio web para abrir el chat.

Nota: Del lado derecho de la pantalla, encontrarás una Vista previa en tiempo real donde podrás visualizar cómo lucen todos los cambios realizados antes de publicarlos.

Paso 3: Implementación y Código de Instalación

Al finalizar la personalización, desplázate hacia abajo para obtener los fragmentos de código necesarios para tu sitio web:

Código de Instalación (Modo Flotante): Copia este script y pégalo antes de la etiqueta </body> o dentro del <head> de tu HTML para mostrar el botón flotante tradicional.

Modo Embebido (Nuevo): Si prefieres integrar el chat directamente dentro de una sección específica de tu página, utiliza el snippet junto con un contenedor HTML <div>.

Para concluir, haz clic en Guardar Configuración.

B. Monitoreo de Interacciones en Tiempo Real

Para finalizar con la implementación del canal web, es fundamental saber dónde supervisar la actividad de tus visitantes:

Sección de Mensajes: Una vez que el widget esté desplegado y activo en tu sitio web, todas las consultas generadas por los usuarios aparecerán centralizadas en la sección de Mensajes del menú lateral izquierdo.

Seguimiento en Vivo: Desde este apartado, puedes visualizar en tiempo real cómo el Asistente Virtual interactúa con los leads que llegan desde tu landing page.

Control Total: Esto te permite no solo auditar la calidad de las respuestas de la IA, sino también intervenir en la conversación en cualquier momento si el caso requiere atención humana personalizada.

C. FAQs: Configuración y Despliegue del Widget

¿Dónde inicio la configuración de mi widget?

Para comenzar, debes dirigirte a la pestaña de Integraciones en tu panel de control y seleccionar el botón azul que indica Activar Widget en el apartado de Sitio Web.

¿Qué elementos visuales puedo personalizar en el chat?

Puedes personalizar el Logo, el Color primario para botones y mensajes del usuario, el Color de fondo de la cabecera, el Mensaje de bienvenida, el Nombre del bot y el Texto del input.

¿Cómo puedo estar seguro de que los colores y logos se ven bien antes de publicarlos?

El panel de configuración incluye una Vista previa interactiva del lado derecho que muestra en tiempo real todos los cambios que realices en el diseño.

¿Qué diferencia hay entre el Código de Instalación y el Modo Embebido?

El Código de Instalación tradicional se utiliza para mostrar el widget como un botón flotante en cualquier parte de tu sitio web.

El Modo Embebido te permite integrar la ventana del chat directamente dentro de una sección o contenedor específico de tu página HTML.

¿Dónde debo pegar el código en mi sitio web?

El script debe copiarse y pegarse preferentemente antes del cierre de la etiqueta </body> o dentro del <head> de tu código HTML para que el widget cargue correctamente.

¿Cómo puedo ver los mensajes que llegan a través del sitio web?

Todas las interacciones generadas desde el widget se pueden monitorear y gestionar en tiempo real desde la sección de Mensajes (Conversaciones) en el menú lateral de Peaking AI.

¿Qué especificaciones debe tener el logo del widget?

Se recomienda utilizar una imagen de 200x200px en formato PNG o JPG para asegurar una visualización óptima en la cabecera del chat.