自定义店铺的加购

工作原理

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