支持所有主流平台
从 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——参见自定义加购指南。