---
title: 网站挂件、代理链接和手机App
description: 如何通过一行代码将代理部署到网站，社交媒体和即时通讯工具的短链接如何运作，以及顾客如何将您的代理作为应用安装到手机上。
section: guide
keywords: 网站挂件, 挂件代码, Tilda, Shopify, WordPress, 代理链接, PWA, 推送通知, 链接预览, AI销售代理, 网站集成, 社交媒体链接, 手机应用安装, 短链接
updated: 2026-09-06
---
代理有两副面孔。在网站上，它是一个位于角落、通过按钮打开的窗口。在社交媒体和即时通讯应用中，它是一个通过短链接访问的页面，功能类似于一个小型商店，并可作为应用程序安装到手机上。目录、条款、对话和申请都是通用的：因为代理是同一个。

以下所有内容都可在“小组件和链接”部分找到。

## 代理链接

短链接地址格式为 `comag.vibevox.pro/c/your-shop`。可放置在 Instagram、TikTok 或 Telegram 的个人资料简介中，发送到 WhatsApp，或添加到 YouTube 视频下方的描述中。

当发送到即时通讯应用时，链接会展开为卡片：包含封面、商店名称和描述。这三个字段均可自定义：

- **预览标题** — 默认为商店名称。
- **预览描述** — 一句简短的提示，说明可以咨询什么。
- **封面** — 自动根据您的主题色、徽标和商品图片生成。您可以上传自定义图片，尺寸为 1200 x 630 像素。

检查预览效果最简单的方法是，将链接发送给自己在 Telegram 中查看。

## 网站代码

一行代码，需插入到所有页面中 `</body>` 闭合标签之前。可在后台通过按钮复制。

在常用平台上的具体插入位置：

| 平台 | 插入位置 |
| --- | --- |
| Tilda | 网站设置 → 更多 → Body 的 HTML 代码 |
| Shopify | 主题 → 编辑代码 → `theme.liquid`，在 `</body>` 之前 |
| WordPress | 外观 → 主题编辑器 → `footer.php`，或代码插入插件 |
| Wix | 设置 → 自定义代码 → 添加到 Body 结束 |
| 自有网站 | 直接插入到模板中 `</body>` 之前 |

插入后，右下角将出现一个按钮。按钮位置可在设置中更改为左侧，颜色和主题也在此处调整。

> [!tip] 小组件异步加载，不会拖慢页面速度。如果您的 CSP 配置严格，请在 `script-src` 和 `connect-src` 中允许 `comag.vibevox.pro` 域名。

## 界面样式

访客可见的设置：

- **商店名称和助理名称。** 后者是聊天顶部对话者的署名。
- **欢迎语。** 第一句话。好的欢迎语应承诺提供帮助，而非仅仅打招呼。
- **对话开始时的提示。** 最多四个问题按钮。如果留空，将根据目录自动生成。
- **沟通语气。** 从列表中选择或自定义：「热情简洁」、「专业正式」。
- **主题色。** 一个颜色用于设置按钮、链接和卡片高亮。
- **徽标。** 它也将成为手机上的应用图标。
- **麦克风按钮。** 浏览器中的语音识别功能。如果浏览器不支持，访客可以录制语音消息，Gemini 将对其进行转录。

右侧有实时预览：您输入时，它会随之变化。“保存”按钮会将更改应用到网站。

## 浅色和深色主题

聊天有两种界面样式，它们在同一个设置字段中切换 — “主题”。

| 值 | 访客所见 |
| --- | --- |
| 跟随访客设置 | 主题会根据访客手机或电脑的设置进行调整：夜间为深色，白天为浅色 |
| 浅色 | 始终为浅色窗口，无论设备设置如何 |
| 深色 | 始终为深色窗口 |

默认设置为“跟随访客设置”，在大多数情况下，这是正确的选择：使用深色主题手机的用户不会突然看到刺眼的白色，而习惯浅色主题的用户则会看到熟悉的窗口。

当网站本身采用单一主题风格时，需要固定主题。深色着陆页配上角落的浅色聊天窗口会显得格格不入，反之亦然。在这种情况下，请将主题设置为与网站相同，小组件将与设计融为一体。

