Integrar un chatbot en Wix: guía paso a paso

Wix tiene una función de chat integrada, pero es una herramienta de chat en vivo básica que requiere una persona del otro lado. Cuando nadie está conectado, los visitantes reciben un formulario de contacto. Eso no es suficiente cuando alguien está navegando tu sitio a las 11 de la noche tratando de decidir si reservar tu servicio o comprar tu producto.

Un chatbot de IA entrenado con el contenido de tu sitio responde esas preguntas al instante, sin intervención humana. Esta guía cubre dos métodos para agregar un chatbot a Wix, recorre la configuración de principio a fin y explica cómo obtener los mejores resultados.

Chat integrado de Wix frente a chatbot de IA

Antes de entrar en la instalación, vale la pena entender por qué un chatbot de IA dedicado es distinto de lo que Wix ofrece de fábrica.

Wix Chat funciona si quieres conversaciones humanas en tiempo real. Pero la mayoría de los dueños de pequeños negocios no pueden estar conectados todo el día. Un chatbot de IA cubre esos vacíos y se encarga de las preguntas repetitivas que representan la mayoría de las consultas de los visitantes.

Puedes usar ambos juntos: el chatbot de IA se encarga de las preguntas comunes automáticamente, y Wix Chat queda disponible para los casos en los que se necesita el toque humano.

Qué necesitas antes de empezar

1. Un chatbot entrenado en Agentkit.

Regístrate gratis, crea un chatbot y entrénalo con el contenido de tu sitio de Wix. El plan gratuito te da 1 chatbot y 50 mensajes por mes.

Agrega la URL de tu sitio de Wix como fuente de entrenamiento. El rastreador indexa tus páginas automáticamente. Después, agrega pares de preguntas y respuestas para tus temas más importantes (precios, horarios, proceso de reserva, política de devoluciones).

Para una guía detallada sobre entrenamiento, consulta Cómo entrenar un chatbot con el contenido de tu sitio web.

2. Un plan Premium de Wix.

Agregar código personalizado a Wix requiere un plan Premium (de cualquier nivel). Los sitios gratuitos de Wix no admiten incrustaciones de HTML personalizado ni Velo.

Método 1: incrustación de HTML (recomendado)

Este es el método más simple y funciona para todos los usuarios de Wix con un plan Premium. Agregas el script del chatbot mediante un elemento de incrustación de HTML en el Editor de Wix.

Paso 1: obtén tu código de incrustación

En el panel de Agentkit, ve a Configuración de tu chatbot y luego a Incrustar. Verás dos opciones de incrustación. Para Wix, usa el código de incrustación de iframe:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

También puedes usar el widget de JavaScript, pero el elemento de incrustación de HTML de Wix maneja los iframes de forma más confiable que las etiquetas de script. El método de iframe es el enfoque recomendado para Wix.

Paso 2: agrega la incrustación de HTML a tu página

1. Abre el Editor de Wix de tu sitio.
2. Haz clic en el botón Add (el ícono azul "+") en la barra de herramientas izquierda.
3. Selecciona Embed Code y luego Embed HTML.
4. Aparece un elemento HTML en tu página. Haz clic en él y selecciona Enter Code.
5. Cambia a la pestaña Code (no la pestaña URL).
6. Pega el código del iframe del Paso 1.
7. Haz clic en Update.
8. Cambia el tamaño y la posición del elemento donde quieras que aparezca el chatbot en la página.

Paso 3: hazlo disponible en todo el sitio (opcional)

El método de incrustación de HTML agrega el chatbot a una sola página. Si quieres que el chatbot esté en todas las páginas, tienes dos opciones:

Opción A: agrégalo al encabezado o pie de página del sitio.

1. En el Editor de Wix, haz clic en la sección Header o Footer de tu página.
2. Agrega el elemento de incrustación de HTML al encabezado o pie de página.
3. Como el encabezado y el pie de página aparecen en todas las páginas, el chatbot estará disponible en todo el sitio.

Opción B: usa la función "Custom Element" del App Market de Wix.

1. Ve a Add, luego Embed Code y luego Custom Element.
2. Configúralo para cargar el script de tu chatbot en todas las páginas.

La Opción A es más simple para la mayoría de los usuarios.

Paso 4: publica y verifica

1. Haz clic en Publish en la esquina superior derecha del Editor de Wix.
2. Visita tu sitio en vivo (no la vista previa del editor).
3. Confirma que el chatbot aparece y responde a mensajes de prueba.
4. Revísalo en un dispositivo móvil para verificar el diseño.

