Añadir un asistente de compras con IA a Shopify o WooCommerce

Puedes poner un asistente de compras con IA en una tienda Shopify o WooCommerce en una tarde. Casi todo el trabajo es copiar y pegar. El único paso que requiere algo de código, conectar el botón «Añadir al carrito» del chat con tu carrito real, se resuelve con unas pocas líneas que puedes copiar de esta guía. El recorrido sigue la documentación de AskMerra y también sirve para Magento 2 y para tiendas desarrolladas a medida.

Antes de empezar

Necesitas cuatro cosas:

• Una cuenta de AskMerra y una tienda. Al crear la tienda indicas el dominio de tu web, porque el widget solo funciona allí.
• Tus datos de producto, como archivo de exportación o como URL de un feed.
• Acceso a los archivos de tu tema, a un plugin de cabecera y pie de página o a Google Tag Manager.
• Tu clave de sitio pública (empieza por pk_live_), que aparece en Panel → Instalación.

Paso 1: importa tu catálogo

AskMerra solo recomienda productos que están en tu catálogo, así que un catálogo completo y actualizado es lo más importante que puedes aportar. Hoy hay tres formas de traer los productos:

• Subida de archivo (CSV, JSON o XML): la forma más rápida de empezar. Los archivos pueden pesar hasta 25 MB, y los separadores y la codificación del CSV se detectan automáticamente.
• URL de un feed: si ya publicas un feed de productos, por ejemplo para Google Shopping, AskMerra lo vuelve a sincronizar automáticamente cada 1 a 6 horas según tu plan. Un feed XML de Google Merchant Center funciona tal cual.
• Push API: para plataformas a medida y ERP que necesitan stock y precios en tiempo real.

De dónde salen los datos en cada plataforma

En Shopify, instala una app de feed para Google Shopping y añade la URL de su feed, o sube una exportación CSV. En WooCommerce, usa un plugin de feed de productos o una exportación CSV. En Magento 2, usa una extensión de feed o la Push API. Las apps nativas para Shopify y Magento con sincronización automática están en la hoja de ruta. Hasta que lleguen, el feed y las API cubren lo mismo.

Mapeo y enriquecimiento

Después de la subida, AskMerra te sugiere cómo se corresponden tus columnas con sus campos (id, nombre, precio, precio de oferta, disponibilidad, categorías, marca, etc.). Revisa el mapeo antes de importar. Las columnas que mapees a attribute:<name>, como attribute:skin_type, se convierten en atributos de producto que se pueden buscar.

Después, cada producto se enriquece: la IA extrae usos, tipos de piel o cabello, problemas que trata, ingredientes clave o especificaciones y pasos de la rutina, e indexa el resultado para la búsqueda semántica. Los cambios posteriores de precio y stock se aplican al momento y no vuelven a lanzar el enriquecimiento. Los productos que faltan en una nueva sincronización completa se desactivan, nunca se borran.

Enviar productos desde tu backend

Si sincronizas desde tu propio sistema, envía lotes de hasta 500 productos, autenticados con tu clave secreta:

curl -X POST "https://api.askmerra.com/v1/catalog/products:batchUpsert" \
  -H "Authorization: Bearer $ASKMERRA_SECRET_KEY" \
  -H "Content-Type: application/json" \
  -d '{"products":[{"external_id":"LUM-SE-01","name":"Hydra Glow Serum 30 ml","price":39,"in_stock":true}]}'

Envía siempre el producto completo: un upsert sustituye lo que hay guardado, así que los campos que omitas se vacían.

Paso 2: añade una etiqueta script

Copia tu fragmento de código desde Panel → Instalación y pégalo justo antes de la etiqueta de cierre </body> en todas las páginas donde quieras que aparezca el asistente:

<script src="https://cdn.askmerra.com/v1/widget.js" data-site-key="pk_live_…" async></script>

El script pesa unos 27 KB comprimido con gzip. Espera a que tu página haya cargado y el navegador esté inactivo, y entonces muestra solo el botón de apertura. El chat se renderiza dentro de un Shadow DOM, así que el CSS de tu tema no puede romperlo y el suyo no puede colarse en tu tema.

Shopify

Ve a Tienda online → Temas → Editar código, abre layout/theme.liquid y pega el fragmento antes de </body>.

WooCommerce y WordPress

Añade el fragmento con un plugin de cabecera y pie de página como WPCode, en la sección del pie de página. Si prefieres hacerlo con código, ponlo en el footer.php de tu tema hijo, antes de wp_footer().

Google Tag Manager

