# Step 1 产品说明
> Step 1 是面向**外贸独立站**的 **AI + 真人实时客服**。在网站里加一行代码，网页右下角就会出现聊天窗口：AI 依据你提供的知识库，随时回答海外访客关于运费、起订量、交期、退换、保修等问题；访客要报价、要找人，或 AI 没有把握时，对话会转给你的团队接手。出品方：Steplan（阶梯计划）。
- 官网：
- 免费注册：
- 演示网站（装好 Step 1 的示例独立站）：
- 帮助中心：
- 联系：
**English summary.** Step 1 by Steplan is a live chat widget with an AI agent for cross-border e-commerce (DTC) stores. One script tag adds it to any site (Shopify, WordPress, plain HTML, React/Vue, mobile WebView). The AI answers visitors from the merchant's own knowledge base (FAQs, web pages, PDF/DOCX files) in the visitor's language, and hands the conversation to a human when the visitor asks for a quote or a person, or when the AI isn't confident. One account manages up to 20 stores from a single inbox.
## 关键事实
| 项目 | 说明 |
| --- | --- |
| 产品类型 | 网站实时聊天组件 + AI 客服 + 团队收件箱 |
| 适合谁 | 外贸独立站、B2B 询盘型官网、跨境电商店铺 |
| 接入方式 | 在页面里加一行 `
```
- 放在网页 `` 之前即可；控制台提供 HTML、WordPress、Shopify、React / Next.js、Vue / Nuxt、移动端 WebView 的分步指南。
- **安装检测**：组件在你的网站上加载后，控制台会显示"已检测到"及检测到的域名；如果和你填写的域名不一致会提醒。
- **可选参数**：`autoShow=false`（不自动弹出）、`position=left`（放在左下角）。
- **JavaScript 接口**：`window.contactWidget.show()`、`hide()`、`toggle()`、`showChat()`、`applySettings({...})`、`on('message', fn)`。
### 没有网站源代码也能接入
接入不需要拿到网站的源代码。按你手上有的权限选一种：
| 你有什么 | 用哪种方式 | 访客看到的效果 |
| --- | --- | --- |
| 建站平台的后台账号 | 方式 1：在后台粘贴代码 | 网页角落的聊天窗口 |
| 网站已装 Google 跟踪代码管理器（GTM） | 方式 2：用 GTM 添加 | 网页角落的聊天窗口 |
| 什么都改不了 | 方式 3：只用联系页面链接 | 点链接打开一个独立的聊天页 |
**方式 1：在建站平台后台粘贴代码**
只需要后台账号，不需要源代码：
- **Shopify**：后台进入「在线商店 → 主题 → 编辑代码」，打开 `layout/theme.liquid`，把代码粘贴到 `` 之前并保存。建议先在主题副本上测试。
- **WordPress**：安装并启用「WPCode」（原名 Insert Headers and Footers）插件，把代码粘贴到 Footer 区域并保存，无需改主题文件。
- **其他 SaaS 建站平台**：大多数平台在后台设置里提供「自定义代码」「第三方代码」或「Code Injection」之类的位置，把代码贴到页脚（Footer / Body 末尾）即可。菜单名称以各平台为准。
**方式 2：用 Google 跟踪代码管理器（GTM）**
如果网站已经装了 GTM（投放广告的独立站常见），不用改网站就能加。要用到的代码：
```html