Integra el chat con IA en tu sitio web

Imagínalo como colocar un asistente inteligente en tu sitio web. Cuando los visitantes lleguen a tu sitio, verán un botón de chat amigable. Hacen clic y, al instante, están hablando con tu chatbot con IA, que lo sabe todo sobre tu negocio. Explora casos de uso reales en distintos sectores o empieza gratis.

No se requieren conocimientos técnicos Si sabes copiar y pegar texto, puedes integrar nuestro widget de chat. Lo hemos diseñado para que cualquiera, incluso quienes empiezan desde cero, pueda añadir chat con IA a su sitio web. La mayoría termina en menos de 10 minutos.

1. 1

   Crea tu chatbot con IA

   Primero, necesitas un chatbot para integrar. Usa nuestro sencillo asistente para crear uno: solo ponle un nombre, añade la URL de tu sitio web (para que aprenda sobre tu negocio) y elige una plantilla de personalidad. Todo el proceso tarda unos 5 minutos.

   Consejo: Consejo profesional: añade tu sitemap.xml para cubrir todas tus páginas por completo. Tu chatbot aprenderá automáticamente de todo lo que haya en tu sitio.
2. 2

   Abre el configurador del widget

   Una vez creado tu chatbot, ve a su página y haz clic en el botón "Widget". Esto abre nuestro configurador visual, donde puedes ver exactamente cómo se verá tu chat en tu sitio web, ¡en tiempo real!

   Consejo: El configurador muestra una vista previa en vivo en el lado derecho. Cada cambio que haces aparece al instante, así que puedes experimentar con total libertad.
3. 3

   Elige tu modo de visualización

   Elige cómo quieres que aparezca el chat en tu sitio web. El modo burbuja muestra un botón flotante (el más popular). La barra lateral se desliza desde el lateral. El modo push mueve tu contenido para hacer sitio. El panel se despliega desde la parte inferior (ideal para móviles).

   Consejo: ¿No sabes cuál elegir? Empieza con el modo burbuja: es el patrón más familiar para los visitantes de un sitio web y funciona muy bien tanto en escritorio como en móvil.
4. 4

   Personaliza la apariencia

   ¡Haz que el chat encaje con tu marca! Elige el color de tu marca (que se usa para el botón y los acentos), elige la posición (abajo a la derecha es lo más común) y ajusta el ancho de la barra lateral si usas los modos de barra lateral.

   Consejo: ¿Quieres aún más personalización? Crea un tema de chat para añadir modales de bienvenida, sugerencias iniciales, patrones de fondo y mucho más. Los temas se pueden reutilizar en varios chatbots.
5. 5

   Obtén tu código de integración

   Haz clic en el botón "Obtener código de integración". Verás una etiqueta de script sencilla con un aspecto parecido a este. Solo cópiala al portapapeles.

   Consejo: El código de integración incluye todos tus ajustes de personalización. Si cambias los ajustes más adelante, tendrás que actualizar el código en tu sitio web.

   HTMLCopiar

   <script>
     window.gnosariConfig = { agentUri: 'your-agent-uri' };
   </script>
   <script src="https://app.gnosari.com/gnosari-chat-widget-advanced.js"></script>

6. 6

   Pégalo en tu sitio web

   Añade el código de integración a tu sitio web. Pégalo justo antes de la etiqueta de cierre </body>. En WordPress, usa un plugin como "Insert Headers and Footers" o añádelo en el personalizador de tu tema. En Shopify, añádelo a theme.liquid. En Wix, usa el elemento Embed HTML.

   Consejo: ¡Listo! Actualiza tu sitio web y verás el widget de chat. Haz clic en él para probarlo: tu chatbot con IA ya está activo y listo para ayudar a tus visitantes 24/7.

• WordPressApariencia, luego Editor de archivos del tema, luego footer.php, justo encima de la etiqueta body de cierre. En un tema de bloques, un bloque HTML personalizado en la plantilla del pie hace lo mismo sin PHP.Leer guía
• ShopifyTienda online, luego Temas, luego Editar código, luego theme.liquid. Pégalo antes de la etiqueta body de cierre para que el widget cargue igual en producto, colección y carrito.Leer guía
• WixConfiguración, luego Código personalizado, luego Añadir código personalizado. Elige «Body - final» y aplícalo a todas las páginas.
• WebflowConfiguración del proyecto, luego Código personalizado, luego Código del pie. Publica el sitio para que el cambio salga en vivo.
• SquarespaceConfiguración, luego Avanzado, luego Inyección de código. Pégalo en el cuadro Pie, que se aplica a todo el sitio.
• HTML / JSPégalo justo antes de la etiqueta body de cierre de tu plantilla o archivo de diseño, para que cargue en todas las páginas que lo incluyen.

• Modo burbujaUn botón de chat flotante en la esquina de tu página. Haces clic y se abre la ventana de chat. Es el estilo clásico que ves en la mayoría de los sitios web: familiar y fácil de usar.
• Modo barra lateralEl chat se desliza desde el lateral como un panel. Ideal para sitios web donde los clientes necesitan chatear mientras navegan. El chat permanece visible junto a tu contenido.
• Modo pushComo la barra lateral, pero empuja el contenido de tu sitio web para hacer sitio. Nada queda tapado: tu página se ajusta para mostrar el chat y el contenido uno al lado del otro.
• Modo panelEl chat se desliza desde la parte inferior como un panel. Perfecto para sitios web móviles donde el espacio de pantalla es valioso. Resulta natural en teléfonos y tabletas.

