Sitio web

Hay tres formas de poner tu Agente de Quickchat AI en la web. Elige la que mejor se adapte a la superficie que quieras mostrar:

• Widget: la burbuja de chat flotante en la esquina de tu sitio. Ideal para soporte de uso general.
• Embed: una ventana de chat en línea que se coloca exactamente donde quieras dentro de una página. Ideal para incrustar la IA dentro de una pantalla concreta de tu app, una página del centro de ayuda o una página de detalle de producto.
• Página de chat: una experiencia de chat a pantalla completa, alojada y servida por Quickchat (sin instalación, sin código). Ideal cuando quieres compartir un enlace con alguien (por ejemplo, correo de soporte, un Slack interno, beta testers) sin tocar su navegador.

Instala la superficie que elijas desde Canales → Tu sitio web → Instalar. La página tiene tres subpestañas: Instalar (elige cómo añadir tu Agente de IA), Apariencia (estilo visual) y Contenido de texto (los mensajes y etiquetas que ve la persona visitante). La pestaña Instalar se abre con un selector de método, mantiene los controles de disponibilidad y acceso en su propia sección, y muestra un Scenario ID que puedes copiar y que necesitan los plugins y la API.

Herramientas de configuración opcionales

• Comprobar un fragmento de Widget. Comprueba el código pegado con el Scenario ID proporcionado. No accede a tu sitio web.

• Comparar métodos de implementación. Compara los canales, el acceso al sitio y las funciones que declares con las opciones de Quickchat AI. No se inspeccionan tu sitio ni tu cuenta.

• Comparar HTML y Markdown de una página de ejemplo. Obtén el HTML inicial, el contenido Markdown y los enlaces de herramientas de una muestra fija de Quickchat AI. No ejecuta JavaScript ni inspecciona sitios arbitrarios.

Los formularios están en inglés.

Widget

El Widget te permite incrustar tu Agente de Quickchat AI directamente en tu sitio web, ofreciendo a las personas usuarias una forma fluida de interactuar con la IA. El Widget se muestra normalmente como una burbuja de chat en la esquina inferior derecha de tu página. Al hacer clic, se expande en una ventana de chat, lo que permite a quien lo usa hacer preguntas, obtener ayuda o acceder a información.

Cómo añadir el Widget a tu sitio web

Abre Canales → Tu sitio web → Instalar. La pestaña empieza con «¿Cómo quieres añadir tu Agente de IA?» y enumera los métodos de instalación, del más sencillo al más avanzado. Elige el que se ajuste a tu sitio:

• WordPress: instala gratis nuestro plugin oficial del Agente de Quickchat AI, pega tu Scenario ID y el Widget aparece automáticamente, sin necesidad de editar el código del tema.
• Shopify: añade el Widget a través del Editor de temas de tu tienda. Consulta la guía de Shopify.
• Webflow, Wix y otros: copia un solo snippet, pégalo en la configuración de código personalizado para todo el sitio de tu constructor y aplícalo a todas las páginas. No uses un elemento Embed o HTML en una página. Consulta Constructores de sitios.
• Comparte un enlace en su lugar: no instales nada; comparte el enlace de tu Página de chat alojada.
• Instalar manualmente con código: copia el snippet sin procesar del Widget o del Embed y pégalo tú mismo en tu HTML.

Cada método abre un panel específico, paso a paso, con solo el código o el ID que necesita.

Tu Scenario ID aparece en la parte superior de la pestaña Instalar como un campo que puedes copiar. Es el identificador que necesitan los plugins y la API, así que cópialo desde aquí siempre que un paso de configuración te lo pida.

Instalar manualmente con código

Si gestionas tu propio HTML, expande Instalar manualmente con código en la pestaña Instalar y:

1. Copia el snippet del Widget.
2. Abre el archivo HTML de tu página. En un constructor de sitios, usa en su lugar su configuración de código para todo el sitio (consulta Constructores de sitios).
3. Pega el snippet justo antes de la etiqueta de cierre </body> en todas las páginas donde quieras que aparezca el Widget.

Constructores de sitios

En Webflow, Wix, Squarespace, Hostinger y constructores similares, añade el Widget una sola vez, desde la configuración de código para todo el sitio del constructor:

