用 STUDIO 做出来的网站，外观通常很好看。但上线一段时间后，咨询表单里会开始堆积同样的问题：「多少钱？」「服务覆盖哪些地区？」「从签约到开始要多久？」

答案其实写在网站的某个地方，只是访客没找到，于是打开了表单。而在等待回复的这段时间里，他们已经去问别家了。一个当场就能回答的入口，能把这部分流失补回来。

本文按实际设置界面，讲解如何在 STUDIO 网站上安装 AI 聊天机器人。同时会讲到 STUDIO 特有的「预览里看不到」的规格，以及为什么不能把代码贴进嵌入框（Embed）。不知道这两点，你会以为贴对了却坏掉了。

本文要点

为什么 STUDIO 上安装聊天机器人只有「自定义代码」一条路
三步安装的具体操作
为什么必须付费套餐，以及该怎么看待这笔成本
「贴了却不显示」的绝大多数原因，来自 STUDIO 特有的规格
和 LINE、网店搭配使用时该怎么分工

1. STUDIO 的入口是「自定义代码」

STUDIO 没有直接编辑 HTML 文件的功能，在设计编辑器里做出来的内容就是最终的线上网站。因此，插入外部脚本的入口只有自定义代码。

自定义代码可以在 </head> 之前和 </body> 之前插入你自己写的代码。它是放统计代码、广告代码时也会用到的标准机制，聊天机器人同样放在这里。

嵌入框（Embed）行不通

STUDIO 还有另一个能写代码的地方：从添加面板放置的嵌入框（Embed / Blank 框）。里面也能写 HTML 和 JavaScript，所以很多人第一反应是贴在这儿。但它不适合聊天挂件。

原因是嵌入框的内容会在 iframe 里展开。iframe 只把自己的框内当作绘制区域。而聊天机器人的设计是固定浮在屏幕右下角、点击后大幅展开，被关进框里以后，按钮会被裁切、面板也无法越出边框。

凡是需要浮在整个页面之上的东西——聊天机器人就是其一——都必须放进自定义代码。嵌入框适合的是地图、视频、表单这类「要放在这个位置、这个尺寸」的内容。

2. 安装步骤（三步）

下面以我们自己的产品 Monoshiri AI 为例。整个过程约 5 分钟，全程不需要写代码。

第 1 步：获取嵌入代码

<script async src="https://monoshiri.ai/widget/embed.js" data-api-key="（你获得的密钥）" data-api-url="https://api.monoshiri.ai"></script>

不需要事先登记目标域名。 无论是 studio.site 的子域名，还是绑定了独立域名的站点，同一段代码都能直接工作。

第 2 步：打开自定义代码设置

在 STUDIO 设计编辑器里打开目标项目，找到自定义代码的输入区。点击画布外侧的灰色区域打开右侧面板，你会看到设置分成了两个标签：应用于整站的，和按页面应用的。

聊天机器人要出现在所有页面，所以选整站那一侧。

编辑器界面会更新。如果菜单名称和本文不一致，请在 STUDIO 官方帮助中搜索「自定义代码」，确认当前的位置。

第 3 步：贴在 `</body>` 之前并发布

自定义代码有两个位置：</head> 之前和 </body> 之前。聊天机器人请放在 </body> 之前。

</head> 那一侧会在页面本体绘制之前执行，最容易影响加载体感。像聊天挂件这种「页面显示出来之后再从右下角冒出来就行」的东西，放在结束标签之前更合适。

贴好后保存，然后发布（Publish）。这一步比听起来重要得多，下一节会说明原因。

更详细的要求和带截图的步骤整理在 STUDIO 集成页。关于挂件的通用思路（不限于 STUDIO），请参阅聊天挂件部署指南。

3. 绝大多数问题出在「在预览里检查」

这是 STUDIO 上最常见的坑。

自定义代码在设计编辑器和预览里不会运行。 STUDIO 官方帮助明确写道：添加的代码不会在设计编辑器或实时预览中运行，请在已发布的网站上测试。

也就是说，设置完全正确，但只要你看的是预览，右下角就什么都不会出现。如果此时判断「设置错了」而反复重贴，或者把代码挪进嵌入框，反而会越走越偏。

正确的检查顺序是这样：

贴进自定义代码并保存
发布（Publish）
用浏览器打开已发布的网址（studio.site 或独立域名）
若仍不显示，用强制刷新（Windows：Ctrl+F5 / Mac：Command+Shift+R）再确认一次

如果还是没有，就检查 Monoshiri AI 一侧的挂件是否已设为公开。后台里还是草稿状态的话，代码贴在哪都不会显示。

知道了就不会绕路的规格

官方帮助里列出的规格中，实战中真正用得上的有这几条：

</head> 之前能写的标签有限（link / meta / style / script / noscript）。聊天机器人是 script 标签，两边都能放，但推荐 </body> 之前
</head> 侧与 </body> 侧各最多 10 个代码块，每个输入框上限 30,000 字符。就算同时放统计代码，正常使用也碰不到上限
整站和单页两种设置都有。 写在单页里就只在那一页显示。聊天机器人请写在整站一侧

4. 为什么必须付费套餐，以及成本怎么看

直说：STUDIO 的自定义代码是付费套餐专属功能。 免费（Free）套餐下输入框本身不可用，所以无法用这个方法安装聊天机器人。

STUDIO 的付费套餐从 Mini 起。截至 2026 年 9 月，年付约合每月 590 日元，月付约每月 1,290 日元。套餐结构和价格会变动，签约前请务必在 STUDIO 官方价格页确认最新条件。

值得理清的一点是：如果这个 STUDIO 网站是用于经营的，你迟早都要升级到付费套餐——为了绑定独立域名、为了去掉横幅。与其说是「为了自定义代码而升级」，不如理解为「升级之后顺带可以用的功能之一」，这更贴近实际。

