Cómo añadir un chatbot de IA a tu sitio web sin programar

Puedes añadir un chatbot de IA a tu sitio web proporcionando a un agente el conocimiento de tu empresa, configurando sus respuestas e instalando un widget de chat mediante un plugin o el script incluido. El chatbot para sitios web de Quickchat AI reúne el conocimiento, la configuración de las conversaciones y la Inbox del equipo en un solo lugar. Los visitantes hacen preguntas en tu web sin crear una cuenta.

En este tutorial crearás Kestrel Kitchens, una empresa ficticia de diseño de cocinas. Un visitante pregunta cuánto dura una reforma, consulta el coste aproximado de una cocina de 3 por 4 metros y después solicita un presupuesto. El agente responde con la información de la empresa, recoge los detalles del proyecto y permite que un diseñador continúe la conversación.

La configuración básica no requiere programación. Sigue los pasos de conocimiento e instrucciones, captación de contactos y derivación a personas, y después instala el widget. Una API Action opcional envía las solicitudes completas a otro sistema.

Descarga el kit de configuración de Kestrel Kitchens, que incluye el sitio web de ejemplo, el conocimiento, Main Prompt, la configuración y los mensajes de prueba. Son archivos editables para seguir los pasos en el panel, no una importación del agente con un clic. Las capturas y los archivos copiables del kit, los prompts y la configuración permanecen en inglés para reproducir el ejemplo probado.

¿Qué hará el chatbot del sitio web?

El chatbot responde preguntas a partir de tu contenido, guarda los datos necesarios para el seguimiento solicitado y transfiere las conversaciones a tu equipo cuando hace falta una persona.

Cada resultado requiere una comprobación distinta. Un intervalo de precios correcto procede de Knowledge Base. Una solicitud de presupuesto necesita datos de contacto y del proyecto en Inbox. Para verificar una derivación, una persona debe asumir la conversación y enviar una respuesta que llegue al visitante.

El recorrido del visitante en el ejemplo. Una solicitud de presupuesto registra el interés; el diseñador aún debe confirmar el precio y la disponibilidad.

¿Qué necesitas antes de añadir un chatbot?

Necesitas una cuenta de Quickchat AI, información de tu empresa que puedas verificar y acceso a los ajustes de plugins o código personalizado del sitio web.

1. Crea una cuenta de Quickchat AI y completa el registro. Usa un agente independiente para este ejercicio, de modo que sus datos de ejemplo no afecten a un servicio de atención al cliente existente.
2. Prepara tus páginas de servicios, preguntas frecuentes y políticas, o utiliza el conocimiento ficticio del kit. Sustituye los precios y la zona de servicio ficticios antes de desplegarlo para una empresa real.
3. Comprueba que el plan de tu sitio web permite el método de instalación correspondiente. WordPress necesita acceso a plugins; algunos creadores alojados requieren un plan de pago para añadir código personalizado a todo el sitio.
4. Organiza la supervisión de la Inbox de prueba cuando compruebes la derivación a personas. Ten a mano un navegador de escritorio y un teléfono para las comprobaciones finales del sitio web.

Free es para aprendizaje personal y no comercial. El plan Free incluye 50 créditos de IA al mes. El despliegue empresarial requiere un plan comercial, y las pruebas consumen la misma asignación de respuestas que las demás conversaciones de IA. Las suscripciones del creador web y los costes de las API externas son independientes. La sección de costes distingue estos gastos.

Paso 1: ¿Cómo entrenas un chatbot con tu sitio web?

Añade a Knowledge Base las páginas que contienen las respuestas de tu empresa y verifica el contenido importado antes de probarlo. Así proporcionas al agente material de referencia para sus respuestas.

Crea el agente de aprendizaje

1. En la primera pantalla de configuración, selecciona Set up manually. Desde un panel existente, utiliza el + junto a AI Agent (Add new AI Agent) para crear un agente independiente y selecciona Set up manually.
2. En Identity, introduce Kestrel Kitchens en Name your AI Agent. Pega el archivo main-prompt.txt del kit en Describe what you want your agent to do. Este texto se convierte en el Main Prompt del agente, explicado en el Paso 2. Selecciona Next.
3. Deja Knowledge Base vacía por ahora y selecciona Next. Continúa por External apps sin seleccionar ninguna conexión. En Deployment, selecciona Chat widget y después Next.
4. En Choose your plan, utiliza Skip for now para continuar el ejercicio de aprendizaje personal, o selecciona un plan comercial adecuado para uso empresarial. Completa o descarta cualquier oferta opcional que aparezca después.
5. En el panel, confirma el nombre del agente en Identity y abre Knowledge Base. Elige tus propias páginas o el artículo de ejemplo incluido a continuación.