1. Abre la configuración que añade código a todas las páginas. Según el constructor, se llama Custom code, Code injection, Footer code o Body end.
2. Pega ahí el snippet del Widget y aplícalo a todas las páginas. Si puedes elegir dónde va el código, elige el pie de página o el final del body. El snippet no funciona en el head.
3. Publica tu sitio. La burbuja de chat aparece en todas las páginas.

Precaución

No añadas el Widget con un elemento Embed o HTML colocado en una página. Muchos constructores muestran esos elementos dentro de un marco pequeño y separado, y el Widget no puede abrirse ahí. Incluso donde se carga, solo aparece en esa página.

Dónde está la configuración para todo el sitio:

Constructor	Configuración de código para todo el sitio
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code, luego All pages y Body - end. Requiere un dominio conectado.
Squarespace	Custom Code → Code Injection → Footer. Planes Core, Plus, Advanced y algunos planes antiguos.
Hostinger Website Builder	More (⋯) → Integrations → Custom code. Los scripts se cargan automáticamente al final de la página.

Los menús pueden cambiar y aparecer traducidos al idioma de tu constructor. Si tu constructor o tu plan no tiene una configuración de código para todo el sitio, comparte en su lugar el enlace de tu Página de chat.

¿Necesitas ayuda?

¿No eres desarrollador? La pestaña Instalar tiene dos atajos en ¿Necesitas ayuda?:

• Pídele ayuda a la IA: abre el asistente integrado en la app, con una pregunta ya rellenada sobre cómo añadir el Agente a tu sitio web.
• Enviar instrucciones por correo a un desarrollador: envía a un compañero todo lo que necesita (el snippet del Widget, tu Scenario ID y un enlace a esta guía) para que pueda instalarlo por ti.

Para más ayuda, escríbenos a contact@quickchat.ai.

Página de chat

La Página de chat es una versión alojada y a pantalla completa de tu Agente de IA que vive en una URL de Quickchat. No hay nada que instalar: comparte el enlace y tus visitantes podrán chatear con tu Agente directamente en su navegador. Úsala cuando:

• Quieres una experiencia de chat pero no tienes un sitio web (o no quieres tocar su código).
• Estás compartiendo la IA internamente con un grupo pequeño (beta testers, equipo de soporte, prospectos de ventas) y necesitas un enlace con acceso controlado en lugar de un widget público.
• Quieres enviar la IA como un canal de seguimiento en correo, Slack o tu CRM.

Configura quién puede abrir la Página de chat desde Instalar → Acceso a la página de chat (consulta Control de acceso más abajo).

Iniciar una nueva conversación

Para reiniciar el chat y empezar de cero:

• Widget o Embed: Abre el chat y haz clic en el botón con un lápiz dentro de un cuadrado en la esquina superior derecha de la ventana de chat.
• Página de chat: Selecciona Nuevo chat en la barra lateral o usa el botón con un lápiz dentro de un cuadrado en el encabezado.

Esto inicia una nueva conversación con tu Agente de IA. La conversación anterior permanece en la Bandeja de entrada. Al cerrar y volver a abrir el Widget o al actualizar la página, puedes retomar la conversación existente. Pedirle a la IA que «reinicie» o «borre el chat» no inicia una nueva conversación. No necesitas borrar las cookies del navegador.

Control de acceso

La pestaña Instalar mantiene los controles de acceso en una sección plegable llamada Disponibilidad y acceso. Despliégala para encontrar dos controles que se aplican a tu despliegue:

Acceso a Widget e Integración

El interruptor en la parte superior de Disponibilidad y acceso. Cuando está activado, los scripts del Widget y del Embed funcionan con normalidad en los navegadores de tus visitantes. Cuando está desactivado, el Widget y el Embed no están disponibles en tu sitio aunque el script siga pegado, lo que resulta útil para poner la IA temporalmente fuera de línea sin eliminar el snippet, o para restringir el acceso público mientras mantienes la Página de chat abierta para personas invitadas.

Acceso a la página de chat

Independiente del interruptor del Widget y el Embed, puedes restringir quién puede abrir la Página de chat:

• Cualquiera: la URL de la Página de chat es pública. Cualquier persona con el enlace puede usarla.
• Solo usuarios invitados: solo los usuarios del chat que hayas invitado (por correo) pueden usar la Página de chat. Tendrán que autenticarse.
• Nadie: la Página de chat queda completamente desactivada.

