> ## 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.
# Monetize your website with Mellowtel
> Add a single script tag to let visitors support you by opting in to share unused bandwidth.
Mellowtel lets your visitors opt in to share unused bandwidth in exchange for supporting you. You add a small widget to your site, visitors choose to install the companion extension, and you earn based on the requests their browser handles.
**Estimated time:** 5 to 10 minutes. **You will need:** a [Mellowtel account](https://www.mellowtel.com/mellowtel-auth/) and access to your site's HTML (or a framework equivalent).
## How it works
A script tag renders a button, icon, or banner on your site.
They are taken to install the Mellowtel companion extension.
Your `invite_id` links that visitor to your account, so requests handled by their browser are attributed to you.
## Before you start
* A Mellowtel account. [Sign up here](https://www.mellowtel.com/mellowtel-auth/) if you don't have one.
* Your `invite_id`, found on your [dashboard](https://www.mellowtel.com/mellowtel-auth/) after creating a support link.
* Access to your site's HTML, or the ability to add a `
```
```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}
```
## Configuration options
Control the widget's appearance through query parameters on the script URL.
| Parameter | Required | Values | Description |
| ----------- | -------- | ------------------------------------------------------ | ------------------------------------ |
| `invite_id` | Yes | Your ID from the dashboard | Attributes earnings to your account. |
| `type` | Yes | `button`, `icon`, `banner` | Widget style shown on your site. |
| `position` | Yes | `bottom-right`, `bottom-left`, `top-right`, `top-left` | Where the widget sits on the page. |
Preview every combination live before shipping: [open the widget preview](https://cdn.mellow.tel/preview?position=bottom-right\&type=button\&invite_id=ijxf49s9h2f). Swap the `type` and `position` params in the URL to see each variant.
## Verify it works
Open the page in a fresh browser tab (or incognito window to bypass cache).
You should see the button, icon, or banner in the position you chose. If it is missing, check the browser console for blocked requests.
Clicking the widget should take you to the extension install page with your `invite_id` attached.
Once a visitor installs and opts in, their activity shows up on your Mellowtel dashboard.
## Troubleshooting
* Confirm the script tag is inside `` and your `invite_id` is filled in.
* Open DevTools and check the Network tab for a request to `cdn.mellow.tel/widget.js`. If it is blocked, an ad blocker or content filter is likely the cause.
* Check your Content Security Policy. You may need to allow `https://cdn.mellow.tel` under `script-src`.
The `invite_id` parameter is empty or still contains the literal `INVITE_ID` placeholder. Copy the real value from your dashboard and paste it into the URL.
Most often a CSP or CDN rule is stripping the script. Check response headers on your production host and allowlist `cdn.mellow.tel`.
Delete the `