Integra el chat con IA en tu sitio web
Añade un chatbot inteligente con IA a cualquier sitio web en minutos. Copia una línea de código, pégala y observa cómo tu sitio cobra vida con atención al cliente inteligente 24/7. No se necesitan conocimientos de programación.
¿Qué es la integración del widget?
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.
Creas un chatbot
Crea un asistente de IA que conozca tus productos, servicios y preguntas frecuentes. Tarda unos 5 minutos.
Copia el código de integración
Te damos una sola línea de código sencilla. Tiene este aspecto: <script src="...">
Pégalo en tu sitio web
Añade ese código al HTML de tu sitio web. El widget de chat aparece al instante. ¡Tus visitantes ya pueden chatear con tu IA!
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.
4 formas de mostrar tu widget de chat
Elige cómo aparece el chat en tu sitio web. Cada estilo funciona mejor en situaciones diferentes: elige el que encaje con el diseño de tu sitio.
Modo burbuja
Un 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 lateral
El 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 push
Como 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 panel
El 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.
Cómo integrar tu widget de chat (5 minutos)
Sigue estos sencillos pasos para añadir chat con IA a tu sitio web. No se necesita experiencia en programación: si sabes copiar y pegar, ¡puedes hacerlo!
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.
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.
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).
Display Modes:
• Bubble - Floating chat button in corner
• Sidebar - Slide-in panel from left/right
• Push - Pushes your page content aside
• Drawer - Pulls up from the bottomConsejo: ¿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.
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.
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.
<script>
window.gnosariConfig = {
agentUri: 'your-agent-uri',
apiUrl: 'https://gnosari.com',
displayMode: 'bubble',
position: 'bottom-right'
};
</script>
<script src="https://gnosari.com/widget.js"></script>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.
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.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<!-- Your website content -->
<!-- Paste embed code here -->
<script>window.gnosariConfig = {...};</script>
<script src="https://gnosari.com/widget.js"></script>
</body>
</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.
Crea temas de chat reutilizables
Diseña el aspecto de tu chat una sola vez y luego aplícalo a todos tus chatbots. Los temas de chat te permiten personalizar colores, mensajes de bienvenida, sugerencias de conversación y mucho más, todo en un solo lugar.
Temas de color
Elige entre más de 10 hermosas paletas de color o crea los colores de tu propia marca.
Experiencia de bienvenida
Configura ventanas modales de bienvenida, mensajes de saludo y experiencias para visitantes nuevos.
Sugerencias de conversación
Añade sugerencias iniciales y propuestas de seguimiento para guiar las conversaciones.
Patrones de fondo
Añade patrones sutiles, como los de WhatsApp, para que tu chat resulte único y refleje tu marca.
Tema de atención al cliente
Morado + modal de bienvenida
Tema de asistente de ventas
Verde + sugerencias iniciales
Tema de centro de aprendizaje
Azul + fondo con patrón
Cómo crear un tema de chat
Diseña experiencias de chat atractivas y acordes con tu marca en unos pocos clics. Ve los cambios al instante con nuestra vista previa en vivo.
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.
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!
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.
Welcome Options:
• Welcome Modal - Attention-grabbing intro
• Typewriter Effect - Animated headline
• Greeting Message - AI says hello first
• Empty State - Title and descriptionConsejo: Los modales de bienvenida son ideales para explicar en qué puede ayudar tu chatbot. ¡La primera impresión importa!
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.
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.
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.
Todo lo que necesitas para una integración perfecta
Nuestro sistema de widgets está diseñado para funcionar sin problemas en cualquier sitio web, dándote control total sobre el aspecto y la experiencia.
Código de integración de una sola línea
Solo 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ón
Burbuja (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 marca
Adapta 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 vivo
Ve 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ápido
Script 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 privacidad
Controla 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.
Funciona en todas las plataformas web
Tanto si creaste tu sitio con WordPress, Shopify, Wix o código personalizado, nuestra integración funciona en todas partes.
WordPress
Shopify
Wix
Webflow
Squarespace
HTML/JS
¿No ves tu plataforma? No te preocupes: nuestra integración funciona en cualquier sitio web que admita JavaScript.
Ver la guía de integración completaPreguntas frecuentes sobre la integración
Preguntas habituales sobre cómo integrar tu chat con IA en cualquier sitio web.
Crea tu chatbot con nuestro asistente (5 minutos), abre el configurador del widget, elige tu modo de visualización y colores, haz clic en "Obtener código de integración" y pega la etiqueta de script en el HTML de tu sitio web, antes de la etiqueta de cierre body.
¿Listo para integrar el chat con IA en tu sitio web?
Crea tu chatbot, personaliza el diseño y ponlo en marcha en minutos. Tus visitantes te agradecerán las respuestas instantáneas y útiles.
Empieza a usar Gnosari para potenciar tu atención al cliente