聊天机器人这一侧的费用是另算的。作为参考，下面是 Monoshiri AI 的数字。

	Free	Light	Standard	Pro
月费（含税）	0 日元	2,980 日元	7,980 日元	29,800 日元
AI 回答数（每月）	150 次	1,000 次	3,000 次	20,000 次
文件夹数	1	5	10	30
每个文件夹的文件数	30	100	300	300
聊天挂件	1 个（每月 150 次）	1 个	1 个	1 个

截至 2026 年 9 月。最新内容请见价格方案。

把免费套餐当作「确认它在自己网站上能不能用」的工具比较现实。一旦聊天机器人开始发挥作用，每月 150 次大约以每天 5 次的速度用完。反过来说，几个月都碰不到上限，那你也得到了一个确凿的事实：咨询量本身就不大。

「免费」的几种切法，在如何免费为 WordPress 添加聊天机器人里归纳成了三种类型。这套思路放在 STUDIO 上同样成立。

5. 与 LINE、网店的搭配

LINE 的入口和 AI 聊天，职责不同

「想在 STUDIO 网站上放 LINE」这个需求很常见，需要先理清楚。

LINE 官方账号提供的主要是加好友的入口，而不是把 LINE 的聊天界面嵌进你的网站、让对话在站内完成的机制（规格会变，最新情况请查阅 LINE 官方文档）。

所以，网站上放了 LINE 入口之后，访客要经历「跳到 LINE App、加好友、然后才能提问」。对只想马上问一句的人来说，这中间有三道坎。

现实的分工是这样：

访客想当场得到答案的问题 → 用聊天挂件即时回答
希望建立长期联系的对象 → 引导到 LINE 加好友

Monoshiri AI 也支持 LINE 集成，网页挂件和 LINE 官方账号的自动回复可以基于同一批资料给出同样的答案，不必为每个渠道分别准备答案。相关思路整理在用 LINE 回答内部知识。

网店跑在另一个服务上的情况

用 STUDIO 做企业官网、销售交给另一个电商服务，是很常见的组合。这种情况下，两边贴同一段嵌入代码，同一个聊天机器人就会在两边同时工作。不需要按域名登记，贴上即可。

电商一侧的步骤见如何为 Shopify 添加聊天机器人和如何为 BASE 添加聊天机器人。

6. 能回答什么，取决于你喂了什么

只是装上，聊天机器人什么也答不出来。AI 读到的资料的质量，直接变成回答的质量。

不需要设计剧本或问答分支。上传文本或 PDF，AI 就会依据内容作答。对于 STUDIO 常见的企业官网、服务站点，先放这五样：

服务介绍资料 —— 提供什么、覆盖范围、和别家的区别
价格表 —— 套餐、可选项、有没有初装费
FAQ 页面的内容 —— 把网站上已有的原样复制过来就够了
导入流程 —— 从咨询到开始的步骤和周期
公司概况与服务地区 —— 地址、营业时间、可服务的区域

诀窍是把网站上已经写好的内容原样做成文件。一想着重新写一遍，光这一步就会把落地卡住。

STUDIO 做的网站往往优先考虑设计、信息密度偏低，因此更容易积累「因为没写所以被问」的问题。喂给聊天机器人的资料，同时也是网站装不下的细节的存放处。

7. 装完才是开始

聊天机器人不是装好就完事的工具。有没有效果，几乎完全取决于装完之后你看不看会话日志。

Monoshiri AI 的后台可以查看访客的提问、AI 的回答和评价。要看的不是答得好的会话，而是答不上来的会话。那份清单原封不动就是「网站上没写的信息」。

常见的几种模式：

关于服务地区的提问很多 → 补一份服务地区资料，同时在网站上写明
「个人也能委托吗」反复出现 → 在服务介绍页加一句话
被问到价格的细则 → 在价格表里补上条件

第三条才是关键：聊天机器人收集到的问题，同时也是网站的改进清单。 减少咨询最有效的办法，是让人根本不需要问。

其他容易踩的坑

右下角按钮重叠。 STUDIO 网站常在同一角落放「回到顶部」按钮。冲突时可以在 Monoshiri AI 后台把按钮改到左下角。

手机上的显示。 多数挂件在手机上会切换成全屏。装好后一定要用真机打开确认。只把电脑浏览器窗口缩窄，会漏掉一些布局问题。

与动画的冲突。 挂件作为独立脚本固定在右下角运行，不会干扰 STUDIO 的滚动演出和交互。

不能预约或收款。 聊天机器人能做的是依据资料回答问题，不会确认预约或处理支付。在挂件设置里登记一个咨询表单 URL，AI 答不上来时就有地方可去。

总结

STUDIO 上只有一个位置：自定义代码。嵌入框被关在 iframe 里，无法承载固定在右下角的聊天挂件
三步：获取嵌入代码 → 打开自定义代码 → 贴在 </body> 之前并发布。约 5 分钟，不需要写代码
最大的坑是自定义代码在编辑器和预览里不运行，务必在已发布的网站上确认
自定义代码是付费套餐专属，免费套餐装不了；价格会变，签约前请查官方页面
每侧最多 10 个代码块，每个输入框上限 30,000 字符
嵌入代码不需要按域名登记，studio.site 和独立域名都能直接用
LINE 不是在站内完成对话的机制，所以分工要清楚：当场提问用挂件，长期联系用 LINE
回答质量由资料质量决定。把服务介绍、价格表、FAQ、导入流程、公司概况从现有页面复制过来
装好后看日志，把答不上来的问题回填到资料和网站本身

如何为 STUDIO 网站添加聊天机器人｜自定义代码嵌入步骤【2026年版】

本文要点