Añadir al carrito en tiendas personalizadas

Cómo funciona

1. 1En el Dashboard Rivet, añade productos con un link de producto y URL de imagen para que el chat muestre tarjetas.
2. 2Opcionalmente define external_id como tu SKU / variant id para que el callback añada el artículo exacto.
3. 3Define window.RivetChat.onAddToCart antes de SmartReply.init y llama a tu API de carrito dentro.

Ejemplo de embed por script

Pega en el footer o layout del sitio. Sustituye el tenant id y los endpoints por los tuyos.

<!-- Rivet AI customer service widget -->
<link rel="stylesheet" href="https://rivet-chat.com/static/chat.css?v=39">
<script src="https://rivet-chat.com/static/chat.js?v=39" defer></script>
<script>
// Hook Add to cart before SmartReply.init
window.RivetChat = {
  onAddToCart: function (item) {
    // item: name, price, product_url, image_url, external_id, handle, variants…
    return fetch("/api/cart/add", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "same-origin",
      body: JSON.stringify({
        id: item.external_id || item.id,
        url: item.product_url,
        quantity: 1
      })
    }).then(function (r) {
      if (!r.ok) throw new Error("cart failed");
      // Open your side cart / update bag badge here
      if (window.MyStore && typeof window.MyStore.openCart === "function") {
        window.MyStore.openCart();
      }
    });
  }
};

window.addEventListener("DOMContentLoaded", function () {
  SmartReply.init({
    server: "https://rivet-chat.com",
    tenantId: "t-xxxxxxxx",
    platform: "custom"
  });
});
</script>

Ejemplo React / Next.js

Ejecuta solo en un client component. Devuelve una Promise desde el hook para que Rivet muestre toast de éxito/error.

// Client component (Next.js / React)
useEffect(() => {
  window.RivetChat = {
    onAddToCart: async (item) => {
      await yourCart.add({
        id: item.external_id || item.id,
        url: item.product_url,
        qty: 1,
      });
      yourCart.openDrawer();
    },
  };

  SmartReply.init({
    server: 'https://rivet-chat.com',
    tenantId: 'your-tenant-id',
    platform: 'custom',
  });
}, []);