Cómo crear un chatbot de IA white-label con tu marca

Puedes crear un agente de IA en Quickchat AI en una tarde. La parte que la mayoría de las guías omiten es hacer que parezca que lo creaste tú, en lugar de parecer un chatbot agregado desde otra herramienta. Este tutorial cubre esa parte por completo.

Empezarás desde una cuenta vacía, crearás un agente de soporte real para una empresa llamada Brightwater y luego le aplicarás marca de extremo a extremo: sus colores, su logo, su avatar, el launcher que tocan los visitantes, la página de chat compartida que puedes enviar como enlace y la línea “Powered by” en la esquina. Al final tendrás un widget que podrías entregar a un cliente, y una captura de antes y después de cada superficie para demostrarlo.

El mismo agente, antes y después. Las mismas respuestas, las mismas acciones, una cara completamente distinta.

Adaptar tu marca es gratis en todos los planes. Eliminar la línea “Powered by Quickchat AI” es la única parte que requiere el plan Professional. No hay código ni nada que instalar. Y el rango va mucho más allá de un solo aspecto: tres marcas ficticias más abajo convierten el mismo widget en oscuro, pastel y llamativo usando solo ajustes de Appearance.

La versión corta, si quieres avanzar rápido:

1. Primero crea un agente real (un prompt, algo de conocimiento, una acción), para que haya algo que valga la pena personalizar.
2. En Appearance, establece Theme en Custom e introduce los colores de tu marca. Sube tu logo como AI Agent Avatar y elige uno de los tres estilos de launcher.
3. Observa la verificación de contraste integrada mientras eliges colores, y corrige cualquier par marcado.
4. En el plan Professional, activa Hide Quickchat AI Branding para eliminar la línea “Powered by” y poner tu logo en la Chat Page.
5. Inserta el widget en tu sitio, o comparte el enlace de la Chat Page.

El resto de este artículo recorre cada paso con calma, con los valores exactos para copiar.

¿Qué significa crear un chatbot white-label?

Crear un chatbot white-label implica dos tareas separadas, y conviene mantenerlas separadas desde el principio.

La primera tarea es adaptar tu marca: los colores, el logo, el avatar, la forma de las burbujas, el tamaño de fuente. Todo lo que ve un visitante puede llevar tu identidad, y todo está disponible en todos los planes, incluido el gratuito.

La segunda tarea es eliminar la marca del fabricante: la pequeña línea “Powered by Quickchat AI” en el pie del chat y el logo de Quickchat en la Chat Page alojada. Ese interruptor está disponible en el plan Professional y superiores.

Dos tareas, dos planes. Casi todo es gratuito; un interruptor es la parte de pago.

Mantener separadas las dos tareas importa porque puedes hacer la mayor parte del trabajo, y ver la mayor parte del resultado, antes de decidir si actualizas. Una cuenta gratuita puede hacer que el widget parezca completamente de tu marca. El plan Professional elimina la última línea de letra pequeña.

Primero crea un agente real, para que valga la pena personalizarlo

Antes de tocar un solo color, crea un agente que realmente responda preguntas y haga algo útil, para que la marca envuelva un producto real y no una carcasa vacía.

Nuestro ejemplo es Brightwater, una empresa que vende filtros de agua para el hogar: una jarra de encimera, un sistema bajo fregadero y un sistema para toda la casa. El agente ayuda a los visitantes a elegir un filtro, responde preguntas sobre envíos y devoluciones, y puede consultar un pedido. Si estás siguiendo el tutorial con otro negocio, ten presentes tus propios datos mientras avanzas.

Dale una identidad y un prompt

Abre Identity en la barra lateral. Establece Name en el nombre que debe usar el agente para referirse a sí mismo (Brightwater) y coloca su tarea en Main Prompt. El Main Prompt es la instrucción permanente que da forma a cada respuesta, así que describe el rol, el alcance y cómo debe comportarse cuando no sabe algo.

Los dos campos importantes en la página Identity: Name y Main Prompt.

Este es el prompt para copiar:

Eres el asistente de soporte de Brightwater, una empresa que fabrica filtros de agua para el hogar: Brightwater Pitcher, Under-Sink System y Whole-House System. Ayuda a los visitantes a elegir el filtro correcto, entender la vida útil de los filtros y los reemplazos, y responder preguntas sobre envíos, devoluciones y garantía. Sé amable, conciso y práctico, y mantén las respuestas breves.