Método 2: Velo by Wix (para desarrolladores)

Velo es la plataforma de desarrollo integrada de Wix. Si te sientes cómodo escribiendo JavaScript, Velo te da más control sobre cuándo y cómo se carga el chatbot.

Cuándo usar Velo

• Quieres que el chatbot se cargue de forma condicional (por ejemplo, solo para miembros con sesión iniciada, solo en ciertas páginas).
• Necesitas pasarle datos dinámicos al chatbot (por ejemplo, el nombre del visitante o su nivel de membresía).
• Quieres activar acciones del chatbot mediante código.

Paso 1: activa Velo

1. En el Editor de Wix, haz clic en Dev Mode en la barra de menú superior.
2. Haz clic en Turn on Dev Mode.
3. El panel de código aparece en la parte inferior del editor.

Paso 2: agrega el script mediante el código de la página

1. Selecciona la página donde quieres el chatbot.
2. En el panel de código de la parte inferior, verás un archivo para la página (por ejemplo, Home.js).
3. Agrega el siguiente código para cargar el widget de Agentkit de forma dinámica:

$w.onReady(function () {
  const script = document.createElement('script');
  script.src = 'https://cdn.agentkit.ai/widget.js';
  script.setAttribute('data-chatbot', 'your-chatbot-id');
  script.async = true;
  document.body.appendChild(script);
});

4. Guarda y publica.

Paso 3: carga en todo el sitio mediante masterPage.js

Para cargar el chatbot en todas las páginas:

1. En el panel de código, abre masterPage.js (se ejecuta en todas las páginas).
2. Agrega el mismo código de carga del script dentro de la función onReady.
3. Guarda y publica.

Ejemplo de carga condicional

Si solo quieres el chatbot en ciertas páginas:

// masterPage.js
import wixLocation from 'wix-location';

$w.onReady(function () {
  const path = wixLocation.path;
  const chatbotPages = ['services', 'pricing', 'contact', 'faq'];

  if (chatbotPages.some(page => path.includes(page))) {
    const script = document.createElement('script');
    script.src = 'https://cdn.agentkit.ai/widget.js';
    script.setAttribute('data-chatbot', 'your-chatbot-id');
    script.async = true;
    document.body.appendChild(script);
  }
});

Esto carga el chatbot solo en tus páginas de Servicios, Precios, Contacto y Preguntas frecuentes.

Comparación de opciones de chatbot para Wix

Varias herramientas de chatbot funcionan con Wix. Así se comparan las principales opciones.

Si quieres respuestas con IA entrenadas con tu propio contenido y las opciones de incrustación más flexibles, Agentkit es la opción más sólida. Si necesitas un generador de flujos basado en reglas sin IA, Joonbot está diseñado específicamente para eso. Y si solo necesitas un chat básico entre personas, Wix Chat ya está incluido en tu plan.

Personaliza el chatbot para tu sitio de Wix

Una vez que el chatbot esté activo, configura estos ajustes en el panel de Agentkit para obtener los mejores resultados.

Colores de marca y posición

En Configuración de tu chatbot, personaliza la apariencia del widget:

• Color principal: hazlo coincidir con el color de acento de tu sitio de Wix.
• Posición: la esquina inferior derecha es la predeterminada y funciona para la mayoría de los sitios. Cambia a la esquina inferior izquierda si tu sitio de Wix tiene un elemento en conflicto en la esquina inferior derecha.
• Mensaje de bienvenida: escribe algo específico para tu negocio. "¡Hola! Puedo responder preguntas sobre nuestros servicios, precios y disponibilidad" es mejor que "¿En qué puedo ayudarte?".

Restricción de dominio

Agrega tu dominio de Wix a la lista de dominios permitidos. Esto incluye tanto tu dominio personalizado (por ejemplo, yourbusiness.com) como la URL predeterminada de Wix (por ejemplo, yourbusiness.wixsite.com/yoursite). La restricción de dominio evita el uso no autorizado de tu chatbot.

Instrucciones personalizadas

Agrega instrucciones que definan el comportamiento del chatbot para tu negocio específico:

• "Si alguien pregunta por los precios, siempre menciona la opción de consulta gratuita."
• "Para preguntas sobre disponibilidad, sugiere que reserven a través de la página de programación."
• "Nunca prometas fechas de entrega específicas. Indica que nos contacten para conocer los plazos actuales."
• "Si alguien hace una pregunta que no puedes responder, ofrécete a recolectar su correo electrónico para darle seguimiento."

Captura de leads