Importa tus propias páginas

1. En Knowledge Base, selecciona Add Website. Elige una sola página o la opción de importar el sitio web, según cuánto contenido necesites.
2. Introduce la URL pública. Si importas un sitio web, revisa las páginas detectadas y selecciona las de servicios, precios, proceso y preguntas frecuentes que deban servir de referencia para las respuestas.
3. Revisa el texto importado. Confirma que los precios incluyen la moneda y el tratamiento fiscal correctos, y que no se han incorporado como fuentes promociones antiguas ni páginas ajenas al tema.
4. Espera a que termine el procesamiento. Aplica o publica los cambios de conocimiento pendientes que muestre el panel antes de probar el widget instalado.

Empieza con unas pocas páginas claras. Un sitio puede mostrar una tarjeta de precios atractiva y dejar las condiciones en otro lugar; el agente necesita ambas cosas. Importar solo la página de inicio puede dejar fuera condiciones de instalación, límites geográficos o políticas de reembolso que hacen útil una respuesta.

Utiliza la fuente de Kestrel Kitchens

Para reproducir el ejemplo sin alojar primero un sitio web, añade sus datos directamente:

1. En Knowledge Base, selecciona Add Article. Esto crea un artículo Untitled y abre Edit Article.
2. Introduce Kestrel Kitchens: services, prices and process en Title. En Content, elige Plain Text y pega el archivo knowledge.txt del kit.
3. Selecciona Save y espera a que el artículo esté Ready. Confirma que su título aparece en la lista de Knowledge Base.

El artículo guardado conserva las condiciones de precios y plazos. Sus datos ficticios coinciden con los del sitio web de ejemplo.

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

La fuente deja deliberadamente sin especificar la financiación. Esto permite probar cómo gestiona el agente una carencia real de información. En un sitio real, mantén actualizadas las páginas de origen y utiliza las opciones de actualización compatibles cuando estén disponibles; la guía de Knowledge Base explica cómo organizar y probar esas fuentes.

Paso 2: ¿Qué debe decir el chatbot y qué no debe prometer nunca?

Utiliza Main Prompt para definir cómo aplica el agente el conocimiento: responder primero, dar una respuesta útil y dejar al equipo decisiones como un presupuesto cerrado.

En Kestrel, las dimensiones de la estancia permiten entender la magnitud del proyecto. No determinan el mobiliario, los electrodomésticos ni los trabajos de obra. El agente debe explicar el intervalo orientativo de £18,000 a £45,000 de la fuente, IVA incluido, sin calcular un precio más preciso a partir de la superficie.

Estos precios son datos ficticios del tutorial. El objetivo es conservar la distinción entre los datos de la fuente y una decisión que aún debe tomar tu equipo.

1. En Identity, selecciona Edit en la tarjeta Main Prompt.
2. Pega el prompt completo que aparece a continuación. Deja que se guarde y vuelve a abrir el editor para confirmar el texto almacenado.
3. Mantén los datos de la empresa en Knowledge Base. Utiliza el prompt para definir el estilo de respuesta, la recogida de datos y las decisiones que requieren una persona.

Main Prompt es el campo de instrucciones. El texto completo que aparece a continuación y en el kit es la versión que puedes copiar.

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

Abre AI Preview y pregunta How long does a full kitchen renovation take?. En la prueba de control local, el agente respondió de 2 a 3 semanas para la visita técnica y el diseño y después de 4 a 8 semanas para la instalación una vez disponibles los materiales. Tanto el plazo como su condición son relevantes.

Inicia una conversación nueva y pregunta Do you offer financing?. La respuesta correcta reconoce que la fuente no confirma ninguna oferta y remite la pregunta a un diseñador. Redactar el prompt con mayor seguridad no aportaría el dato empresarial que falta.

Paso 3: ¿Cómo recoges solicitudes de presupuesto en el chat?

Smart Data Gathering solicita información seleccionada durante la conversación y guarda lo que proporciona el visitante. Para una solicitud de presupuesto, recoge solo lo que necesita el diseñador para el seguimiento.

