Add to cart on custom stores

How it works

1. 1In the Rivet Dashboard, add products with a product link and image URL so chat can show cards.
2. 2Optionally set external_id to your SKU / variant id so the callback can add the exact line item.
3. 3Define window.RivetChat.onAddToCart before SmartReply.init, and call your cart API inside it.

Script embed example

Paste into your site footer or layout. Replace the tenant id and cart endpoints with yours.

<!-- 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>

React / Next.js example

Run only in a client component. Return a Promise from the hook so Rivet can show success / error toast.

// 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',
  });
}, []);