自定義店鋪的加購

工作原理

1. 1在 Rivet 後臺,添加商品時填入商品連結和圖片 URL,這樣對話才能展示卡片。
2. 2可選:把 external_id 設為你的 SKU / 變體 ID,這樣回調就能精確加入對應的商品行。
3. 3在 SmartReply.init 之前定義 window.RivetChat.onAddToCart,並在其中調用你的購物車 API。

腳本嵌入示例

粘貼到你網站的頁腳或佈局中。把 tenant id 和購物車接口替換成你自己的。

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

僅在客戶端組件中運行。在鉤子裡返回 Promise,以便 Rivet 顯示成功/失敗提示。

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