Lane.Chat 的 Web Widget 是前端一段 JS snippet，装上去就能在站点右下角出现聊天入口。这篇讲 Shopify 和普通独立站怎么装、怎么定制、怎么测。
步骤 1: 控制台拿 widget code
登录 Lane.Chat 控制台，左侧栏 渠道 → Web Widget。如果是第一次用，点 新建 widget，给它起个名字（比如 shopify-main-store），保存。
页面会生成一段 JS snippet，长这样：
<script async src="https://cdn.lane.chat/widget.js"
data-lane-id="wgt_xxxxxxxxxxxx"></script>把这段 code 复制下来，接下来要粘贴到你的站点。
/assets/blog/screenshots/install-web-widget/01-console-widget-snippet.png步骤 2: 粘贴到 Shopify theme.liquid
如果你用 Shopify：
- Shopify 管理后台 → 在线商店 → 主题
- 找到当前主题，点 操作 → 编辑代码
- 左侧文件树找到
layout/theme.liquid - 把 widget snippet 粘贴到
</head>标签前面一行 - 点保存
/assets/blog/screenshots/install-web-widget/02-shopify-theme-liquid.png独立站（Next.js / WordPress / 静态站）也一样——找到全局 HTML 的 <head>，把 snippet 丢进去就行。WordPress 推荐用 "Insert Headers and Footers" 这类插件，避免直接改主题文件。
步骤 3: 自定义颜色和 launcher 样式
回到控制台的 Web Widget 页面，切到 外观 标签：
- 主色：聊天按钮和消息气泡的颜色，直接和你品牌色对齐
- Launcher 位置：右下 / 左下
- 欢迎语：第一次打开时显示的提示气泡文案
- 头像：可以上传一张，也可以用默认
改完点保存，前端是实时生效的——不需要再改站点 code。
/assets/blog/screenshots/install-web-widget/03-widget-appearance-config.png步骤 4: 关联 app 和 AI 助手
Widget 接进来的对话需要绑定到一个 Lane.Chat app（app = 你的一个业务实体，背后挂 AI 配置、知识库、坐席团队）。
在 widget 设置里找 关联 app，从下拉选一个。如果还没建 app，先去 应用 → 新建。
关联好之后，widget 会自动继承那个 app 的 AI 策略：哪个模型、哪个知识库、触发人工交接的条件等等。
步骤 5: 测试
打开你的站点（Shopify 的话直接打开店铺首页，独立站就是你改完的那个页面），右下角应该出现 launcher。点开，发一条测试消息。
同时登录控制台 对话 页面——你的测试消息应该立刻出现。
/assets/blog/screenshots/install-web-widget/04-widget-live-test.png如果 launcher 没出现，90% 的情况是缓存。Shopify 清一下 theme 缓存（保存一次主题就会清），独立站刷新 / 无痕模式打开试试。
步骤 6: 上线前检查
- 手机端打开站点，launcher 在 iOS Safari / Android Chrome 下都正常
- 结账页 / 高转化页 widget 不要遮挡 CTA 按钮——如果有遮挡，在控制台把 launcher 位置挪一下，或者针对那几个页面设置 hide
- 测一次访客留资流程：匿名访客发消息 → 留邮箱 / TG → 控制台里 user attribution 能看到来源页面
截图清单 / Screenshots Checklist
01-console-widget-snippet.png— 控制台 Web Widget 页面，显示生成的 JS snippet02-shopify-theme-liquid.png— Shopify theme.liquid 编辑器，光标在</head>前03-widget-appearance-config.png— Widget 外观配置面板（主色、位置、欢迎语）04-widget-live-test.png— 站点右下角 launcher 展开、控制台同步收到测试消息