网站挂件、代理链接和手机App
如何通过一行代码将代理部署到网站，社交媒体和即时通讯工具的短链接如何运作，以及顾客如何将您的代理作为应用安装到手机上。
代理有两副面孔。在网站上，它是一个位于角落、通过按钮打开的窗口。在社交媒体和即时通讯应用中，它是一个通过短链接访问的页面，功能类似于一个小型商店，并可作为应用程序安装到手机上。目录、条款、对话和申请都是通用的：因为代理是同一个。
以下所有内容都可在“小组件和链接”部分找到。
代理链接#
短链接地址格式为 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> 之前 |
插入后，右下角将出现一个按钮。按钮位置可在设置中更改为左侧，颜色和主题也在此处调整。
小组件异步加载，不会拖慢页面速度。如果您的 CSP 配置严格，请在 script-src 和 connect-src 中允许 comag.vibevox.pro 域名。
界面样式#
访客可见的设置：
- 商店名称和助理名称。 后者是聊天顶部对话者的署名。
- 欢迎语。 第一句话。好的欢迎语应承诺提供帮助，而非仅仅打招呼。
- 对话开始时的提示。 最多四个问题按钮。如果留空，将根据目录自动生成。
- 沟通语气。 从列表中选择或自定义：「热情简洁」、「专业正式」。
- 主题色。 一个颜色用于设置按钮、链接和卡片高亮。
- 徽标。 它也将成为手机上的应用图标。
- 麦克风按钮。 浏览器中的语音识别功能。如果浏览器不支持，访客可以录制语音消息，Gemini 将对其进行转录。
右侧有实时预览：您输入时，它会随之变化。“保存”按钮会将更改应用到网站。
浅色和深色主题#
聊天有两种界面样式，它们在同一个设置字段中切换 — “主题”。
| 值 | 访客所见 |
|---|---|
| 跟随访客设置 | 主题会根据访客手机或电脑的设置进行调整：夜间为深色，白天为浅色 |
| 浅色 | 始终为浅色窗口，无论设备设置如何 |
| 深色 | 始终为深色窗口 |
默认设置为“跟随访客设置”，在大多数情况下，这是正确的选择：使用深色主题手机的用户不会突然看到刺眼的白色，而习惯浅色主题的用户则会看到熟悉的窗口。
当网站本身采用单一主题风格时，需要固定主题。深色着陆页配上角落的浅色聊天窗口会显得格格不入，反之亦然。在这种情况下，请将主题设置为与网站相同，小组件将与设计融为一体。
主题色在这两种主题之上均有效：按钮、链接和卡片高亮会采用您的品牌色，而背景和文本则随主题变化。检查这两种效果最简单的方法是查看右侧的预览 — 当您切换设置时，它会立即重新渲染。
商品卡片链接到您的网站#
代理不会以纯文本回复，而是以卡片形式：包含图片、名称、价格和按钮。按钮背后始终是地址 — 您的网站商品页面，或者如果卡片是从社交媒体帖子生成的，则为原始帖子。
在网站小组件内部，跳转会在同一窗口中进行，以避免创建过多标签页。在通过链接访问的代理页面上，卡片会在新标签页中打开，以确保对话不会中断。
对于 Shopify 和 WooCommerce 商店，有一个贴心的细节：按钮不仅会打开商品，还会通过平台原生机制将其添加到商店购物车。详情请参阅有关 Shopify 和 WordPress 的文章。
此外：小组件会读取其所在页面的商品标记，并将其传递给代理。因此，在商品卡片上提出的问题，例如“有蓝色的吗？”，代理会在上下文中理解，无需进一步说明具体指代什么。
访客手机上的应用程序#
代理页面可以作为应用程序安装。访客用手机打开链接后，会看到添加到主屏幕的提示，并获得一个带有您徽标的图标。
- 图标下方的名称 — 一个词，最多 12 个字符。如果留空，将使用商店名称的第一个词。
- 图标 — 上传的徽标。如果没有徽标，将使用 Commerce Agents 的徽标。
- 在 iPhone 上，安装通过“分享” → “添加到主屏幕”进行，这是 Safari 的限制，代理会自行提示操作步骤。
安装后，您可以从“对话”部分向访客发送推送通知。访客通过点击聊天顶部的铃铛图标，自行授予接收通知的权限。
访客附件#
聊天中有一个回形针图标：可上传照片、视频或音频，最大 20 MB。如果浏览器不支持语音识别，按住麦克风会录制语音消息。
Gemini 会解析文件：识别显示内容、图片上的文本以及口头表达的内容。代理根据此解析进行回复，您可以在对话中看到文件本身和简要描述。这在那些“展示比描述更简单”的领域非常有用：例如零部件、维修、根据照片选择。
带购物车的网站的购买像素#
如果付款是在您的网站而非聊天中进行，请将后台的一小段代码插入到“感谢您的订单”页面，并替换订单号和金额。购买将与对话关联，统计数据将显示哪些对话最终促成了销售。
检查#
设置完成后，请花三分钟进行检查：
- 在无痕模式下打开网站，点击小部件按钮。询问有关商品的问题。
- 在手机上打开代理链接。检查是否提示安装。
- 将链接发送到您的即时通讯工具，查看预览。
- 查看“对话”：两次聊天记录都应显示在那里。
常见问题#
网站小部件和链接是不同的代理吗#
它们是同一个。目录、条件、对话和申请都是通用的。区别仅在于显示方式：网站上是角落里的窗口，通过链接打开的是全屏页面，可以添加到手机主屏幕。
可以更改链接地址吗#
链接地址是在创建店铺时根据店铺名称生成的。如果需要其他地址，请在 Telegram 上联系我们——我们将手动更改，以避免损坏已发布的链接。
小部件会拖慢网站速度吗#
不会。脚本文件很小，并在页面主要内容加载后异步加载。聊天窗口仅在顾客点击按钮时才会加载。
如果代理已关闭，顾客会看到什么#
什么也看不到：按钮不会出现，链接页面会显示代理不可用。开关位于“小部件和链接”部分。
如何移除“由 Commerce Agents 提供支持”字样#
目前无法移除：该署名在所有套餐中都会保留。它是可点击的，并会链接到我们的网站——这是定价的一部分，正因如此，我们的服务才能以 29 € 的价格提供，而非更高的价格。