Cómo agregar un chatbot con IA a tu sitio web (cualquier plataforma, paso a paso)

Agregar un chatbot con IA a un sitio web tiene dos partes: crear el asistente y colocarlo en el sitio. Con Nexoply, la primera parte se hace en el panel de Nexoply, sin programar y sin clave de IA, porque Nexoply se encarga de la IA. La segunda parte es una línea de código. Necesitas:

• Una cuenta de Nexoply. Regístrate gratis: el plan Free incluye 50 conversaciones al mes, sin tarjeta. Los planes pagos empiezan en 19 USD al mes en la página de precios.
• Acceso al lugar donde tu sitio acepta código personalizado: una opción de código del footer en tu creador de sitios, los archivos de tu tema o tus plantillas HTML. En los creadores de sitios alojados, revisa que tu plan permita código personalizado.
• Unos cinco minutos, más el tiempo para revisar la información de tu negocio.

Un chatbot con IA para el sitio de un pequeño negocio es tan útil como lo que sabe. En Nexoply le das tus servicios y precios, preguntas frecuentes, políticas, horarios y zonas de servicio. Lo más rápido es la importación del sitio: escribes la dirección de tu sitio y Nexoply lee tus páginas públicas (Free 15, Starter 40, Business 100, Pro 200 por escaneo), incluidas las hechas con JavaScript, y sugiere servicios con precios, preguntas frecuentes, políticas, horarios y datos de contacto. Tú revisas las sugerencias; no se agrega nada hasta que lo apruebes.

A partir de ahí, el asistente 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 tu panel para revisarla. Los visitantes pueden escribir en cualquiera de 12 idiomas y reciben la respuesta en el suyo. Nexoply no es una bandeja de chat en vivo para agentes humanos y no toma reservas ni pagos por sí mismo; sus botones pueden llevar al visitante a tu página de reservas, tu teléfono o tu WhatsApp. Lee cómo funciona Nexoply para tener el panorama completo.

Abre la página Chatbot en tu panel (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; solo le indica al widget a qué negocio pertenece. Para ver el asistente antes de cambiar tu sitio, usa Abrir una página de prueba con tu chatbot.

En un sitio que editas como archivos HTML, pega el código en su propia línea, justo encima de la etiqueta de cierre </body>:

    <!-- …el contenido de tu página… -->
    <script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>
  </body>
</html>

1. 1

   Busca tu footer compartido

   Si tus páginas comparten una plantilla o un include de footer (algo común en sitios PHP y generadores de sitios estáticos), pega el código ahí una sola vez. Si no, pégalo en cada página donde deba aparecer el botón de chat.

2. 2

   Una vez por página

   Basta con una copia por página. El script carga de forma asíncrona, así que ponerlo al final de la página deja que tu contenido aparezca primero.

3. 3

   Sube o publica

   Guarda los archivos y súbelos o publícalos como sueles actualizar tu sitio.

Cada creador de sitios y cada framework tiene un lugar para el código de todo el sitio. Pega ahí la misma línea; las guías de cada plataforma lo explican paso a paso.

• No hace falta un paquete npm. El widget es siempre la misma etiqueta script. También funciona si la etiqueta se agrega desde código, siempre que conserve el atributo data-chatbot y un src que contenga widget.js.
• Apps de una sola página. Se monta una vez en la página, fuera del elemento raíz de tu app, mantiene la conversación mientras el visitante navega y vuelve a revisar las reglas de página cuando cambia la URL. Cargarlo dos veces no causa problemas.
• Renderizado en el servidor. Solo se ejecuta en el navegador y no toca el marcado de tu framework, así que no hay problemas de hidratación.
• Content-Security-Policy. Si tu sitio envía una, permite https://nexoply.com en script-src, connect-src e img-src.
• Pruebas en local. Si completas Permitir solo en estos sitios web, agrega tu host de desarrollo local con su puerto (por ejemplo localhost:3000), o deja la lista vacía mientras pruebas.

Abre tu sitio publicado en una ventana privada nueva. Aparece un botón de chat en la esquina inferior. Haz una pregunta real, como "¿Atienden urgencias los fines de semana?" o "¿Qué zonas cubren?" (encontrarás más ejemplos en la guía de chatbots con IA para plomeros). 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 a tu sitio en aproximadamente un minuto, sin volver a editar el código.

• El código todavía no está publicado. Asegúrate de guardar y publicar o desplegar el cambio, y recarga el sitio publicado en una ventana privada. Las vistas previas de los editores no siempre ejecutan código personalizado.
• Código modificado o incompleto. Revisa que la línea esté completa, desde <script hasta </script>, con data-chatbot y tu clave sin cambios.
• No se permite código personalizado. En los creadores de sitios alojados, el código personalizado puede depender de tu plan (por ejemplo, Wix necesita un plan Premium con dominio conectado, y Squarespace el plan Business o superior).
• Dominios permitidos. Si configuraste Permitir solo en estos sitios web en la página Chatbot, asegúrate de que cada dirección de tu sitio esté escrita exactamente (por ejemplo minegocio.com, o *.minegocio.com para subdominios).
• Content-Security-Policy. Una política estricta bloquea el script hasta que permitas 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, nunca en el código de tu sitio. En Chatbot → Personalizar puedes elegir el ícono del botón de mensaje (o tu propia imagen o SVG), 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 cambiar u ocultar el botón en páginas concretas (por ejemplo /servicios/*). Adapta la ventana de chat a tus fuentes y colores, agrega tu logo o parte de una plantilla lista. Una pantalla de inicio puede mostrar tus propios botones, como Reservar, Llamar o WhatsApp. El widget usa un Shadow DOM, así que el CSS de tu sitio no lo afecta.

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, y las estadísticas muestran los temas, las horas de más actividad y las páginas donde se abrió el chat. Para ver todas las opciones, revisa las funciones del chatbot; para comparar herramientas primero, lee los mejores chatbots con IA para pequeños negocios.