El enlace Invitar a los usuarios del chat abre Configuración → Organización → Miembros del equipo. El formulario de invitación actual ofrece roles de equipo con permisos de acceso al panel; no incluye un rol separado para usar solo el chat ni una sección Usuarios del chat. Consulta Miembros del equipo y roles antes de invitar a alguien.

Personalización

Las subpestañas Apariencia y Contenido de texto te permiten adaptar el aspecto del Widget, el Embed y la Página de chat, así como el texto que ven tus visitantes. Las tres superficies de despliegue comparten estos ajustes: cámbialos una vez y se aplican en todos los lugares donde esté desplegado tu Agente.

El panel derecho de las pestañas Instalar/Apariencia/Contenido de texto tiene sus propios controles de vista previa: alterna entre las vistas de Widget, Embed y Página de chat, y entre las vistas de escritorio (Desktop) y móvil (Mobile), para ver tus cambios antes de publicar.

Apariencia

Estilo visual para las superficies de chat, agrupado en Marca, Tamaño y posición, Tema y Otras configuraciones.

Marca

• Avatar del agente de IA: la foto de perfil o el logo del Agente, una sola imagen que se usa tanto en el encabezado del chat como en el botón del launcher (máximo 5 MB). Es un único ajuste, no dos: subes una imagen y aparece en ambos sitios (sustituye al antiguo “logo del encabezado” y al “icono del launcher”, que estaban separados). Cada Agente parte de un avatar predeterminado integrado. Restablecer predeterminado lo restaura, y si lo eliminas no se muestra ningún avatar. Disponible en todos los planes, incluido Free.

El Avatar del agente de IA se aplica al Widget, al Embed y a la Página de chat, pero no a Discord, donde el avatar del bot viene de su app de Discord (consulta Discord).

Tamaño y posición

• Tamaño del launcher: Classic, Input Only o Pequeño. Controla el aspecto del launcher del chat antes de abrirlo.
• Cerrar el launcher: el launcher Classic tiene un pequeño botón de cierre en la esquina superior derecha, que aparece al pasar el cursor en ordenador y siempre está visible en dispositivos táctiles. Oculta el widget solo en la página actual; el launcher vuelve a aparecer al recargar. Los demás tamaños de launcher no tienen botón de cierre.
• Texto del launcher: se muestra solo cuando está seleccionado Pequeño: texto personalizado en el botón del launcher pequeño (hasta 25 caracteres), por ejemplo “Ask AI” o “Chat”. Déjalo vacío para un launcher solo con icono.
• Posición del widget: abajo a la izquierda, abajo en el centro o abajo a la derecha.
• Dimensiones de la ventana de chat: ancho (300–700 px) y alto (400–1200 px) de la ventana de chat.
• Launcher arrastrable: permite a los visitantes arrastrar el launcher a otro lugar de la página. Útil cuando tapa contenido importante.

Tema

Elige cómo se colorean las superficies de chat:

• Claro y Oscuro son presets fijos que se ven igual en todas las cuentas.
• Personalizado desbloquea una paleta completa propia. Cuando seleccionas Personalizado, aparecen controles de color para el fondo, el encabezado y el texto del encabezado, el acento (usado en botones como el botón de inicio previo al chat, los chips de sugerencias y las acciones de valoración), la burbuja de mensaje y su texto, el texto del mensaje de la IA, el color de enlaces, el campo de entrada, los bordes y más. Cada color se comprueba según el contraste WCAG AA frente a su fondo y te avisa cuando una combinación es difícil de leer.

Los colores de marca del encabezado y del acento viven en el tema Personalizado. Claro y Oscuro se mantienen como presets neutros, así que cambiar entre ellos nunca arrastra un color personalizado.

En Transparencia, el ajuste Fondo define cuánto deja ver la ventana de chat. Funciona con todos los modos de tema, y el tema aporta el tono:

• Sólido: la ventana de chat tiene un fondo sólido. Es la opción predeterminada.
• Cristal: la ventana de chat se vuelve translúcida y el sitio web que hay detrás se difumina, como un cristal esmerilado. Se tiñe de blanco en Claro, de oscuro en Oscuro y con tu color de fondo en Personalizado, donde un color de encabezado distinto del fondo conserva ese color para que tu marca siga visible. Opacidad del cristal ajusta cuánto cubre el tono la página, desde el nivel más bajo con el que el texto del tema sigue siendo legible sobre cualquier sitio web (50 % en Claro, 65 % en Oscuro y según tus colores en Personalizado) hasta el 95 %. Si en Personalizado ninguna opacidad mantiene el texto legible con tus colores, el widget usa un fondo sólido y la configuración explica el motivo. Cristal sigue seleccionado y vuelve a aplicarse en cuanto ajustes los colores del texto o del fondo para tener suficiente contraste.

