Cómo agregar un chatbot con IA a Webflow (en 5 minutos)

Nexoply es un asistente con IA que creas en su propio panel y agregas a un sitio Webflow con una etiqueta script. Webflow solo guarda esa línea; lo que sabe el asistente, su aspecto y su comportamiento se gestionan en Nexoply, sin programar y sin clave de IA, porque Nexoply se encarga de la IA. En la práctica:

• Conoce el negocio. Agrega servicios y precios, preguntas frecuentes, políticas, horarios y zonas de servicio, o impórtalos desde las páginas públicas del sitio Webflow (15 por escaneo en el plan Free). No se agrega nada hasta que lo apruebes.
• Responde solo con esa información. Tiene instrucciones de decir cuándo no sabe algo en lugar de adivinar, y cada conversación queda en el panel para revisarla.
• Se adapta al diseño. Botón de mensaje o pestaña lateral, colores, fuentes y logo, plantillas listas, un aspecto distinto en celulares, reglas para páginas concretas y botones en la pantalla de inicio como Reservar, Llamar o WhatsApp.
• Responde en 12 idiomas. Quien escribe en otro de los idiomas disponibles recibe la respuesta en ese idioma.
• Lo que no es. No es una bandeja de chat en vivo para agentes humanos y no toma reservas ni pagos por sí mismo; sus botones llevan al visitante a una página de reservas, un teléfono o WhatsApp.

El plan Free incluye 50 conversaciones al mes; los planes pagos empiezan en 19 USD al mes en la página de precios. ¿Creas sitios Webflow para clientes? Cada negocio tiene su propia cuenta de Nexoply y un chatbot, así que configúralo con la información de tu cliente. Para ver todas las opciones, revisa las funciones del chatbot.

Revisa primero estas tres cosas:

• Una cuenta de Nexoply. Regístrate gratis: el plan Free incluye 50 conversaciones al mes, sin tarjeta.
• La información del negocio en Nexoply: servicios y precios, preguntas frecuentes, políticas, horarios y zonas de servicio. Lo más rápido es escribir la dirección del sitio Webflow y dejar que Nexoply importe sus páginas públicas, incluidas las hechas con JavaScript. Tú revisas las sugerencias; no se agrega nada hasta que lo apruebes.
• Acceso a la configuración del proyecto de Webflow y un plan que permita código personalizado. Si no tienes disponible la sección Custom code, revisa tu plan o pídeselo a quien administra el sitio.

En tu panel de Nexoply, abre la página Chatbot (haz clic en Crear chatbot si todavía no lo creaste) y copia el código de instalación. Se ve así:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

En lugar de YOUR-KEY va la clave de tu chatbot, que la página Chatbot ya completa por ti. La clave es pública: no es una contraseña y no da acceso a tu cuenta. ¿Quieres ver el asistente antes de tocar Webflow? Usa Abrir una página de prueba con tu chatbot para probarlo en una página de ejemplo.

1. 1

   Abre Project settings

   En Webflow, abre Project settings del proyecto.

2. 2

   Ve a Custom code

   Abre la sección Custom code. El código de aquí es para todo el sitio, así que se ejecuta en cada página del proyecto.

3. 3

   Pégalo en Footer code

   Pega tu código de Nexoply en Footer code. Ese código se coloca justo antes del final de cada página, que es donde va el script.

4. 4

   Guarda

   Guarda los cambios en Project settings.

5. 5

   Publica

   Publica el sitio. El código personalizado solo se agrega al sitio publicado, así que este paso es el que hace aparecer el botón de chat.

Abre el sitio publicado en una ventana privada nueva, para verlo como lo ve un visitante. Aparece un botón de chat en la esquina inferior. Haz una pregunta real, como "¿Atienden pacientes nuevos?" o "¿Qué debo llevar a mi primera cita?" (encontrarás más ejemplos en la guía de chatbots con IA para clínicas). En segundos, la conversación aparece en Conversaciones en tu panel de Nexoply. A partir de ahí, los cambios que hagas en el panel llegan al sitio en aproximadamente un minuto, sin volver a publicar en Webflow.

• Sin publicar. Guardar Project settings no basta: publica el sitio y vuelve a cargarlo.
• Lo revisas en el Designer. Revisa el sitio publicado en una ventana privada, no el Designer.
• Campo equivocado o código incompleto. Abre otra vez Custom code y revisa que el código esté en Footer code, completo y sin cambios, desde <script hasta </script>.
• Plan o permisos. Si no puedes guardar código personalizado, revisa que tu plan de Webflow lo permita o que tu rol en el proyecto te deje editar Project settings.
• Dominios permitidos. Si configuraste Permitir solo en estos sitios web en la página Chatbot, incluye cada dirección donde se publica el sitio (por ejemplo miclinica.com, o *.miclinica.com para subdominios).
• Content-Security-Policy. Si el sitio envía una Content-Security-Policy, permite https://nexoply.com en script-src, connect-src e img-src.
• Chatbot apagado o bloqueadores de anuncios. Comprueba que el interruptor Chatbot activado esté encendido. En casos raros, una extensión del navegador bloquea los widgets de chat; prueba con otro navegador.

El diseño se define en tu panel de Nexoply, no en Webflow. En Chatbot → Personalizar puedes elegir el ícono del botón de mensaje (tu propia imagen o código SVG pegado), un texto, la forma, el tamaño, los colores, el borde, la sombra y la posición, o usar en su lugar una pestaña lateral en el borde de la pantalla (como "Ayuda"). Puedes definir un aspecto distinto en celulares y usar reglas de página para cambiarlo en páginas concretas (por ejemplo /servicios/*). Adapta la ventana de chat a las fuentes y colores del sitio, agrega un logo o parte de una plantilla lista. Una pantalla de inicio puede mostrar tus propios botones, como Reservar, Llamar o WhatsApp.

Para abrir el chat desde uno de tus propios botones de Webflow, un script corto puede llamar a window.dispatchEvent(new Event("nexoply:open-chat")); para abrirlo apenas carga la página, agrega data-open="true" a la etiqueta script. Después, revisa las conversaciones con frecuencia: las preguntas que el asistente no pudo responder aparecen en una lista y puedes convertirlas en preguntas frecuentes con un clic. Lee cómo funciona Nexoply para tener el panorama completo, o mira cómo agregar un chatbot con IA a cualquier sitio web para otras plataformas.