Crea una etiqueta de HTML personalizado que se active en todas las páginas (All Pages). Algunas configuraciones de GTM eliminan los atributos data-*, así que usa el objeto de ajustes en su lugar:

<script>
  window.AskMerraSettings = { siteKey: 'pk_live_…' };
</script>
<script src="https://cdn.askmerra.com/v1/widget.js" async></script>

En Magento 2, añade el fragmento en Content → Design → Configuration → HTML Head → Scripts and Style Sheets. Las aplicaciones de una sola página (React, Vue, Next.js) lo cargan una vez en el layout raíz, y la conversación sigue abierta durante la navegación del lado del cliente.

Paso 3: configura tus dominios permitidos

Tu clave de sitio solo funciona en los dominios que aparecen en Ajustes → Dominios permitidos. shop.com también incluye www.shop.com, y *.shop.com incluye todos los subdominios. Añade también tu dominio de pruebas (staging), o el widget se negará a funcionar allí.

Una advertencia: el fragmento debe llevar tu clave de sitio pk_live_. Nunca pegues una clave secreta sk_live_ en una página web. De todos modos, los endpoints del widget la rechazan.

Paso 4: dale al asistente el contexto de la página de producto

En una página de producto, AskMerra puede saber qué producto está viendo el cliente, así que «¿Esto va bien para piel grasa?» funciona sin más. Lee el producto del JSON-LD de schema.org de la página (Product.sku, después productID y después mpn). En WooCommerce se usa el JSON-LD de tu plugin de SEO. Si tu tema no genera ninguno, indica tú el producto:

<script>
  window.AskMerraSettings = { productId: 'LUM-SE-01' };
</script>

El valor debe coincidir con el external_id o el sku del producto en tu catálogo de AskMerra.

Paso 5: conecta «Añadir al carrito»

Las tarjetas de producto del chat pueden mostrar un botón «Añadir al carrito». Actívalo en los ajustes de comportamiento del widget y después gestiona el evento add_to_cart con la API del carrito de tu plataforma. Sin un gestor, el botón simplemente abre la página del producto.

En Shopify, externalId es el id de la variante cuando tu catálogo procede de Shopify:

AskMerra.on('add_to_cart', async ({ externalId }) => {
  await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{ id: Number(externalId), quantity: 1 }] }),
  });
});

En WooCommerce, externalId es el id del producto en WooCommerce:

AskMerra.on('add_to_cart', async ({ externalId }) => {
  const body = new URLSearchParams({ product_id: externalId, quantity: '1' });
  await fetch('/?wc-ajax=add_to_cart', { method: 'POST', body });
  document.body.dispatchEvent(new Event('wc_fragment_refresh'));
});

El script del widget se carga de forma asíncrona, así que el sitio más seguro para registrar los gestores es el callback onReady de window.AskMerraSettings. La misma API de JavaScript te permite abrir el chat desde tu propio botón «Pregunta a un experto» con AskMerra.sendMessage(), seguir el selector de idioma de tu web con AskMerra.setLocale() y enviar los eventos open, product_click y add_to_cart a tu herramienta de analítica.

Paso 6: comprueba la instalación

Abre tu tienda en un navegador y después ve a Panel → Instalación. Ahí verás cuándo y dónde se vio el widget por última vez, lo que también cubre las instalaciones con gestores de etiquetas. El botón Comprobar ahora carga tus dominios e indica si se encontró el fragmento, si hay instalada otra clave de sitio o si no se pudo acceder a la web.

Si el botón de apertura no aparece, abre la consola del navegador. El widget muestra un aviso claro: clave de sitio desconocida, dominio no permitido o tienda en pausa. Si tu web envía una cabecera Content Security Policy, permite https://cdn.askmerra.com en script-src y https://api.askmerra.com en connect-src.

Algunos retoques finales:

• Oculta el botón de apertura en el checkout con una regla de ruta como /checkout*, para que el proceso de compra no tenga distracciones.
• Haz preguntas reales de clientes en el Playground antes de publicar. Su panel de depuración muestra qué productos se recuperaron y qué ruta respondió.
• Los cambios de diseño que publicas desde el panel llegan a tu web en aproximadamente un minuto, sin tocar el fragmento de código.

Ponlo en marcha

Crea tu cuenta para seguir todos los pasos anteriores, o reserva una demo si prefieres verlo antes en acción. La referencia completa está en la documentación de instalación y en la documentación de la API de JavaScript. Si todavía le estás dando vueltas a la idea, empieza por qué es un asistente de compras con IA y en qué se diferencia de un buscador clásico en búsqueda conversacional vs. búsqueda por palabras clave.