Widget en el sitio web, enlace al agente y aplicación en el teléfono
Cómo integrar el agente en su sitio web con una sola línea de código, cómo funciona el enlace corto para redes sociales y mensajería, y cómo el comprador instala su agente en el teléfono como una aplicación.
El agente tiene dos caras. En el sitio web, es una ventana en la esquina que se abre al pulsar un botón. En redes sociales y mensajería, es una página con un enlace corto que funciona como una pequeña tienda y se instala en el teléfono como una aplicación. El catálogo, las condiciones, los diálogos y las solicitudes son comunes: el agente es uno solo.
Todo lo que se describe a continuación se encuentra en la sección «Widget y enlace».
Enlace al agente#
Una dirección corta del tipo comag.vibevox.pro/c/your-shop. Se coloca en la biografía de Instagram, TikTok o Telegram, se envía por WhatsApp, se añade a la descripción de un vídeo de YouTube.
Al enviarse a un servicio de mensajería, el enlace se despliega en una tarjeta: portada, nombre de la tienda y descripción. Los tres campos son configurables:
- Título de la vista previa — por defecto, el nombre de la tienda.
- Descripción de la vista previa — una frase corta sobre qué se puede preguntar.
- Portada — se genera automáticamente a partir de su color de acento, logotipo y fotos de productos. Puede subir la suya propia, tamaño 1200 por 630 píxeles.
La forma más sencilla de comprobar cómo se ve la vista previa es enviándose el enlace a sí mismo por Telegram.
Código para el sitio web#
Una sola línea que se inserta antes de la etiqueta de cierre </body> en todas las páginas. Se copia con un botón en el panel de control.
Dónde insertarlo exactamente en plataformas populares:
| Plataforma | Dónde insertar |
|---|---|
| Tilda | «Configuración del sitio» → «Más» → «Código HTML para el body» |
| Shopify | «Tema» → «Editar código» → theme.liquid, antes de </body> |
| WordPress | «Apariencia» → «Editor de temas» → footer.php, o plugin de inserción de código |
| Wix | «Configuración» → «Código personalizado» → «añadir en Body end» |
| Su propio sitio web | Directamente en la plantilla antes de </body> |
Tras la inserción, aparecerá un botón en la esquina inferior derecha. La posición se cambia a la izquierda en la configuración; el color y el tema, también.
El widget se carga de forma asíncrona y no ralentiza la página. Si tiene configurado un CSP estricto, permita el dominio comag.vibevox.pro en script-src y connect-src.
Estilo#
Ajustes que ve el comprador:
- Nombre de la tienda y nombre del asistente. Este último es la firma del interlocutor en el encabezado del chat.
- Saludo. La primera frase. Un buen saludo promete utilidad, no solo saluda.
- Sugerencias al inicio del diálogo. Hasta cuatro botones con preguntas. Si está vacío, se generarán automáticamente según el catálogo.
- Tono de comunicación. De la lista o personalizado: «cálido y conciso», «experto, formal».
- Color de acento. Un solo color define el botón, los enlaces y el resaltado de las tarjetas.
- Logotipo. También se convertirá en el icono de la aplicación en el teléfono.
- Botón de micrófono. Reconocimiento de voz en el navegador. Si el navegador no lo soporta, el comprador grabará un mensaje de voz y Gemini lo transcribirá.
A la derecha hay una vista previa en vivo: cambia a medida que escribe. El botón «Guardar» aplica los cambios al sitio web.
Tema claro y oscuro#
El chat tiene dos estilos, y se cambian en un mismo campo de configuración: «Tema».
| Valor | Lo que ve el comprador |
|---|---|
| Como el del visitante | El tema se adapta a la configuración de su teléfono u ordenador: oscuro por la noche, claro durante el día |
| Claro | Ventana siempre clara, independientemente del dispositivo |
| Oscuro | Ventana siempre oscura |
Por defecto, está configurado «como el del visitante», y en la mayoría de los casos es la elección correcta: una persona con un tema oscuro en el teléfono no recibirá un destello blanco en la cara, y quien esté acostumbrado a un tema claro verá la ventana habitual.
Un tema fijo es necesario cuando el sitio web está diseñado con un estilo único. Una landing page oscura con un chat claro en la esquina parece un parche, y viceversa. En tal caso, configure el mismo tema que el del sitio web y el widget se integrará con el diseño.
El color de acento funciona sobre ambos temas: los botones, enlaces y el resaltado de las tarjetas adoptan su color corporativo, mientras que el fondo y el texto cambian con el tema. La forma más sencilla de comprobar ambas opciones es en la vista previa de la derecha: se actualiza al instante mientras cambia el valor.
Las tarjetas de productos dirigen a su sitio web#
El agente no responde con texto plano, sino con tarjetas: fotografía, nombre, precio, botón. Detrás del botón siempre hay una dirección: la página del producto en su sitio web o la publicación original en la red social, si la tarjeta se ha generado a partir de ahí.
Dentro del widget en el sitio web, la transición ocurre en la misma ventana para no generar múltiples pestañas. En la página del agente, al hacer clic en el enlace, la tarjeta se abre en una nueva pestaña para que el diálogo no se pierda.
Para las tiendas en Shopify y WooCommerce hay un detalle interesante: el botón no solo abre el producto, sino que lo añade al carrito de la tienda mediante el mecanismo estándar de la plataforma. Detalles en los artículos sobre Shopify y WordPress.
Además: el widget lee el marcado del producto en la página donde está abierto y lo transmite al agente. Por lo tanto, la pregunta «¿lo tienen en azul?» en la tarjeta del producto se entiende en contexto, sin necesidad de aclarar a qué se refiere.
Aplicación en el teléfono del comprador#
La página del agente puede instalarse como una aplicación. El comprador abre el enlace desde el teléfono, ve la sugerencia de añadir a la pantalla de inicio y obtiene un icono con su logotipo.
- Nombre bajo el icono — una palabra de hasta 12 caracteres. Si está vacío, tomaremos la primera palabra del nombre de la tienda.
- Icono — el logotipo subido. Si no hay logotipo, se utiliza el logotipo de Commerce Agents.
- En iPhone, la instalación se realiza a través de «Compartir» → «A la pantalla de inicio», es una limitación de Safari, y el agente indica los pasos por sí mismo.
Tras la instalación, se pueden enviar notificaciones push al comprador desde la sección «Diálogos». Él mismo da permiso para recibirlas pulsando la campana en el encabezado del chat.
Archivos adjuntos del comprador#
El chat incluye un clip: fotos, vídeos o audio de hasta 20 megabytes. Si el navegador no tiene reconocimiento de voz, mantener pulsado el micrófono graba un mensaje de voz.
Gemini analiza el archivo: qué se muestra, qué texto hay en la imagen, qué se dice en voz alta. El agente responde basándose en este análisis, y usted ve en el diálogo tanto el archivo como una breve descripción. Esto es útil en nichos donde es más fácil mostrar que describir: piezas de repuesto, reparaciones, selección por foto.
Píxel de compra para sitios web con carrito#
Si el pago se realiza en su sitio web y no en el chat, inserte un fragmento corto del panel de control en la página «Gracias por su pedido», sustituyendo el número de pedido y el importe. La compra se vinculará al diálogo, y en las estadísticas se verá qué conversaciones terminan en venta.
Verificación#
Tres minutos que vale la pena dedicar después de la configuración:
- Abra el sitio web en modo incógnito y haga clic en el botón del widget. Haga una pregunta sobre un producto.
- Abra el enlace del agente desde el teléfono. Compruebe que se ofrece la instalación.
- Envíese el enlace a un mensajero y observe la vista previa.
- Vaya a «Diálogos»: allí deberían aparecer ambas conversaciones.
Preguntas frecuentes#
El widget en el sitio web y el enlace, ¿son agentes diferentes?#
Es el mismo. El catálogo, las condiciones, los diálogos y las solicitudes son compartidos. Solo cambia la presentación: en el sitio web es una ventana en la esquina, mientras que el enlace lleva a una página a pantalla completa que se puede instalar en el teléfono.
¿Se puede cambiar la dirección del enlace?#
La dirección se genera a partir del nombre de la tienda al crear el escaparate. Si necesita una diferente, escríbanos en Telegram y lo cambiaremos manualmente para no invalidar los enlaces ya distribuidos.
¿El widget ralentizará el sitio web?#
No. El script pesa poco y se carga de forma asíncrona, después del contenido principal de la página. La ventana de chat en sí se carga solo cuando el comprador hace clic en el botón.
¿Qué ve el comprador si el agente está desactivado?#
Nada: el botón no aparece y la página del enlace muestra que el agente no está disponible. El interruptor se encuentra en la sección «Widget y enlace».
¿Cómo quitar la leyenda «Funciona con Commerce Agents»?#
Por ahora, no es posible: la firma permanece en todos los planes. Es clicable y lleva a nuestro sitio web; es parte del precio, gracias a la cual el servicio cuesta 29 € en lugar de una cantidad notablemente mayor.