La transparencia se aplica al Widget, también en el teléfono, y al Embed. La Página de chat a pantalla completa siempre tiene un fondo sólido. Las personas visitantes que activan “Reducir transparencia” en su dispositivo ven el estilo Sólido en Chrome y Edge, los navegadores que comunican este ajuste a los sitios web. En un navegador que no puede difuminar la página, Cristal se mantiene casi sólido para que el texto siga siendo legible.

Cuando seleccionas Personalizado, la Chat Page también tiene sus propios colores de barra lateral: Fondo de la barra lateral, Texto de la barra lateral, Hover de la barra lateral y Texto al hacer hover. Se aplican solo a la vista a pantalla completa de la Chat Page, no al widget bubble ni embed. Deja los colores de texto sin definir y la Chat Page elegirá automáticamente un color legible para el fondo que elijas.

También puedes definir el radio de las esquinas (lo redondeadas que son las burbujas, los campos de entrada y los botones) y el tamaño del texto. Ambos se aplican en todos los modos de tema.

Otras configuraciones

• Entrada de voz: permite que los visitantes graben un mensaje hablado con el micrófono del cuadro de chat. Se transcribe en el campo de entrada para que puedan editarlo antes de enviarlo. Las grabaciones se detienen automáticamente a los dos minutos (disponible en los planes de pago).
• Archivos adjuntos: permite que los visitantes adjunten una imagen o un documento a su mensaje. Activado de forma predeterminada; desactívalo para quitar el botón de adjuntar del cuadro de chat.
• Widget de apertura automática: abre automáticamente el Widget cuando se carga la página.
• Ocultar marca de Quickchat AI: oculta el pie “Powered by Quickchat AI” para una experiencia totalmente de marca blanca (disponible en los planes que incluyen marca blanca).

Para permitir que los visitantes valoren sus conversaciones, abre Conversaciones → Insights → Valoración de Conversaciones. Tanto la configuración como los resultados están en esa pestaña; consulta Valoración de Conversaciones.

Contenido de texto

Abre Canales → Tu sitio web → Contenido de texto para editar el saludo y los demás textos que ven los visitantes:

• Texto del encabezado: texto que se muestra en la parte superior de la ventana de chat.
• Mensaje de bienvenida: el primer mensaje del Agente de IA al inicio de cada conversación (por ejemplo, “Hola, ¿necesitas ayuda?”).
• Mostrar como pop-up: interruptor que muestra el mensaje de bienvenida como una burbuja de diálogo flotante junto al launcher (lo que algunas personas llaman el “teaser” o el “mensaje del launcher”) para captar la atención antes de que la persona visitante haga clic. La burbuja muestra el texto del propio mensaje de bienvenida, así que edita ese campo para cambiar lo que dice.
• Iniciadores de conversación: hasta 3 mensajes de ejemplo que se muestran a la persona visitante antes de que empiece a escribir. Al hacer clic en uno, se envía como primer mensaje, lo cual resulta útil para orientar a los visitantes hacia los puntos fuertes de tu IA (“¿Cómo instalo el widget?”, “¿Qué integraciones admites?”).
• Placeholder de entrada: texto de sugerencia en el campo de mensaje vacío.
• Texto de aviso legal: texto que se muestra detrás de la conversación, normalmente para informar a las personas usuarias de que están hablando con una IA. Recomendamos mantenerlo claro y visible.

La sección Pantalla Pre-chat está debajo de estos campos en la misma pestaña Contenido de texto. Actívala allí y edita los textos del encabezado, el botón y el mensaje.

Idiomas y traducciones

Por defecto, tu Contenido de texto se muestra a cada visitante tal como lo escribiste. En los planes de pago puedes añadir traducciones por idioma para que los visitantes vean el widget en su propio idioma.

