Flow 小组件 · Flow Widget

一段代码,给你的网站装上 AI 问答与开发入口

复制一行 <script>,页面右上角就多出「AI 助手」:访客可就本页主题提问(走 freem.ai 智能路由 auto),也可提出开发需求;页脚前自动沉淀成 FAQ。样式隔离、可配置、开箱即用 —— 右上角的按钮就是它本人,点一下试试。

它能做什么

问答(auto)

接入 freem.ai 智能路由,按问题自动选模型作答,带来源引用,保留多轮上下文。

开发(飞流)

访客描述想要的功能/页面/接口,进入 Freem Flow 队列;当前按「人工处理」跟进。

对话历史

每个浏览器保留自己的多轮对话,可切换、可继续追问,无需登录。

FAQ 沉淀

问答自动汇成页脚前的 FAQ,最新若干条内联展示,「更多」跳独立分页页。

三步集成

把下面这行放进页面(一般在 </body> 前即可),把 data-site 换成你的站点标识:

<script src="https://freem.ai/flow-widget.js" data-site="yoursite" defer></script>

就这样。按钮会自动插到语言切换按钮(.navbtn)旁边,FAQ 会插到 <footer> 之前。需要微调时,加上下面的可选属性:

属性默认说明
data-site必填站点标识(用于隔离会话与 FAQ),如 sport
data-brand1面板底部 Powered by freem 回链;默认显示,仅付费/特批站点可设 0(接入条款)
data-featuresqa,dev启用的功能:qa(问答)/ dev(开发),逗号分隔
data-anchor.navbtn按钮插入位置(CSS 选择器,插在该元素前);找不到则右上角浮动
data-faq-beforefooterFAQ 区块插入在该元素之前;设为空则不插
data-faq1是否显示页脚前的 FAQ 区块(0 关闭)
data-faq-limit10FAQ 区块显示的最新问答条数
data-accent#4F87ED主题色
data-lang跟随页面强制语言 zh/en(默认跟随宿主 html.zh/.en 或 freem_lang)
data-labelAI 助手触发按钮文字
data-contextmain,article,[data-flow-page],.wrap用于提取页面正文的 CSS 选择器;长文只生成一次概览并复用
data-api脚本同源后端 API 根地址(默认取脚本 origin)

按框架接入(5 分钟)

静态 HTML / 任何服务端模板

在每个页面(或公共模板)的 </body> 前粘贴上面那行。多页站放进公共 footer 模板即可全站生效。

  ...
  <script src="https://freem.ai/flow-widget.js" data-site="yoursite" defer></script>
</body>
WordPress

两种方式任选:① 用 WPCode 等「插入代码」插件,新建一条 Site-wide Footer 片段粘贴脚本;② 主题自带「页脚代码/Footer Scripts」设置的直接粘贴。避免改 footer.php(换主题会丢)。

Next.js(App Router)

在根 app/layout 里用 next/script,属性用 data-* 原样传:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script src="https://freem.ai/flow-widget.js"
          data-site="yoursite" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Pages Router 放 _app_document 同理;客户端路由切页不需重载,组件挂载一次全站可用。

装好了?30 秒验证

① 页面右上角出现「AI 助手」按钮(有 .navbtn 锚点时挨着它,没有则右上角浮动);② 点开随便问一句,能流式回答;③ 若开了 FAQ(data-faq 非 0),滚到页脚前能看到 FAQ 区。
常见坑:脚本被 CSP 拦(放行 freem.ai);data-site 忘改(会话会混进别站);SPA 手写路由把 DOM 整个替换掉(把脚本放在持久布局层)。

数据与运营

会话与问答存于 freem 侧数据库;token 消耗、回答/开发模型、最近互动与开发工单,统一在 flow 后台查看与配置。开发需求默认进人工队列,可在后台处理。

申请接入你的网站

组件已在 rushos / freem 系 31+ 个站点长期运行(本页右上角按钮就是活的 demo)。当前对外接入为白名单制——AI 回答的 token 成本由 freem 承担,先控量保质量:留下站点与邮箱,开通你的 data-site 标识后邮件通知你。

Flow 小组件 · 由 freem.ai 提供 · 已用于 rushos 全景图系列