Sitio web

En esta guía, integraremos tu Asistente de IA en tu sitio web mediante Widget o iFrame.

Widget

El Widget te permite incrustar el Agente de Quickchat AI directamente en tu web. Normalmente aparece como una burbuja de chat abajo a la derecha. Al hacer clic, se expande a una ventana de chat.

Cómo incrustar el Widget

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

   Abre el HTML de tu página o el editor de código de tu constructor.

2. Obtén el código del Widget

   • Inicia sesión en la app de Quickchat AI.
   • Ve a Website dentro de Channels en la barra lateral izquierda.
   • Haz clic en Install.
   • Copia el Widget script.

3. Pega el código

   Inserta el script justo antes de </body> en todas las páginas donde quieras mostrarlo.

Si usas WordPress

Con footer.php

1. Entra al panel de WordPress.
2. Ve a Apariencia > Editor del tema y abre footer.php.
3. Pega el script justo antes de </body>.
4. Guarda.

Vídeo paso a paso usando footer.php:

Con un Plugin

1. Instala un plugin como Insert Headers and Footers.
2. Abre su configuración (Settings > Insert Headers and Footers).
3. Pega el script en la sección del pie de página.
4. Guarda.

Vídeo paso a paso usando un plugin:

Si usas un Website Builder

Consulta la documentación de WordPress, Webflow o Wix para añadir código personalizado.

Para ayuda, contact@quickchat.ai.

Personalizar el Widget

En Appearance puedes ajustar el aspecto y la experiencia del Widget.

Opciones:

• Primary Color: color principal de los mensajes del usuario
• Header Background Color: fondo del encabezado
• Header Text Color: color del texto en el encabezado
• AI Avatar Image: avatar del Agente en encabezado y mensajes
• Widget Bubble: icono visible antes de abrir el Widget
• Widget Bubble Size: pequeño, mediano o grande
• Widget Bubble Position: abajo derecha o abajo izquierda
• Widget Chat Window Dimensions: ancho (320–720 px) y alto (520–1020 px)
• Animate AI Responses: mostrar respuestas al generarse (tipo ChatGPT)
• Auto-Open Widget: abrir automáticamente al cargar
• Remove Quickchat AI Branding: experiencia marca blanca
• Animate Chat Header Collapsing: animación suave del encabezado tras el primer mensaje

Funciones avanzadas: Parámetros personalizados

El widget y el iFrame permiten pasar parámetros personalizados al iniciar. Sirven para:

• analítica (aparecen en el CSV de la plataforma)
• personalizar la conversación (la IA es consciente de los parámetros)

Ejemplos ú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

Ejemplo de conversación con parámetros:

Para añadir parámetros como los anteriores, incluye esta línea en el script de Your Website > Install.

widget:

_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",
});

iFrame:

_quickchat_embedded("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",
});

El objeto JSON puede tener hasta cinco claves y se asignarán a cada nueva conversación.

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://widget.quickchat.ai/chat.js","_quickchat");
  _quickchat("host", "app.quickchat.ai");
  _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>

iFrame

<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://widget.quickchat.ai/embed.js","_quickchat_embedded");
  _quickchat_embedded("host", "app.quickchat.ai");
  _quickchat_embedded("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_embedded("init", "0zmn6up7zo");
</script>

iFrame

El iFrame permite incrustar una ventana de chat del Agente de Quickchat en una posición concreta de la página.

Cómo incrustar el iFrame

1. Obtener el código del iFrame de Quickchat

   • Inicia sesión en la app de Quickchat AI.
   • Ve a Website → Channels.
   • Haz clic en Install.
   • Copia el iFrame script.

2. Abrir el HTML o editor de tu web

3. Pegar el código

   • Inserta el iFrame dentro del <body>.
   • Colócalo exactamente donde quieras que aparezca la ventana de chat.