Activa la acción de captura de leads para recolectar correos electrónicos de los visitantes interesados. Esto es especialmente valioso para negocios de servicios en Wix, donde convertir a un visitante en un lead es el objetivo principal.

Los leads capturados aparecen en tu panel de Agentkit. Conéctalos con tu herramienta de email marketing o CRM usando Zapier. Consulta la guía de integración para más detalles.

Consejos de entrenamiento para sitios de Wix

Los sitios de Wix suelen usar diseños visuales, animaciones y elementos interactivos que pueden limitar lo que un rastreador web puede extraer. A continuación, cómo maximizar el conocimiento de tu chatbot.

Complementa el rastreo con pares de preguntas y respuestas

Después de entrenar con tu URL, prueba el chatbot en el Playground. Para cualquier pregunta que responda mal, crea un par de preguntas y respuestas con la respuesta ideal. Temas comunes a cubrir:

Sube documentos complementarios

Si tienes PDF, menús, folletos o catálogos de servicios, súbelos como fuentes de documentos. Estos le dan al chatbot información detallada que quizá no esté en tu sitio web en absoluto.

Mantén actualizados los datos de entrenamiento

Cuando actualices tu sitio de Wix, reentrena el chatbot. En el plan Standard ($119.99/mes) o superior, el reentrenamiento automático se encarga de esto por ti. En el plan Free o Hobby, activa un reentrenamiento manual desde el panel de Agentkit después de cambios importantes de contenido.

Solución de problemas

El chatbot no aparece después de publicar

• Revisa tu plan de Wix. El código personalizado requiere un plan Premium.
• Mira el sitio en vivo, no el editor. La vista previa del Editor de Wix no siempre ejecuta scripts personalizados.
• Borra la caché de tu navegador o usa una ventana de incógnito.
• Revisa el código de incrustación de HTML. Asegúrate de haber pegado el iframe o la etiqueta de script completos, sin caracteres adicionales.

El elemento de incrustación de HTML muestra un espacio en blanco

• Aumenta la altura del elemento de incrustación de HTML. El tamaño predeterminado puede ser demasiado pequeño para mostrar la interfaz de chat.
• Asegúrate de que la URL src del iframe sea correcta e incluya el ID de tu chatbot.
• Revisa la consola de tu navegador (F12) por si hay errores de contenido bloqueado.

El chatbot funciona en la computadora pero no en el dispositivo móvil

Wix maneja el diseño responsivo automáticamente, pero los elementos de incrustación de HTML a veces necesitan un ajuste manual para dispositivos móviles. En el Editor de Wix:

1. Cambia a la vista del editor para dispositivos móviles.
2. Busca el elemento de incrustación de HTML.
3. Ajusta su tamaño y posición para dispositivos móviles.
4. Publica y prueba.

Si usas el widget de JavaScript mediante Velo (Método 2), el widget es responsivo de forma predeterminada y debería funcionar en todos los tamaños de pantalla sin ajustes.

El chatbot responde de forma inexacta

Esto es un problema de entrenamiento, no de incrustación. Ve al panel de Agentkit y:

1. Revisa qué páginas se rastrearon correctamente.
2. Agrega pares de preguntas y respuestas para los temas con respuestas deficientes.
3. Haz pruebas en el Playground hasta que las respuestas sean satisfactorias.
4. Agrega instrucciones personalizadas para guiar el tono y el comportamiento del chatbot.

Consideraciones de precio

Así es como los planes de Agentkit se ajustan a los casos de uso típicos de Wix.

La facturación anual ahorra aproximadamente un 20% en todos los planes pagos.

Próximos pasos

Tu sitio de Wix ahora tiene un chatbot de IA que se encarga de las preguntas de los visitantes las 24 horas. Esto es en lo que debes enfocarte a continuación:

1. Perfecciona los datos de entrenamiento con base en la primera semana de conversaciones. Busca patrones en lo que preguntan los visitantes y llena los vacíos en tu entrenamiento.
2. Activa la captura de leads para convertir conversaciones en contactos. Aquí es donde el chatbot se paga solo.
3. Conéctalo con tus herramientas usando Zapier o webhooks. Envía leads a Google Sheets, Mailchimp, HubSpot o lo que use tu equipo. Consulta la guía de integración.
4. Lee la guía de Squarespace si administras sitios en otras plataformas: Agrega un chatbot a Squarespace.
5. Explora todas las opciones de incrustación en la guía completa de incrustación.

Crea tu chatbot gratis →

No se requiere tarjeta de crédito.