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 que reflejan la estructura de este artículo: Instalar (snippets y acceso), Apariencia (estilo visual) y Contenido de texto (los mensajes y etiquetas que ve la persona visitante).

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 incrustar el Widget en tu sitio web

1. Localiza el código de tu página

   Abre el archivo HTML de tu página o accede al editor de código de tu constructor de webs.

2. Obtén el código del Widget

   • Inicia sesión en la app de Quickchat AI.
   • Ve a la sección Tu sitio web dentro de la categoría Canales en la barra lateral izquierda.
   • Haz clic en la pestaña Instalar.
   • Copia el código del Widget script.

3. Pega el código

   Inserta el Widget script justo antes de la etiqueta de cierre </body> en todas las páginas donde quieras que aparezca el Widget.

Si usas WordPress

La forma más sencilla es nuestro plugin oficial del Agente de Quickchat AI: instálalo desde el Directorio de Plugins de WordPress, pega tu Scenario ID y el Widget aparece automáticamente, sin necesidad de editar el código del tema. La guía de WordPress tiene instrucciones paso a paso, además de una opción de script manual por si prefieres no usar el plugin.

Si usas un Website Builder

Si usas plataformas como WordPress, Webflow o Wix, consulta su documentación sobre cómo añadir código personalizado.

Para 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 tiene dos controles de acceso que se aplican a tu despliegue:

Acceso a Widget e Integración

Un interruptor maestro en la parte superior de la pestaña Instalar. 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.
• Remover 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.
   • 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.