Cuando un visitante pregunte por un pedido existente y proporcione un número de pedido, llama la acción "Check order status" con su número de pedido, y luego dile el estado, el transportista y la fecha de entrega estimada.

Responde solo a partir de lo que realmente sabes sobre Brightwater. Si no tienes un dato (por ejemplo, una certificación específica de la que no estés seguro), di que no tienes ese dato y ofrece conectarlo con el equipo de Brightwater, en lugar de adivinar.

El último párrafo es el importante. Le indica al agente que admita una brecha en lugar de inventar una respuesta. Probaremos que lo respete.

Agrega conocimiento del que pueda responder

Abre Knowledge Base y agrega algunos artículos cortos: la línea de productos y precios, vida útil de los filtros y costos de reemplazo, envíos, devoluciones y garantía, e instalación. El texto plano está bien. El agente lee estos artículos para responder preguntas, así que escríbelos como le explicarías los datos a una nueva persona de soporte. Para más información sobre cómo obtener y estructurar ese contenido, consulta nuestra guía de base de conocimiento para chatbots.

Cinco artículos cortos cubren toda la demo. Cada uno contiene unas pocas frases de texto plano.

Deja una cosa fuera a propósito. La base de conocimiento de Brightwater no dice nada sobre certificación NSF para eliminación de plomo. Esa brecha es deliberada, para que podamos comprobar qué hace el agente cuando un visitante hace una pregunta que no puede responder desde su conocimiento.

Dale una acción para que pueda hacer algo

El conocimiento cubre lo que el agente puede decir. Una acción cubre lo que puede hacer: llamar una API durante la conversación y usar la respuesta en su contestación. Agrega una para que el agente sea más que una FAQ. Abre Actions & MCPs, elige Add Action y crea una consulta de pedido. Todas las acciones siguen la misma estructura, por lo que esta receta es el patrón para cualquier API que conectes después.

La acción completa en un solo editor. Cada campo de abajo corresponde a una casilla de este formulario.

• API Action Name: Check order status
• What to ask the visitor first (un parámetro):

• Method and URL: GET https://api.brightwater.co/v1/orders/{{order_number}}
• Headers: Accept: application/json
• Body: ninguno (esto es un GET)
• API Action Description:

Busca el estado de un pedido de Brightwater. Llama esta acción cuando el visitante pregunte por un pedido existente y proporcione un número de pedido. Devuelve el estado actual, el transportista y la fecha de entrega estimada.

Apunta la URL a tu propia API de pedidos. La ficha {{order_number}} es el parámetro que definiste arriba, insertado en la URL cuando el agente lo llama. La API Action Description es lo que el agente lee para decidir cuándo disparar la acción, así que escríbela como una instrucción, no como una etiqueta. La ruta generada se cubre en Conecta tu agente de IA a cualquier API, donde una frase se convierte en una acción completa basada en la documentación activa de la API. Para una creación manual campo por campo, consulta Crea un agente de IA gratuito que ejecuta acciones.

Confirma que realmente funciona

Antes de personalizar cualquier cosa, comprueba que el agente se comporte correctamente. Abre AI Preview o el simulador Testing y ejecuta algunos mensajes reales. Cada prueba aparece en tu Inbox como una conversación, así que después puedes inspeccionar exactamente qué hizo el agente.

Haz una pregunta de producto: “¿Qué filtro debería comprar para un departamento? Solo quiero que el agua del grifo sepa mejor.” El agente debería recomendar la jarra y explicar por qué, usando la base de conocimiento.

Luego pídele que haga algo: “¿Puedes revisar mi pedido BW-10432?” La respuesta vuelve con el estado, el transportista y la fecha de entrega, y el Inbox muestra un marcador 1 action called debajo. Al expandir el marcador, se muestra la llamada en sí: el nombre de la acción, el order_number que completó y el código de respuesta de la API.

El comprobante. El marcador debajo de la respuesta se expande para mostrar la llamada exacta, su parámetro y la respuesta 200.

Por último, haz la pregunta que dejaste sin respuesta: “¿El filtro bajo fregadero tiene certificación NSF para eliminar plomo?” Un agente débil inventa una certificación. Uno bueno se abstiene. El nuestro responde que no tiene ese dato en su documentación, que no puede confirmar la certificación y que ofrece conectar al visitante con el equipo. Ese “no” honesto vale más que una respuesta incorrecta con confianza, especialmente en una afirmación de seguridad.

El “no” honesto, textual. El agente rechaza la afirmación de certificación en lugar de adivinar.

