Thêm vào giỏ cho cửa hàng tùy chỉnh

Cách hoạt động

1. 1Trong Dashboard Rivet, thêm sản phẩm với link sản phẩm và URL ảnh để chat hiển thị thẻ.
2. 2Tùy chọn đặt external_id thành SKU/variant id để callback thêm đúng dòng.
3. 3Định nghĩa window.RivetChat.onAddToCart trước SmartReply.init, gọi API giỏ bên trong.

Ví dụ nhúng script

Dán vào footer hoặc layout trang. Thay tenant id và endpoint giỏ bằng của bạn.

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

Ví dụ React / Next.js

Chỉ chạy trong client component. Trả Promise từ hook để Rivet hiển thị toast thành công/lỗi.

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