1. Abre Actions & MCPs, activa Smart Data Gathering y selecciona Edit Action. Establece Name en Quote enquiries y Description en Capture contact and project details for a kitchen design enquiry. El nombre guardado se convierte en el título de la tarjeta.
2. En Data to collect, añade las filas siguientes. Conserva estos nombres de Data point en inglés al reproducir el ejemplo; los nombres de contacto tienen correspondencias especiales con los campos del visitante en Inbox.
3. Establece Reason for collecting information en So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Establece When to ask for data en After exchanging a few messages y How to ask for data en Subtle.
5. Guarda la Action. En AI Preview, haz una pregunta útil sobre el servicio antes de solicitar un presupuesto y revisa los datos guardados en Inbox.

Las preguntas describen la información que se debe recoger. Los ajustes de momento y estilo orientan cuándo preguntar; prueba también la conversación real.

Nombre, correo electrónico, código postal y tipo de proyecto son los datos obligatorios de una solicitud completa en este ejemplo. El plazo es opcional, como explica Main Prompt. Este requisito empresarial es independiente de los ajustes de recogida durante la conversación; el Paso 8 exige los campos obligatorios antes de enviar una solicitud al CRM.

El agente debe responder una pregunta general sobre costes sin exigir una dirección de correo electrónico para dar la respuesta. El visitante también puede rechazar la recogida. Utiliza I am only researching. I do not want to leave contact details. para comprobar que la conversación sigue siendo útil sin peticiones repetidas.

¿Dónde se guardan los datos recogidos?

Abre la conversación en Inbox. Los datos de contacto estándar aparecen en sus campos del visitante; los demás valores recogidos permanecen asociados a la conversación y pueden exportarse mediante Export Gathered Data.

En Where to send data, Email new leads avisa a todos los administradores del agente cuando se recoge por primera vez una dirección de correo electrónico o un número de teléfono. Un nombre por sí solo no envía el correo. Preview y Simulation no envían estas notificaciones, así que comprueba tu propia bandeja de administrador con una prueba controlada en el widget instalado antes de confiar en la entrega por correo. El recorrido local mantiene desactivado el envío de correo externo.

La documentación de Smart Data Gathering describe la recogida, las notificaciones y las exportaciones. En tu sitio, explica por qué pides la información y enlaza tu aviso de privacidad en el widget. La guía de protección de datos para chatbots te ayuda a revisar el flujo de datos completo.

Paso 4: ¿Cómo permites que una persona tome el control del chat?

Human Handoff transfiere una conversación a tu equipo; después, una persona asume el control en Inbox y responde al mismo visitante.

Prepara la derivación antes de publicar el widget. Quien solicite un diseñador no debería tener que completar antes el formulario de presupuesto, y el agente no debe dar a entender que hay alguien conectado fuera del horario de atención.

1. En Actions & MCPs, activa Human Handoff y abre Edit Action.
2. Mantén activadas las reglas estándar Media Message, User Frustration, Customer Support Suggestion y Lack Of Knowledge; deja Irrelevant Advice desactivada. Main Prompt ya explica cuándo ofrecer un diseñador. El ejemplo probado utiliza estas reglas estándar sin añadir reglas personalizadas.
3. Configura los mensajes y la disponibilidad que se indican a continuación y guarda. Mantén Email notifications desactivado durante el ejercicio de aprendizaje y comprueba la derivación directamente en Inbox.

Utiliza un horario en el que una persona supervise realmente Inbox. El horario ficticio no promete una respuesta inmediata.

Durante el horario de atención, pregunta Can I speak to a designer? desde el sitio web. Completa cualquier confirmación de derivación que pida el agente. En Inbox, abre la conversación y selecciona Assign to me si no está asignada, o Take over cuando aparezca ese control. Envía una respuesta humana y confirma que el visitante la recibe. Utiliza Reassign to AI cuando deba volver a responder la IA.

Comprueba quién tiene el control y que la respuesta humana se ha entregado, además de la oferta de transferencia del agente.

Repite la prueba en una conversación nueva fuera del horario configurado. El agente debe explicar la disponibilidad y ofrecer la vía de seguimiento indicada. Si cambias temporalmente el horario para hacer esta comprobación, restablece después el horario real. La documentación de Human Handoff explica los ajustes y el flujo de Inbox.