Ese es un agente funcional, probado e inspeccionado. Todo lo que sigue es apariencia.

¿Cómo adaptas el chatbot a tu marca?

Todo lo que ve un visitante puede llevar tu marca, y todo vive en una sola página. Abre Your Website y luego la pestaña Appearance. Los controles están agrupados en Branding, Size & Position, Theme y Other Settings.

Sube tu logo una vez. En Branding, el AI Agent Avatar es una sola imagen que cumple tres funciones: es el icono del botón del launcher, el avatar en el encabezado del chat y, cuando ocultas la marca de Quickchat, el logo en tu Chat Page alojada. Sube una versión cuadrada de tu marca y aparecerá en todos los lugares donde aparece el agente.

Define tus colores. En Theme, cambia el modo de Light a Custom. Esto abre una paleta completa: Background color, Header color, Accent color (usado para botones y las burbujas de chat del visitante), Message bubble color, colores de entrada y más. Introduce los valores hex de tu marca. Para Brightwater usamos un Background arena (#F6F3EC), un Header azul marino profundo (#0B2E33) y un Accent turquesa (#0E7C86). Debajo de los colores, Corner radius y Typography te permiten ajustar la redondez y el tamaño de texto para que coincidan con tu propio sitio.

Elige un estilo de launcher. El launcher, el botón que ve un visitante antes de abrir el chat, viene en tres estilos, definidos por el control Launcher size en Size & Position. Classic, el predeterminado, es una tarjeta pequeña con tu avatar, el nombre de tu agente y un cuadro de mensaje. Input Only es una barra de mensaje flotante que se expande en cuanto un visitante la toca. Small es una píldora compacta con tu avatar y una llamada a la acción corta; su texto es el campo Launcher label, que aparece cuando eliges el estilo Small, y si dejas la etiqueta vacía se muestra solo el icono.

Los tres estilos de launcher, un solo control. Los tres adoptan los colores y el avatar de tu tema.

La misma sección establece Widget position (cualquiera de las esquinas inferiores), el tamaño de la ventana abierta (Widget window max width, de 300 a 700 píxeles, y Widget window max height, de 400 a 1200 píxeles) y Draggable Launcher, que permite a los visitantes deslizar el launcher por el borde de la página.

Como el launcher usa el mismo tema y avatar, el estado cerrado lleva tu marca tanto como la ventana abierta. Aquí tienes el launcher Classic antes y después del tratamiento de Brightwater, con el popup de bienvenida activado:

El mismo launcher Classic, predeterminado y con marca. El saludo es el ajuste de mensaje de bienvenida.

Cada control actualiza la vista previa en vivo junto al formulario, así que puedes ver cómo el widget se vuelve tuyo mientras avanzas. Define tus colores, sube tu avatar, elige un launcher, y la tarea de “adaptar tu marca” queda hecha, en cualquier plan.

¿Los colores de tu marca seguirán siendo legibles?

Hay una trampa al adaptar tu marca, y el editor de temas está diseñado para detectarla. Una paleta de marca está diseñada para un logo sobre una imagen principal, no para texto de chat de catorce píxeles. Coloca el mismo acento brillante detrás de texto de cuerpo y a menudo se vuelve difícil de leer.

Mientras eliges colores, el editor calcula la relación de contraste WCAG AA para cada par de texto y fondo, y te avisa en el lugar cuando un par cae por debajo del estándar 4.5:1 para texto normal. La paleta real de Brightwater falla tres veces: el texto terciario, el color de enlace y el placeholder de entrada quedan demasiado claros sobre sus fondos.

El editor marca pares de bajo contraste mientras los eliges, con la relación exacta.

La corrección mantiene el color de marca donde funciona, en botones y en el encabezado, y asigna al texto de cuerpo un tono más oscuro. Tu turquesa de acento funciona muy bien como botón; detrás de un párrafo de letra pequeña, necesita más profundidad.

Misma marca, texto legible. Hacer bien el white-label significa heredar la legibilidad de tu marca, no solo sus códigos hex.

Esta es la parte del white-label que las guías de la competencia omiten. Un chatbot verdaderamente personalizado es uno que se percibe como tu marca y sigue siendo accesible. El editor hace el cálculo para que tú no tengas que hacerlo.

¿Qué tan distinto puede verse el mismo widget?

Todo en esta sección es el mismo widget, configurado completamente desde la pestaña Appearance. El sistema de temas expone cada superficie por separado: quince roles de color, radio de esquina, tamaño de texto, tres estilos de launcher, tamaño de ventana y avatar. Nada requiere código ni CSS personalizado.

Para mostrar el rango, aquí hay tres marcas ficticias más, creadas exactamente como Brightwater.

Basalt, una empresa de herramientas de datos, usa un widget completamente oscuro: fondos casi negros, acento violeta, esquinas marcadas, texto pequeño y un launcher Small solo con icono. (También existe un modo de tema Dark integrado; una paleta personalizada como esta va más lejos y define cada color.)

Basalt: una paleta oscura personalizada, Roundness en Small, Text size Small, un launcher Small solo con icono y una ventana de 460px.

Mara, una marca de cuidado de la piel, va en la dirección opuesta: tonos crema y rubor, esquinas completamente redondeadas, texto grande y el launcher Classic que saluda a los visitantes con un mensaje de bienvenida.

Mara: una paleta cálida personalizada, Roundness Full, Text size Large y el launcher Classic con el popup de bienvenida activado.

Volt, una tienda de e-bikes, combina un encabezado negro con un acento naranja vivo, redondez media y el launcher Input Only.

Volt: una paleta personalizada de alto contraste, Roundness Medium, el launcher Input Only y una ventana de 560px.

Los valores exactos, en los mismos campos de Appearance que ya definiste para Brightwater:

Un detalle se relaciona con la verificación de contraste: las burbujas de Volt usan texto casi negro sobre naranja en lugar de blanco, porque el blanco sobre ese naranja no supera el umbral 4.5:1. La verificación se aplica a cualquier paleta que elijas, y eso mantiene legible incluso una marca llamativa.

¿Cómo eliminas la marca “Powered by”?

Adaptar tu marca aún deja una línea de letra pequeña: una línea “Powered by Quickchat AI” en el pie del chat. Eliminarla es un solo interruptor, disponible en el plan Professional y superiores.

En la parte inferior de la pestaña Appearance, bajo Other Settings, busca Hide Quickchat AI Branding. Su descripción dice “Hide all Quickchat AI branding from the widget, ensuring a fully white-labeled experience.” En el plan gratuito y planes inferiores, el interruptor es visible pero está bloqueado, con un mensaje Upgrade plan to unlock junto a él, así que siempre sabes exactamente dónde está el límite. En Professional y superiores, actívalo.

Puedes ver exactamente qué hace el interruptor de pago antes de decidir si actualizas.

Con el interruptor activado, la línea del pie desaparece del widget. El agente ahora no lleva nada más que tu marca.

¿El white-label también funciona en la página de chat compartida?

No todos los visitantes llegan a través de un widget en tu sitio. Quickchat AI también da a cada agente una Chat Page alojada, una versión de página completa que puedes compartir como enlace, incluir en un correo o poner detrás de un código QR. Encuéntrala en Your Website, en la opción Share a link instead.

Ocultar la marca aquí hace más que eliminar una línea. En la Chat Page, el mismo interruptor reemplaza el logo de Quickchat en la barra lateral por tu propio logo (el avatar que subiste antes), y mueve tu avatar al encabezado de la barra lateral. La página se percibe como tu producto desde el primer vistazo.

La Chat Page, antes y después. Tu logo, tus colores de barra lateral, tu encabezado.

La Chat Page sidebar tiene sus propios colores en el editor Theme, así que puedes llevar tu paleta hasta los bordes de la vista de página completa. Una carga y un interruptor personalizan ambas superficies que podría ver un visitante.

Publicar tu agente con marca

La marca pertenece al agente, así que viaja con él. Sin importar cómo un visitante llegue a tu agente, verá la misma marca.

Para ponerlo en tu sitio web, abre Your Website, elige Install manually with code (o las opciones de WordPress, Shopify o Webflow) y pega el fragmento antes de la etiqueta de cierre </body>. Como el widget carga en tu propia página, ya está en tu dominio, junto al resto de tu sitio.

Para compartir un enlace, usa la Chat Page alojada. Para llegar a personas en canales de mensajería, conecta el agente a WhatsApp, Telegram u otros en External Apps, y la misma identidad se mantiene.

Con esto termina el tutorial. Creaste un agente real que responde y actúa, y luego pusiste tu marca en cada superficie que ve un visitante, todo desde una cuenta vacía en unos quince minutos. Si estás haciendo esto para clientes en lugar de para tu propio sitio, la parte de negocio (paquetes, precios y márgenes) está cubierta en nuestra guía de chatbot white-label. Para la parte de plataforma, tienes toda la receta arriba.

Preguntas frecuentes

¿Qué es un chatbot de IA white-label?

Un chatbot de IA white-label es un chatbot que puedes presentar completamente como propio: tus colores, tu logo y tu avatar, sin rastro de la herramienta con la que se creó. En Quickchat AI puedes adaptar tu marca en todos los planes, y la eliminación de la línea “Powered by Quickchat AI” está disponible desde el plan Professional.

¿Cómo elimino la marca “Powered by” de un chatbot?

En la página Appearance, activa “Hide Quickchat AI Branding”. Eso elimina la línea “Powered by Quickchat AI” del pie del chat y reemplaza el logo de Quickchat en la Chat Page alojada por tu propio logo. El interruptor está disponible en el plan Professional y superiores.

¿Puedo aplicar mi marca al chatbot gratis?

Sí. Adaptar tu marca, los colores, el avatar y el logo, el encabezado y los colores de la barra lateral de la Chat Page está disponible en todos los planes, incluido el gratuito. La eliminación de la línea “Powered by” es la parte que requiere el plan Professional.

¿Necesito un dominio personalizado para crear un chatbot white-label?

No. Personalizas el widget y la Chat Page alojada dentro del propio producto, sin configurar ningún dominio. Cuando insertas el widget en tu propio sitio web, ya se muestra en tu dominio, junto al resto de tu sitio.

¿El white-label cambia cómo funciona el chatbot?

No. La marca solo cambia el aspecto. El agente sigue respondiendo desde su conocimiento y llama las mismas acciones. Primero creas un agente real y funcional, y luego le aplicas la marca, por lo que un bot completamente personalizado sigue siendo capaz.

¿Qué plan necesito para eliminar la marca de Quickchat AI?

El interruptor “Hide Quickchat AI Branding” está disponible en el plan Professional y superiores. En planes inferiores, el interruptor es visible pero está bloqueado, con un mensaje “Upgrade plan to unlock”. Todos los planes pueden adaptar por completo los colores, el logo y el avatar de tu marca.

¿Los colores de mi marca seguirán siendo legibles en el chat?

El editor de temas verifica cada par de texto y fondo contra el estándar de contraste WCAG AA (4.5:1) mientras eliges colores, y te avisa cuando un par tiene contraste insuficiente. Las paletas de marca ajustadas para logos grandes suelen fallar en tamaño de texto de chat, por lo que el verificador te indica que ajustes el color del texto en lugar de publicar algo difícil de leer.

¿Puedo usar white-label para el chatbot en mi sitio web y en un enlace compartido?

Sí. La marca se aplica tanto al widget que insertas en tu sitio como a la Chat Page alojada que compartes como enlace. En la Chat Page, el white-label reemplaza tu logo y sube tu avatar a la barra lateral.

¿Puedo cambiar el avatar y el logo del chatbot?

Sí. Subes una imagen como AI Agent Avatar. Aparece en el botón del launcher y en el encabezado del chat, y en la Chat Page alojada se convierte en el logo de la barra lateral cuando la marca está oculta. Una imagen cumple la función de avatar y logo.

¿Puedo cambiar el estilo del launcher del chat?

Sí. El control Launcher size en la pestaña Appearance ofrece tres estilos: Classic (una tarjeta con tu avatar, el nombre de tu agente y un cuadro de mensaje), Input Only (una barra de mensaje flotante) y Small (una píldora compacta con tu avatar y una etiqueta corta que defines en el campo Launcher label). Los tres adoptan los colores y el avatar de tu tema, y puedes colocar el widget en cualquiera de las esquinas inferiores.

¿Cuánto puedo personalizar la apariencia del chatbot?

Mucho, y todo sin código. En la pestaña Appearance defines quince colores de tema, el radio de las esquinas y el tamaño del texto, eliges uno de tres estilos de launcher, seleccionas el tamaño y la posición de la ventana, y subes tu propio avatar. También hay un tema oscuro integrado. Como todo son ajustes y no CSS personalizado, dos chatbots creados en la misma plataforma pueden verse completamente distintos.

¿Cuánto tiempo toma crear un chatbot white-label?

Unos quince minutos: unos minutos para crear un agente real con un prompt, algo de conocimiento y una acción, y unos diez para definir los colores de marca, subir el logo y el avatar, y desactivar la línea “Powered by”. No hay nada que instalar ni código.