Mellowtel 网站创收小部件快速入门指南

Mellowtel 让你的访客可以选择共享未使用的带宽来支持你。你只需在你的网站上添加一个小部件，访客选择安装配套扩展程序，你就可以根据他们浏览器处理的请求来赚取收益。

预计时间： 5 到 10 分钟。你将需要： 一个 Mellowtel 账户和访问你网站 HTML 的权限（或等效的框架）。

工作原理

你嵌入小部件

一个脚本标签会在你的网站上渲染一个按钮、图标或横幅。

访客点击它

他们会被引导去安装 Mellowtel 配套扩展程序。

你获得积分

你的 invite_id 将该访客与你的账户关联，因此他们浏览器处理的请求会归功于你。

开始之前

一个 Mellowtel 账户。如果你还没有，请在这里注册。
你的 invite_id，在创建支持链接后可以在你的仪表板上找到。
访问你网站 HTML 的权限，或通过你的框架或 CMS 添加 <script> 标签的能力。

安装小部件

将以下代码粘贴到你的网站中，并将 INVITE_ID 替换为你仪表板中的值。建议将其放置在 </body> 之前，以免阻塞页面渲染。

<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

import Script from 'next/script'

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

import { useEffect } from 'react'

export function MellowtelWidget() {
  useEffect(() => {
    const s = document.createElement('script')
    s.src = 'https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID'
    s.async = true
    document.body.appendChild(s)
    return () => { s.remove() }
  }, [])
  return null
}

<!-- 添加到你的主题的 footer.php 中，紧靠 </body> 之前， -->
<!-- 或使用 "Header & Footer Scripts" 插件并粘贴到页脚字段中。 -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

<!-- Webflow: 项目设置 > 自定义代码 > 页脚代码 -->
<!-- Shopify: 在线商店 > 主题 > 编辑代码 > theme.liquid (在 </body> 之前) -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

配置选项

通过脚本 URL 上的查询参数控制小部件的外观。

参数	必需	值	描述
`invite_id`	是	你的仪表板 ID	将收益归功于你的账户。
`type`	是	`button`, `icon`, `banner`	在你网站上显示的小部件样式。
`position`	是	`bottom-right`, `bottom-left`, `top-right`, `top-left`	小部件在页面上的位置。

在发布前实时预览每种组合：打开小部件预览。在 URL 中交换 type 和 position 参数以查看每个变体。

验证其是否有效

加载你的网站

在新的浏览器标签页中打开页面（或使用隐身窗口以绕过缓存）。

确认小部件渲染

你应该在选择的位置看到按钮、图标或横幅。如果缺失，请检查浏览器控制台中是否有被阻止的请求。

点击流程

点击小部件应该将你带到扩展程序安装页面，并附带你的 invite_id。

检查你的仪表板

一旦访客安装并选择加入，他们的活动就会显示在你的 Mellowtel 仪表板上。

故障排除

小部件未显示

确认脚本标签在 <body> 内，并且你的 invite_id 已填写。
打开开发者工具并检查网络选项卡中是否有对 cdn.mellow.tel/widget.js 的请求。如果被阻止，可能是广告拦截器或内容过滤器导致的。
检查你的内容安全策略。你可能需要在 script-src 下允许 https://cdn.mellow.tel。

我看到“缺少 invite_id”警告

invite_id 参数为空或仍包含字面 INVITE_ID 占位符。从你的仪表板复制真实值并粘贴到 URL 中。

本地有效但在生产环境中无效

通常是 CSP 或 CDN 规则剥离了脚本。检查你生产主机上的响应头并将 cdn.mellow.tel 列入白名单。

如何移除小部件？

删除 <script> 标签（或包裹它的框架组件）。没有其他需要清理的。

向访客披露

我们建议在你的隐私政策中添加一段简短说明，以便访客了解选择加入的意义。类似于：

本站与 Mellowtel 合作。如果你选择安装他们的扩展程序，你的浏览器可能会共享未使用的带宽以支持本站。安装是可选的，你可以随时选择退出。

查看隐私和选择加入/选择退出以获取你可以链接的完整详细信息。

需要帮助？

通过 info@mellowtel.com 联系我们，或加入我们的 Discord。

​工作原理

​开始之前

​安装小部件

​配置选项

​验证其是否有效

​故障排除

​向访客披露

​需要帮助？

工作原理

开始之前

安装小部件

配置选项

验证其是否有效

故障排除

向访客披露

需要帮助？