Integración con VTEX
Chatbot con IA para tu tienda VTEX
Conecta tu storefront de VTEX para que el agente busque productos y precios actualizados con la Intelligent Search pública de VTEX, y añade el chat con Google Tag Manager o en el código de tu storefront. Sin app key.
Última actualización:
Cómo funciona intoCHAT con VTEX
intoCHAT detecta tu cuenta de VTEX a partir de tu storefront y busca productos con la Intelligent Search pública de VTEX, la misma búsqueda que usa tu tienda. Funciona igual con tiendas Store Framework que con storefronts headless. La burbuja de chat se añade con un script corto, mediante Google Tag Manager o en el propio código de tu storefront. El agente solo lee datos públicos del catálogo: nada de pedidos, carritos, pagos ni cuentas de clientes.
Configurar intoCHAT en VTEX
Crea y entrena tu agente
Regístrate, crea un agente y añade la dirección de tu tienda en la pestaña Knowledge para que aprenda tus páginas de envíos, devoluciones y ayuda. También puedes subir archivos o añadir pares de preguntas y respuestas.
Conecta tu tienda
En la pestaña Actions, elige Connect your website y pega la dirección que visitan tus clientes, aunque sea un storefront propio. intoCHAT detecta tu cuenta de VTEX y añade la acción Search products.
Crea una etiqueta Custom HTML en Google Tag Manager
Si tu tienda usa la app de Google Tag Manager de VTEX, abre tu contenedor de GTM y ve a Etiquetas > Nueva > Configuración de la etiqueta > HTML personalizado. Pega el código de abajo y sustituye YOUR_AGENT_ID por el ID de la pestaña Share.
Actívala en todas las páginas
Añade a la etiqueta un activador nuevo de tipo DOM preparado en todos los eventos, para que el body de la página exista cuando arranca el widget, y guarda la etiqueta. Compruébala en el modo de vista previa y después envía y publica el contenedor.
Revisa tu tienda
Abre tu tienda. La burbuja de chat aparece en la esquina inferior, con los colores y la posición que definiste en la pestaña Appearance.
El código para una etiqueta Custom HTML de GTM
<script>
(function () {
if (document.getElementById('intochat-embed')) return;
var s = document.createElement('script');
s.id = 'intochat-embed';
s.src = 'https://www.intochat.ai/api/embed.js';
s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
document.body.appendChild(s);
})();
</script>Google Tag Manager elimina los atributos data de las etiquetas script en Custom HTML, así que la etiqueta script simple se cargaría sin el ID del agente. Esta versión define el atributo con JavaScript. El mismo código funciona en el body.html de una pixel app o en una plantilla del CMS.
Qué hace el agente en tu tienda VTEX
Busca en el catálogo en tiempo real
Cada búsqueda usa VTEX Intelligent Search de tu cuenta y devuelve hasta cinco productos con nombre, marca, precio, categorías y especificaciones de SKU.
Muestra fichas de producto
Las respuestas incluyen fichas con la imagen, el precio y un enlace construido con el formato de las URL de producto de tu storefront.
Indica el precio que se paga
El agente distingue el precio de venta del precio de lista antes del descuento, así que indica lo que el cliente paga de verdad, en la moneda de tu tienda.
Funciona con storefronts headless
Pega la dirección que visitan tus clientes. intoCHAT lee el formato de los enlaces de producto de tus páginas, así que los enlaces llevan a tu storefront.
Responde más allá del catálogo
Entrénalo con tus páginas o archivos de envíos, devoluciones y preguntas frecuentes. Los pares de preguntas y respuestas tienen prioridad sobre otras fuentes.
Capta leads
Un formulario en el chat pide un email o un teléfono según las reglas que definas, y cada lead nuevo genera un aviso por email.
Preguntas frecuentes
¿Qué lee intoCHAT de mi tienda VTEX?
Datos públicos del catálogo de VTEX Intelligent Search para tu cuenta: nombres de productos, marcas, precios, categorías y especificaciones de SKU, además de la moneda de la tienda, que toma de su canal de ventas público. No necesitas ninguna app key, y el agente no ve pedidos, carritos, pagos ni cuentas de clientes.
¿Puede el agente hacer seguimiento de pedidos?
No. Consultar un pedido requiere credenciales privadas de la tienda y una prueba de que el pedido es del visitante, algo que una conexión pública no puede ofrecer. El agente responde dudas de entregas y devoluciones con tus páginas y recoge un email o un teléfono para que tu equipo pueda contactar con el cliente.
¿Cómo añado el chat sin Google Tag Manager?
En Store Framework, un desarrollador puede poner el mismo código en el archivo body.html de una pixel app, que se ejecuta en el body de cada página de la tienda; no uses head.html. En una tienda con Legacy CMS, ve a Storefront > Layout > CMS > HTML Templates y pégalo justo antes de la etiqueta de cierre del body de cada plantilla que usen tus páginas. En FastStore u otro storefront headless, pide a tu desarrollador que lo añada al código del storefront para que se ejecute en todas las páginas.
¿Por qué no pegar la etiqueta script simple en Google Tag Manager?
GTM elimina los atributos data de las etiquetas script en las etiquetas Custom HTML, así que el script se cargaría sin el ID de tu agente y no aparecería ningún chat. El código de esta página crea el elemento script con JavaScript y define el atributo por sí mismo. Donde editas el HTML directamente, como en una plantilla del CMS, también funciona la etiqueta script de una línea de la pestaña Share.
¿Funciona con un storefront headless en VTEX?
Sí. Conecta la dirección que visitan tus clientes. intoCHAT reconoce la cuenta de VTEX por las direcciones de recursos de tus páginas, como vtexassets.com, y construye los enlaces de producto con el formato de tu storefront.
¿El chat ralentiza mi tienda?
Con Google Tag Manager, el script se inserta cuando la página ya ha empezado a cargar, así que no frena tu contenido. La ventana del chat funciona en su propio iframe servido por intoCHAT, así que su código queda separado de tu storefront.
Míralo responder con tu propia web
Pega la dirección de tu web y chatea con un agente creado a partir de tus páginas. Tarda alrededor de un minuto.
Crea tu agente gratisPlan gratuito, sin tarjeta de crédito.