支持所有主流平臺
從 Shopify 到自定義 React 店鋪——幾分鐘即可接入 Rivet。多數平臺零代碼嵌入,開發者可用 npm 包。
Shopify
Shopify
排名第一的電商平臺
透過 rivet-chat.com/install 直接安裝 Rivet Chat 並開啟 App embed——無需修改 theme.liquid。聊天氣泡不到 2 分鐘就能出現在你的正式主題上。
無需代碼⏱ 2 分鐘
- 1從 rivet-chat.com/install 安裝 Rivet Chat,打開應用 → Setup。
- 2點擊進入已發佈主題的主題編輯器 / App embeds。
- 3啟用 Rivet Chat 嵌入並儲存正式主題(草稿主題不會對買家顯示)。
- 4在 Setup 確認你的 Tenant ID,然後打開店鋪前臺測試氣泡。
可選代碼片段(App Embed 方式無需粘貼)
<!-- Optional custom snippet (App Embed path needs no paste) -->
<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>
window.addEventListener("DOMContentLoaded", function () {
SmartReply.init({
server: "https://rivet-chat.com",
tenantId: "t-xxxxxxxx",
title: "Customer Support",
primaryColor: "#2563eb"
});
});
</script>
🛍️
WooCommerce
WordPress 電商
在 WordPress 上用 WooCommerce?Rivet 通過自定義 HTML 區塊或主題頁腳即可接入——無需安裝插件。
無需代碼⏱ 3 分鐘
- 1從 Rivet 後臺複製你的嵌入代碼。
- 2在 WordPress 中,進入 外觀 → 自定義 → 額外 HTML(或使用頁眉/頁腳插件)。
- 3把代碼片段粘貼到頁腳區域。
- 4發佈。掛件會出現在你的整個店鋪。
⚛️
React / Next.js
適用於自定義店鋪
用 React 或 Next.js 搭建無頭店鋪?用我們的 npm 包獲得乾淨、帶類型的集成——支持 SSR、可搖樹優化。
少量代碼⏱ 5 分鐘
- 1安裝:npm install smartreply-chat
- 2在客戶端組件中導入並初始化(Next.js 用 useEffect)。
- 3傳入你的服務器 URL 和 tenant ID。
- 4掛件會掛載到 document.body,位於 React 虛擬 DOM 之外。
import SmartReply from 'smartreply-chat'
useEffect(() => {
SmartReply.init({
server: 'https://rivet-chat.com',
tenantId: 't-xxxxxxxx',
platform: 'custom',
})
}, [])🌐
自定義 / 任意網站
BigCommerce、Wix、Magento 等
只要網站能加 script 標籤,Rivet 就能用。BigCommerce、Wix、Magento、Squarespace,或純手寫 HTML 網站——全都支持。
無需代碼⏱ 2 分鐘
- 1從 Rivet 後臺複製你的嵌入代碼。
- 2找到網站允許自定義 HTML/腳本的位置(通常在主題設置或代碼注入區域)。
- 3把代碼片段粘貼到 <head> 裡或 </body> 之前。
- 4儲存併發布,完成。
- 5如需在自定義購物車上實現商品卡片加購,接入 RivetChat.onAddToCart——參見自定義加購指南。