主题色在这两种主题之上均有效：按钮、链接和卡片高亮会采用您的品牌色，而背景和文本则随主题变化。检查这两种效果最简单的方法是查看右侧的预览 — 当您切换设置时，它会立即重新渲染。

## 商品卡片链接到您的网站

代理不会以纯文本回复，而是以卡片形式：包含图片、名称、价格和按钮。按钮背后始终是地址 — 您的网站商品页面，或者如果卡片是从社交媒体帖子生成的，则为原始帖子。

在网站小组件内部，跳转会在同一窗口中进行，以避免创建过多标签页。在通过链接访问的代理页面上，卡片会在新标签页中打开，以确保对话不会中断。

对于 Shopify 和 WooCommerce 商店，有一个贴心的细节：按钮不仅会打开商品，还会通过平台原生机制将其添加到商店购物车。详情请参阅有关 [Shopify](/wiki/zh/platform-shopify) 和 [WordPress](/wiki/zh/platform-wordpress) 的文章。

此外：小组件会读取其所在页面的商品标记，并将其传递给代理。因此，在商品卡片上提出的问题，例如“有蓝色的吗？”，代理会在上下文中理解，无需进一步说明具体指代什么。

## 访客手机上的应用程序

代理页面可以作为应用程序安装。访客用手机打开链接后，会看到添加到主屏幕的提示，并获得一个带有您徽标的图标。

- **图标下方的名称** — 一个词，最多 12 个字符。如果留空，将使用商店名称的第一个词。
- **图标** — 上传的徽标。如果没有徽标，将使用 Commerce Agents 的徽标。
- 在 iPhone 上，安装通过“分享” → “添加到主屏幕”进行，这是 Safari 的限制，代理会自行提示操作步骤。

安装后，您可以从“对话”部分向访客发送推送通知。访客通过点击聊天顶部的铃铛图标，自行授予接收通知的权限。

## 访客附件

聊天中有一个回形针图标：可上传照片、视频或音频，最大 20 MB。如果浏览器不支持语音识别，按住麦克风会录制语音消息。

Gemini 会解析文件：识别显示内容、图片上的文本以及口头表达的内容。代理根据此解析进行回复，您可以在对话中看到文件本身和简要描述。这在那些“展示比描述更简单”的领域非常有用：例如零部件、维修、根据照片选择。

## 带购物车的网站的购买像素

如果付款是在您的网站而非聊天中进行，请将后台的一小段代码插入到“感谢您的订单”页面，并替换订单号和金额。购买将与对话关联，统计数据将显示哪些对话最终促成了销售。

## 检查

设置完成后，请花三分钟进行检查：

1.  在无痕模式下打开网站，点击小部件按钮。询问有关商品的问题。
2.  在手机上打开代理链接。检查是否提示安装。
3.  将链接发送到您的即时通讯工具，查看预览。
4.  查看“对话”：两次聊天记录都应显示在那里。

## 常见问题

### 网站小部件和链接是不同的代理吗

它们是同一个。目录、条件、对话和申请都是通用的。区别仅在于显示方式：网站上是角落里的窗口，通过链接打开的是全屏页面，可以添加到手机主屏幕。

### 可以更改链接地址吗

链接地址是在创建店铺时根据店铺名称生成的。如果需要其他地址，请在 Telegram 上联系我们——我们将手动更改，以避免损坏已发布的链接。

### 小部件会拖慢网站速度吗

不会。脚本文件很小，并在页面主要内容加载后异步加载。聊天窗口仅在顾客点击按钮时才会加载。

### 如果代理已关闭，顾客会看到什么

什么也看不到：按钮不会出现，链接页面会显示代理不可用。开关位于“小部件和链接”部分。

### 如何移除“由 Commerce Agents 提供支持”字样

目前无法移除：该署名在所有套餐中都会保留。它是可点击的，并会链接到我们的网站——这是定价的一部分，正因如此，我们的服务才能以 29 € 的价格提供，而非更高的价格。