1. Abre la subpestaña Contenido de texto y haz clic en Traducir en Otros idiomas. Se abre el panel Traducir el texto del widget, con tu texto principal junto a cada traducción como Predeterminado (fuente).
2. Haz clic en Añadir idioma y elige un idioma. Quickchat AI genera una traducción de tu texto actual. Revisa y edita los campos (encabezado, mensaje de bienvenida, iniciadores de conversación, placeholder de entrada, pantalla pre-chat, aviso) para ese idioma. Los cambios se guardan automáticamente.
3. Cualquier campo que dejes vacío recurre a tu texto predeterminado, así que solo traduces lo que quieres cambiar. Si la traducción automática falla, puedes introducir el texto tú mismo.

El número de idiomas que puedes añadir depende de tu plan.

Cómo se elige el idioma de un visitante

Quickchat elige el idioma en este orden:

1. Una anulación explícita que defines en el loader: _quickchat("language", "de") (llámala antes de _quickchat("init", ...)).
2. El atributo <html lang> de tu página — por ejemplo <html lang="de"> muestra tu traducción al alemán. Este es el método recomendado: configura lang correctamente en cada página localizada y el widget lo sigue automáticamente.
3. El idioma del navegador del visitante y, por último, tu texto Default si nada coincide.

Nota

Si el idioma de un visitante no tiene traducción, siempre verá tu texto Default. Nunca queda nada en blanco.

Funciones avanzadas: Parámetros personalizados

El Widget y el Embed de Quickchat AI te permiten pasar parámetros personalizados al inicializar. Sirven para:

• mejorar la analítica (están disponibles en la exportación CSV de la plataforma de Quickchat)
• proporcionar valores a las API Actions y, cuando esté permitido, personalizar las respuestas. La IA recibe un subconjunto filtrado, no todos los parámetros; consulta Contexto del modelo y autorización

Aquí tienes ejemplos de parámetros personalizados útiles:

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name es una clave de contacto reconocida. Las claves personalizadas como customer_tier se pueden almacenar y utilizar en las Actions, pero enviarlas no garantiza por sí solo que la IA las utilice en su respuesta. Trata los valores enviados desde el navegador como datos de entrada sin verificar, no como autorización para acceder a la cuenta de un cliente.

Para añadir parámetros personalizados como los anteriores, incluye la siguiente línea en el script que encontraste en Tu sitio web > Instalar.

El Widget y el Embed usan la misma firma de llamada:

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

Estos atributos se asignan a cada nueva conversación; recomendamos limitarlo a unas pocas claves.

Consejo

Los parámetros personalizados con nombres en snake_case (por ejemplo, order_id, customer_tier) pueden inyectarse directamente en las API Actions como {{metadata_order_id}}, {{metadata_customer_tier}}, etc. Consulta Variables de AI Action para más detalles.

Script de ejemplo:

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

El Embed te permite colocar el Agente de Quickchat AI directamente dentro de una página como una ventana de chat en línea, en lugar de una burbuja flotante. Úsalo cuando quieras que el chat se ubique en un punto concreto de la página: una columna del centro de ayuda, una página de contacto, una barra lateral dentro de la app, etc.

Cómo añadir el Embed

1. Obtén el código del Embed

   • Inicia sesión en la app de Quickchat AI.
   • Ve a Canales → Tu sitio web en la barra lateral izquierda.
   • Haz clic en la pestaña Instalar y luego expande Instalar manualmente con código.
   • Copia el Embed snippet (incluye tanto el contenedor <div id="quickchat-embedded"> como el script del loader).

2. Abre el archivo HTML de tu sitio web, o la página en tu constructor de sitios.

3. Pega el código

   • Inserta el Embed snippet dentro del <body> de tu página.
   • Colócalo en el punto exacto donde quieras que aparezca la ventana de chat. El <div> controla el tamaño: ajusta el style="height:600px" en línea para que encaje con el hueco de tu maquetación.
   • En un constructor de sitios, añade un elemento de código o HTML en el punto donde debe aparecer la ventana de chat y pega ahí el snippet.

Nota

El Embed solo funciona cuando tu constructor inserta el código directamente en la página. Algunos constructores, como Wix, muestran los elementos HTML dentro de un marco separado, y el Embed no puede cargarse dentro de un marco. Si la ventana de chat no aparece en tu página publicada, añade en su lugar el Widget desde la configuración de código para todo el sitio, o comparte el enlace de tu Página de chat.