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.

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 y pégalo en la sección de código personalizado o de inserción de tu constructor de webs, idealmente antes de la etiqueta de cierre </body>.
• 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 o el editor de código de tu constructor de webs.
3. Pega el snippet justo antes de la etiqueta de cierre </body> en todas las páginas donde quieras que aparezca el Widget.

¿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).

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.

Para conceder acceso bajo Solo usuarios invitados, haz clic en Invitar a los usuarios del chat junto al selector. Eso te lleva a Configuración de la cuenta → Usuarios del chat, donde puedes enviar invitaciones por correo y gestionar quién tiene acceso.

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: 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.

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.
• 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 derecha o abajo a la izquierda.
• 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.

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

• 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).
• Valoración de Conversaciones: permite a los visitantes valorar la conversación al final. Los resultados aparecen en Insights → Valoración de Conversaciones.

Contenido de texto

La subpestaña Contenido de texto controla cada pieza de texto visible para la persona visitante:

• 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 para captar la atención antes de que la persona visitante haga clic.
• 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.

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)
• personalizar la conversación (Quickchat AI es consciente de todos los parámetros proporcionados)

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

• User name: Mike
• Subscription Tier: VIP
• Most recently purchased item: Silver package (upgraded)
• Next account level: Platinum
• Points required to reach the next account level: 758

Aquí tienes un ejemplo de conversación que muestra a un Agente de IA consciente de los valores proporcionados en los parámetros personalizados:

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", {
  "User name": "Mike",
  "Subscription Tier": "VIP",
  "Most recently purchased item": "Silver package (upgraded)",
  "Next account level": "Platinum",
  "Points required to reach the next account level": "758",
});

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", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758"});
  _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", {"User name": "Mike", "Subscription Tier": "VIP", "Most recently purchased item": "Silver package (upgraded)", "Next account level": "Platinum", "Points required to reach the next account level": "758"});
  _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 el editor de código de tu constructor de webs.

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.