La guía para transferir conversaciones del chatbot a una persona incluye comprobaciones independientes de quién tiene el control de la conversación, la devolución a la IA y los fallos fuera del horario de atención.

Paso 5: ¿Cómo adaptas el widget a tu sitio web?

Configura la apariencia visual y los textos fijos en Channels → Your Website. El mensaje de bienvenida debe ser lo bastante concreto para explicar qué puede preguntar el visitante.

Apariencia

1. Abre Appearance. Para Kestrel, elige un tema Custom con fondo blanco, cabecera y color de acento verde oscuro (#315448), y texto blanco en la cabecera. Conserva el tamaño de texto predeterminado y los controles redondeados.
2. En Branding → AI Agent Avatar, haz clic en el icono de subida del avatar, elige website/kestrel-avatar.png del kit y selecciona Upload en el cuadro de recorte.
3. Establece Widget window max width en 400px y Widget window max height en 520px. Elige Small como tamaño del botón de apertura, sitúalo a la derecha y utiliza Ask about your kitchen como etiqueta. La etiqueta está disponible con el botón pequeño. Comprueba su posición respecto a los avisos de cookies u otros controles flotantes de tu sitio.
4. Deja Auto-open Widget desactivado. Abrir el widget en cada carga de página interrumpe la navegación, especialmente en un teléfono.

Comprueba la vista previa mientras eliges los colores. La prueba en el sitio real sigue siendo necesaria porque el botón de apertura comparte espacio con los controles de tu web.

Contenido de texto

Abre Text Content y utiliza estos valores:

Los inicios de conversación deben dar paso a tareas útiles. El aviso indica al visitante qué decisiones siguen necesitando un diseñador.

El agente puede responder en el idioma del visitante. Traducir el mensaje de bienvenida fijo y las etiquetas del widget es un ajuste independiente en Other languages, disponible en los planes de pago. En un sitio multilingüe, prueba tanto la respuesta como los textos fijos de la interfaz; la guía de chatbots multilingües explica esa distinción.

Los cambios de apariencia pueden tardar unos minutos en llegar a las sesiones de visitantes con configuración en caché. Recarga antes de concluir que un cambio guardado ha fallado. Hide Quickchat AI Branding requiere Professional o superior; el tutorial de marca blanca cubre las demás superficies que debes revisar.

Paso 6: ¿Cómo instalas el chatbot en tu sitio web?

Instala el Widget en la plantilla compartida del sitio o utiliza la integración compatible de la plataforma. El Widget flotante debe ejecutarse en la página que está consultando el visitante.

1. Abre Channels → Your Website → Install.
2. Activa Widget & Embed access para el widget público.
3. Elige el método de instalación para tu sitio web y copia el fragmento de código o el Scenario ID que se muestra para este agente.
4. Publica el cambio, abre el sitio público y haz una pregunta cuya respuesta sepas que está en Knowledge Base.

Copia el código de la pantalla Install de este agente. Su Scenario ID es un identificador público del widget, no una clave de API privada.

Cualquier sitio web: pega el código del Widget antes de la etiqueta de cierre del cuerpo

Elige Install manually with code y copia el fragmento del Widget. El cargador actual tiene esta forma:

<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("init", "YOUR_SCENARIO_ID");
</script>

Sustituye YOUR_SCENARIO_ID por el valor de Install. Pega el fragmento completo una sola vez, justo antes de </body> en la plantilla compartida, o utiliza el campo de pie de página para todo el sitio del creador web. Este cargador inserta un script en el cuerpo de la página, por lo que colocarlo en la cabecera antes de que exista el cuerpo puede impedir que se cargue.

La ubicación es relevante. Un bloque HTML basado en iframe es una página independiente y no es adecuado para este Widget flotante.

La opción independiente Embed coloca un chat dentro de un contenedor de la página. Utiliza el fragmento que genera si quieres una sección de chat integrada en el contenido. Un bloque HTML que inserte código directamente en la página puede admitir ese patrón; un bloque del creador que aísle el código en un iframe es un caso distinto. Consulta la documentación del canal Website.

WordPress: instala el plugin oficial

1. En WordPress, abre Plugins → Add New, busca Quickchat AI Agent y elige Install Now y Activate.
2. Abre Settings → Quickchat AI Agent.
3. Pega el Scenario ID de la pantalla Install de Quickchat AI y selecciona Save Changes.
4. Abre una página pública y comprueba el widget. Utiliza el plugin o un fragmento manual para no instalar el cargador dos veces.

Necesitas una instalación y un plan de WordPress que permitan plugins. La guía del chatbot para WordPress muestra la interfaz del plugin y las comprobaciones específicas de WordPress.

Squarespace: utiliza la inyección de código en el pie de página

1. Abre el panel Code Injection del sitio. Utiliza la búsqueda de ajustes del panel si la navegación de tu cuenta es distinta.
2. Pega el fragmento completo del Widget en Footer y guarda.
3. Abre la página publicada en otra pestaña del navegador y prueba una respuesta.

Squarespace ofrece Code Injection en Core, Plus, Advanced y algunos planes antiguos. La inyección en el pie de página coloca el código antes de </body> en todo el sitio. Utiliza ese campo para el widget flotante; un bloque iframe de una página no es equivalente. Este código personalizado no se aplica a las páginas de pago de Squarespace.

Wix: utiliza código personalizado al final del cuerpo

1. En el panel del sitio, abre Settings → Custom Code y después + Add Custom Code.
2. Pega el fragmento del Widget y ponle el nombre Quickchat AI widget.
3. Aplícalo a All pages, elige Body - end y después Apply.
4. Prueba el sitio publicado, incluida la navegación a otra página.

Wix requiere un sitio publicado con un dominio conectado para el código personalizado. Utiliza el ajuste Custom Code para todo el sitio con este widget flotante.

Webflow: utiliza el código del pie de página y publica

1. Abre Site settings → Custom code.
2. Pega el fragmento del Widget en Footer code y elige Save changes.
3. Utiliza Publish para publicar en el dominio previsto y prueba esa URL publicada.

Los ajustes de código personalizado de Webflow requieren un Workspace de pago compatible o un plan Site activo. Guardar el ajuste no lo publica por sí solo.

Shopify: elige el código del agente existente o la aplicación de Shopify

Para el agente de Kestrel que ya has creado, añade su fragmento del Widget justo antes de </body> en Online Store → Themes → Edit code → layout/theme.liquid, guarda y revisa la tienda. Conserva una copia de seguridad del tema antes de editarlo y vuelve a comprobar la instalación al cambiar de tema. Esta vía muestra el agente que has seleccionado; no configura Actions de productos ni de pedidos.

Para un agente centrado en la tienda, la configuración de la aplicación de Shopify de Quickchat AI conecta la tienda mediante su propio proceso inicial. Tras esa conexión, utiliza Enable Widget in Shopify Theme Editor o abre Online Store → Themes → Edit theme → App embeds. Activa Quickchat AI Widget y guarda. La documentación de aplicaciones integradas de Shopify explica los controles del tema; vuelve a activar la integración de la aplicación al cambiar el tema publicado.

Las rutas de los creadores anteriores se contrastaron con la documentación oficial. Las capturas del ejemplo muestran el sitio de Kestrel y el widget local real; no son capturas de cuentas autenticadas en cada creador web.

Comprueba el código antes de diagnosticar problemas del agente

Estas comprobaciones opcionales trabajan con los valores que proporciones:

• Comprueba un fragmento del Widget. Contrasta el código pegado con el Scenario ID proporcionado. Esta comprobación no accede a tu sitio web.
• Compara métodos de despliegue. Contrasta los canales declarados, el acceso al sitio y las funciones necesarias con las opciones de configuración de Quickchat AI. Esta comprobación no inspecciona tu sitio web ni tu cuenta.

En un navegador compatible, estas comprobaciones también están disponibles como herramientas del sitio. Los enlaces abren los formularios estándar.

Paso 7: ¿Cómo pruebas el chatbot antes de que lo usen los visitantes?

Prueba por separado la respuesta, los datos almacenados y la entrega de mensajes. AI Preview y Simulation Testing ayudan a evaluar el comportamiento; el sitio web publicado demuestra que el visitante puede utilizar el widget instalado.

Ejecuta preguntas independientes en Simulation Testing

Abre Testing → Create Dataset, ponle el nombre Kestrel Kitchens: website launch checks y elige Paste messages. Añade las preguntas sobre duración, precio y financiación que aparecen a continuación, separándolas con una línea que contenga ---. Un salto de línea por sí solo mantiene el texto en un único mensaje de prueba. Configura Evaluation criteria para comprobar los datos y la concisión de las respuestas, y selecciona Run → Start Run. El kit incluye los mensajes y criterios exactos.

Cada fila del conjunto de datos inicia una conversación independiente. Utiliza Simulation para esas preguntas independientes; realiza las comprobaciones de presupuesto de varios turnos y de toma de control humana en una misma conversación de AI Preview o del sitio web. Revisa por separado el registro de la Action y el receptor, porque un evaluador de transcripciones no puede verificar la entrega externa.

Abre una ejecución completada y revisa sus respuestas. Esta respuesta sobre precios conserva el intervalo orientativo; su puntuación no demuestra la entrega a otro sistema.

Utiliza una conversación nueva entre casos independientes. Recargar la página puede reanudar una conversación existente, así que utiliza el control de nuevo chat del widget cuando necesites una prueba desde cero.

Comprueba el sitio web en un teléfono

En pantallas de menos de 768 píxeles CSS, el widget abierto utiliza un diseño de pantalla completa. Comprueba que puedes abrirlo, escribir con el teclado visible, desplazarte por la conversación y cerrarlo para volver al sitio.

Termina con una persona real respondiendo desde Inbox. Una buena respuesta de IA no demuestra que funcione la vía de atención humana. Repite un pequeño grupo de estas comprobaciones tras cambiar fuentes, prompts, Actions o el tema del sitio.

Paso 8: ¿Cómo envías una solicitud completa a tu CRM?

Una API Action opcional puede enviar los campos guardados a un receptor HTTP cuando la conversación ya contiene toda la información obligatoria. El chatbot básico del sitio web ya se puede utilizar sin esta extensión.

La distinción relevante es entre se ha recogido un contacto y esta solicitud está completa. Quickchat AI establece lead_captured cuando recoge por primera vez un campo de contacto estándar, incluido un nombre. Ese indicador por sí solo no demuestra que haya correo electrónico, código postal o tipo de proyecto.

La plataforma comprueba todas las condiciones. El modelo recoge la información; las condiciones determinan cuándo se puede ejecutar la petición.

Prepara el receptor

Utiliza un endpoint de CRM o automatización que controles y que acepte el cuerpo JSON siguiente. El kit incluye un pequeño receptor de demostración local para quienes quieran inspeccionar la petición antes de conectar un CRM. Sus instrucciones de configuración crean un token privado y explican cómo exponer un endpoint HTTPS temporal. Envía únicamente datos de prueba ficticios al receptor de demostración.

Si prefieres una integración gestionada, sigue el tutorial de informes en Google Sheets o el tutorial de CRM personalizado. No actives dos flujos que creen el mismo contacto.

Configura una API Action automática

1. Abre Actions & MCPs → Custom Actions → Add Action → API Action. Elige Create manually si se abre el creador basado en descripciones.
2. Establece API Action Name en Send quote enquiry.
3. Deja What to ask the user first vacío. Esta Action lee los campos que ya ha guardado Smart Data Gathering; no pide al modelo que rellene un segundo conjunto de parámetros.
4. En API Endpoint, selecciona POST e introduce la URL HTTPS /enquiries de tu receptor.
5. Añade las cabeceras, el cuerpo y las condiciones siguientes, y guarda y activa la Action.

Introduce el token únicamente en el ajuste de cabecera de la Action. No lo incluyas en el prompt, en el código del sitio web ni en la conversación con el visitante. El README del receptor de demostración explica cómo generarlo; para una integración real, utiliza la autenticación documentada de tu CRM.

En la pestaña Body, selecciona JSON e introduce:

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Utiliza Add AI Data para insertar los valores integrados y de metadatos correspondientes. conversation_id identifica la conversación. Los demás valores proceden de los campos guardados; los nombres de contacto en inglés se corresponden con visitor_name y visitor_email, mientras que Project type se convierte en project_type. La documentación de variables explica estas correspondencias.

En When to run, elige When metadata matches. En Run when, añade las cinco filas; las condiciones de metadatos se combinan con AND:

En estos campos de texto, is true rechaza tanto los valores vacíos como el texto interpretado como falso. exists solo comprueba que la clave esté presente; una cadena vacía guardada puede superar esa condición. Las pruebas siguientes muestran por qué importa la condición más estricta. Esto comprueba que se ha proporcionado texto utilizable, no que la identidad del visitante o los datos del inmueble se hayan verificado de forma independiente.

Utiliza esta API Action Description:

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

Las dos primeras de las cinco condiciones guardadas. Añade todas las filas de la tabla; When metadata matches las comprueba después de un turno de IA sin que el agente elija la Action.

La Action se intenta una vez por conversación cuando se cumplen todas las condiciones. No vuelve a ejecutarse cuando el visitante añade su fecha de inicio deseada, que es opcional, y una petición enviada que falle no se reintenta automáticamente en esa conversación. Conserva ese dato en Inbox para el diseñador o crea una integración explícita de creación y actualización si tu CRM necesita cambios posteriores.

La petición se ejecuta después del turno de IA y su respuesta no se inserta en el chat. Por eso Main Prompt confirma la recepción de los datos del visitante sin afirmar que un CRM los haya aceptado. Verifica la entrega en el registro de la Action y en el receptor. La documentación de Actions automáticas describe este comportamiento de ejecución.

Prueba con datos parciales y después con la solicitud completa

La primera versión utilizaba exists para los campos de texto obligatorios. Sam proporcionó un nombre y después un correo electrónico en el siguiente mensaje. Smart Data Gathering ya había creado valores vacíos de código postal y tipo de proyecto, así que esas claves existían y la Action envió una petición incompleta. Esto también consumió su único intento para esa conversación.

La corrección consistió en cambiar las cuatro condiciones de campos de texto a is true, manteniendo el resto de la configuración. Repite la prueba en una conversación nueva, proporcionando solo un correo electrónico en el segundo turno. La Action debe esperar a los detalles del proyecto que faltan.

Esto corresponde a una conversación observada, no a una tasa de éxito en producción. Reprodúcelo con una conversación nueva, revisa los campos guardados después de cada turno y comprueba la petición en tu propio endpoint.

La llamada real de la Action devolvió HTTP 201. Abre sus detalles para inspeccionar la petición; el registro guardado que aparece a continuación muestra qué almacenó el receptor.

Un registro real guardado por el receptor de demostración autenticado. Es una solicitud, no un presupuesto ni una reserva confirmados.

La demostración utilizó un receptor local y registró una entrega HTTP real. Un agente alojado en Quickchat AI necesita un endpoint HTTPS accesible públicamente; una URL localhost de tu ordenador no es accesible desde el servicio.

Si no llega nada, revisa View logs en la Action y los metadatos guardados de la conversación. La falta de valores, una Action desactivada y un fallo HTTP requieren soluciones distintas. Corrige la configuración y utiliza una conversación nueva para volver a probar el disparador automático; pedir al mismo chat que lo reintente no reinicia un intento limitado a una vez por conversación.

¿Por qué no aparece el chatbot o muestra ajustes antiguos?

Comprueba la página publicada, la ubicación de la instalación y el acceso del agente antes de cambiar el prompt. Un problema de carga en el navegador es independiente de un problema de calidad de las respuestas.

Si el navegador indica que un recurso está bloqueado, revisa el error exacto de Content Security Policy o del bloqueador. Evita desactivar de forma general las protecciones del sitio. Prueba la página pública por HTTPS y consulta la documentación del canal para la configuración necesaria.

¿Cuánto cuesta un chatbot para un sitio web?

La suscripción y la asignación de uso cubren el servicio de IA; el plan de tu sitio web y las integraciones opcionales tienen costes independientes.

Un crédito de IA no equivale a una conversación. Una conversación puede contener varias respuestas de IA, y los distintos modelos pueden tener costes de créditos diferentes. Incluye Preview y Simulation en el presupuesto de pruebas. Utiliza los precios y asignaciones actuales y la guía de costes de chatbots para estimar tu volumen.

¿Pueden ChatGPT o Claude ayudar a configurar el chatbot?

La conexión de gestión de cuentas de Quickchat AI permite a un asistente compatible configurar los ajustes del agente admitidos y preparar pruebas a partir de estos archivos.

Conecta tu propia cuenta mediante Quickchat AI en ChatGPT o Quickchat AI en Claude, siguiendo la guía Manage with AI. Las herramientas compatibles abarcan conocimiento, Main Prompt, inicios de conversación, Human Handoff, Actions HTTP, pruebas y el código de despliegue.

Completa Smart Data Gathering y los ajustes detallados de Appearance del widget en el panel. También debes autorizar las cuentas externas e instalar el código en los ajustes de tu sitio web. La conexión de cuenta sirve para gestionar tu agente; es independiente de exponer un agente como herramienta MCP.

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

Preguntas frecuentes

¿Cómo añado un chatbot de IA a mi sitio web?

Crea un agente en Quickchat AI, añade el conocimiento de tu empresa, configura Main Prompt, Smart Data Gathering y Human Handoff, e instala su Widget mediante un plugin o el fragmento de código incluido. Prueba en el sitio publicado una respuesta basada en la fuente, la recogida de datos de contacto y la entrega de una respuesta humana.

¿Puedo añadir un ChatGPT personalizado a mi sitio web?

Puedes añadir un asistente de tipo ChatGPT entrenado con tus propias páginas. Este tutorial despliega un agente de Quickchat AI mediante su widget web, para que los visitantes puedan chatear en tu sitio sin iniciar sesión en ChatGPT. Su conocimiento, instrucciones e integraciones se gestionan en Quickchat AI.

¿Puedo añadir gratis un chatbot de IA a mi sitio web?

El plan Free de Quickchat AI permite el aprendizaje personal y no comercial e incluye 50 créditos de IA al mes. Un sitio web de empresa o un despliegue de ventas y soporte para clientes necesita un plan que permita el uso comercial. Las suscripciones del creador web son independientes y las pruebas también consumen créditos de IA.

¿Necesito programar o proporcionar una clave de API?

La configuración básica utiliza ajustes del panel y un plugin, una integración de aplicación o el script incluido. El código del sitio web contiene un Scenario ID público, no una clave de API privada. Conectar una Action de CRM opcional requiere un endpoint adecuado y su autenticación; guarda esa credencial en los ajustes de la Action.

¿Puede un chatbot web recoger contactos y solicitudes de presupuesto?

Sí. Smart Data Gathering solicita los campos elegidos durante la conversación y los guarda en Inbox. Email new leads puede avisar a los administradores del agente después de recoger una dirección de correo electrónico o un número de teléfono. Una API Action puede enviar los campos obligatorios guardados a un receptor configurado; recoger solo un nombre no demuestra que la solicitud esté completa.

¿Puede una persona tomar el control del chat?

Sí. Configura Human Handoff con horario de atención y un mensaje para fuera de ese horario. En Inbox, selecciona Assign to me para una conversación sin asignar, o Take over cuando aparezca ese control, y responde al visitante. Reassign to AI devuelve la conversación al agente.

¿Funciona en WordPress, Shopify, Squarespace, Wix y Webflow?

Cada plataforma tiene una vía de instalación. Utiliza el plugin oficial de WordPress, la integración de la aplicación de Shopify después de conectar el agente de la tienda, o el código adecuado para el pie de página o el final del cuerpo en todo el sitio si ya tienes un agente. Los permisos de plugins y los requisitos del plan para código personalizado varían según el creador web.

¿Por qué no aparece mi chatbot en mi sitio web?

Comprueba la página publicada, el Scenario ID correcto y la ubicación del código al final del cuerpo de la página. Elimina instalaciones duplicadas obsoletas y evita los bloques basados en iframe para el Widget flotante. Si se abre pero no puede responder, comprueba Widget & Embed access y los créditos de IA disponibles.

¿El chatbot ralentizará mi sitio web?

El cargador del widget se descarga de forma asíncrona, pero añade JavaScript y peticiones de red. Compara el rendimiento de carga e interacción antes y después de la instalación en páginas representativas y en un teléfono. La carga asíncrona no demuestra que el impacto en el rendimiento sea nulo.

¿Funciona el chatbot web en teléfonos?

El widget abierto utiliza un diseño de pantalla completa por debajo de 768 píxeles CSS. Prueba el botón de apertura, el teclado, el desplazamiento y el control de cierre en un teléfono. Deja Auto-open Widget desactivado cuando la apertura automática interrumpa la navegación.

¿Puede el chatbot responder en los idiomas de mis visitantes?

El agente puede responder en el idioma del visitante. Traducir el texto fijo de bienvenida, los inicios de conversación y las etiquetas del widget es un ajuste independiente de los planes de pago. Prueba tanto los datos de la respuesta como los textos de la interfaz en cada idioma que quieras ofrecer.