• Temas de colorElige entre más de 10 hermosas paletas de color o crea los colores de tu propia marca.
• Experiencia de bienvenidaConfigura ventanas modales de bienvenida, mensajes de saludo y experiencias para visitantes nuevos.
• Sugerencias de conversaciónAñade sugerencias iniciales y propuestas de seguimiento para guiar las conversaciones.
• Patrones de fondoAñade patrones sutiles, como los de WhatsApp, para que tu chat resulte único y refleje tu marca.

1. 1

   Ve a Temas de chat

   Navega a Temas de chat en la barra lateral de tu panel. Haz clic en "Crear tema" para empezar a diseñar tu experiencia de chat personalizada.

   Consejo: Los temas son reutilizables: créalos una vez y aplícalos a varios chatbots. Perfecto si tienes varios chatbots que deben tener el mismo aspecto.

2. 2

   Elige tu paleta de colores

   Elige un tema de color que encaje con tu marca. Ofrecemos más de 10 hermosas paletas prediseñadas, o puedes crear un color personalizado. El color afecta a botones, enlaces, acentos y degradados en todo el chat.

   Consejo: ¡Ve tu color aplicado al instante en la vista previa en vivo del lado derecho de la pantalla!

3. 3

   Diseña la experiencia de bienvenida

   Configura lo que ven los visitantes cuando abren el chat por primera vez. Añade un modal de bienvenida con un titular y una llamada a la acción, define un mensaje de saludo de la IA y personaliza el estado vacío antes de que se envíe cualquier mensaje.

   Consejo: Los modales de bienvenida son ideales para explicar en qué puede ayudar tu chatbot. ¡La primera impresión importa!

4. 4

   Añade sugerencias de conversación

   Ayuda a los visitantes a iniciar conversaciones con sugerencias. Son preguntas en las que se puede hacer clic y que aparecen en el chat: el visitante hace clic en una y la IA responde de inmediato. Ideales para mostrar lo que puede hacer tu chatbot.

   Consejo: Añade entre 3 y 4 sugerencias iniciales que cubran tus preguntas más habituales. Esto ayuda a los visitantes que no saben qué preguntar.

5. 5

   Añade un patrón de fondo (opcional)

   Haz que tu chat resulte único con un patrón de fondo sutil, como los fondos de chat de WhatsApp. Elige entre puntos, ondas, cuadrícula u otros patrones. Ajusta la intensidad para mantenerlo discreto.

   Consejo: Los patrones aportan personalidad, pero mantenlos discretos: no querrás que distraigan de la conversación.

6. 6

   Guarda y aplica

   Ponle un nombre y una descripción a tu tema y luego haz clic en Crear tema. Ahora puedes aplicar este tema a cualquiera de tus chatbots. Cuando actualices el tema, ¡todos los chatbots que lo usan se actualizarán automáticamente!

   Consejo: Crea temas para distintos propósitos: "Atención al cliente" con un modal de bienvenida, "Asistente de ventas" con sugerencias de producto, etc.

• Código de integración de una sola líneaSolo copia y pega una única etiqueta de script. Sin paquetes npm, sin pasos de compilación, sin configuraciones complejas. Funciona en cualquier sitio web que admita JavaScript.
• 4 modos de visualizaciónBurbuja (botón flotante), barra lateral (panel deslizante), push (mueve el contenido) y panel (hoja inferior). Cada modo es totalmente responsivo y está optimizado para pantallas táctiles.
• Personalización completa de marcaAdapta tu sitio web a la perfección con colores, posición y tamaño personalizados. Crea temas reutilizables para una marca coherente en todos tus chatbots.
• Vista previa en vivoVe exactamente cómo se verá tu chat mientras lo configuras. Cada cambio aparece al instante en la vista previa: sin conjeturas, sin sorpresas.
• Ligero y rápidoScript de menos de 50 KB. Se carga de forma asíncrona, por lo que nunca ralentiza tu sitio web. Distribución por CDN global para una carga rápida en todo el mundo.
• Controles de privacidadControla quién puede acceder a tu chatbot. Configúralo como público, protegido con contraseña o privado. Cumple con el RGPD, con ajustes opcionales de recopilación de datos.

• Chatbot de IA para tu sitio webAñade atención al cliente inteligente 24/7 a tu sitio web en minutos. Responde automáticamente las preguntas de los visitantes, genera más leads a través de la conversación y reduce los costes de soporte con IA.Leer guía
• Chatbot de IA para WordPressAñade chat de IA a WordPress en 60 segundos. Sin plugins: solo copia y pega un código de inserción. Compatible con WooCommerce, Elementor, Divi y todos los temas.Leer guía
• Casos de uso de chatbots con IA - Más de 100 ejemplos y soluciones por sectorExplora más de 100 casos de uso de chatbots con IA en atención al cliente, comercio electrónico, sanidad, sector inmobiliario y más de 12 sectores adicionales. Encuentra hoy tu solución de IA.Leer guía