> ## Documentation Index
> Fetch the complete documentation index at: https://www.mellowtel.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# 通过 Mellowtel 为你的网站创收
> 添加一个简单的脚本标签，让访客通过选择共享未使用的带宽来支持你。
Mellowtel 让你的访客可以选择共享未使用的带宽来支持你。你只需在你的网站上添加一个小部件，访客选择安装配套扩展程序，你就可以根据他们浏览器处理的请求来赚取收益。
**预计时间：** 5 到 10 分钟。**你将需要：** 一个 [Mellowtel 账户](https://www.mellowtel.com/mellowtel-auth/) 和访问你网站 HTML 的权限（或等效的框架）。
## 工作原理
一个脚本标签会在你的网站上渲染一个按钮、图标或横幅。
他们会被引导去安装 Mellowtel 配套扩展程序。
你的 `invite_id` 将该访客与你的账户关联，因此他们浏览器处理的请求会归功于你。
## 开始之前
* 一个 Mellowtel 账户。如果你还没有，请[在这里注册](https://www.mellowtel.com/mellowtel-auth/)。
* 你的 `invite_id`，在创建支持链接后可以在你的[仪表板](https://www.mellowtel.com/mellowtel-auth/)上找到。
* 访问你网站 HTML 的权限，或通过你的框架或 CMS 添加 `
```
```jsx Next.js (App Router) theme={null}
import Script from 'next/script'
export default function Layout({ children }) {
return (
{children}
)
}
```
```jsx React (Vite / CRA) theme={null}
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
}
```
```html WordPress theme={null}
```
```html Webflow / Shopify theme={null}
```
## 配置选项
通过脚本 URL 上的查询参数控制小部件的外观。
| 参数 | 必需 | 值 | 描述 |
| ----------- | -- | ------------------------------------------------------ | -------------- |
| `invite_id` | 是 | 你的仪表板 ID | 将收益归功于你的账户。 |
| `type` | 是 | `button`, `icon`, `banner` | 在你网站上显示的小部件样式。 |
| `position` | 是 | `bottom-right`, `bottom-left`, `top-right`, `top-left` | 小部件在页面上的位置。 |
在发布前实时预览每种组合：[打开小部件预览](https://cdn.mellow.tel/preview?position=bottom-right\&type=button\&invite_id=ijxf49s9h2f)。在 URL 中交换 `type` 和 `position` 参数以查看每个变体。
## 验证其是否有效
在新的浏览器标签页中打开页面（或使用隐身窗口以绕过缓存）。
你应该在选择的位置看到按钮、图标或横幅。如果缺失，请检查浏览器控制台中是否有被阻止的请求。
点击小部件应该将你带到扩展程序安装页面，并附带你的 `invite_id`。
一旦访客安装并选择加入，他们的活动就会显示在你的 Mellowtel 仪表板上。
## 故障排除
* 确认脚本标签在 `` 内，并且你的 `invite_id` 已填写。
* 打开开发者工具并检查网络选项卡中是否有对 `cdn.mellow.tel/widget.js` 的请求。如果被阻止，可能是广告拦截器或内容过滤器导致的。
* 检查你的内容安全策略。你可能需要在 `script-src` 下允许 `https://cdn.mellow.tel`。
`invite_id` 参数为空或仍包含字面 `INVITE_ID` 占位符。从你的仪表板复制真实值并粘贴到 URL 中。
通常是 CSP 或 CDN 规则剥离了脚本。检查你生产主机上的响应头并将 `cdn.mellow.tel` 列入白名单。
删除 `