> ## 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.
# Monetiseer je website met Mellowtel
> Voeg een enkele script-tag toe zodat bezoekers je kunnen ondersteunen door ongebruikte bandbreedte te delen.
Mellowtel laat je bezoekers kiezen om ongebruikte bandbreedte te delen in ruil voor ondersteuning. Je voegt een kleine widget toe aan je site, bezoekers kiezen ervoor om de bijbehorende extensie te installeren, en je verdient op basis van de verzoeken die hun browser afhandelt.
**Geschatte tijd:** 5 tot 10 minuten. **Je hebt nodig:** een [Mellowtel-account](https://www.mellowtel.com/mellowtel-auth/) en toegang tot de HTML van je site (of een equivalent framework).
## Hoe het werkt
Een script-tag rendert een knop, icoon of banner op je site.
Ze worden doorgestuurd om de Mellowtel-extensie te installeren.
Je `invite_id` koppelt die bezoeker aan je account, zodat verzoeken die door hun browser worden afgehandeld aan jou worden toegeschreven.
## Voordat je begint
* Een Mellowtel-account. [Meld je hier aan](https://www.mellowtel.com/mellowtel-auth/) als je er nog geen hebt.
* Je `invite_id`, te vinden op je [dashboard](https://www.mellowtel.com/mellowtel-auth/) na het maken van een ondersteuningslink.
* Toegang tot de HTML van je site, of de mogelijkheid om een `
```
```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}
```
## Configuratie-opties
Beheer het uiterlijk van de widget via queryparameters in de script-URL.
| Parameter | Vereist | Waarden | Beschrijving |
| ----------- | ------- | ------------------------------------------------------ | ----------------------------------------- |
| `invite_id` | Ja | Je ID van het dashboard | Ken verdiensten toe aan je account. |
| `type` | Ja | `button`, `icon`, `banner` | Widgetstijl die op je site wordt getoond. |
| `position` | Ja | `bottom-right`, `bottom-left`, `top-right`, `top-left` | Waar de widget op de pagina staat. |
Bekijk elke combinatie live voordat je deze verzendt: [open de widgetvoorbeeld](https://cdn.mellow.tel/preview?position=bottom-right\&type=button\&invite_id=ijxf49s9h2f). Wissel de `type` en `position` parameters in de URL om elke variant te zien.
## Verifieer dat het werkt
Open de pagina in een nieuwe browsertab (of incognitovenster om de cache te omzeilen).
Je zou de knop, het icoon of de banner moeten zien op de door jou gekozen positie. Als het ontbreekt, controleer dan de browserconsole op geblokkeerde verzoeken.
Door op de widget te klikken, zou je naar de extensie-installatiepagina moeten worden geleid met je `invite_id` eraan gekoppeld.
Zodra een bezoeker installeert en zich aanmeldt, verschijnt hun activiteit op je Mellowtel-dashboard.
## Problemen oplossen
* Bevestig dat de script-tag binnen `` staat en je `invite_id` is ingevuld.
* Open DevTools en controleer het Netwerk-tabblad voor een verzoek naar `cdn.mellow.tel/widget.js`. Als het geblokkeerd is, is waarschijnlijk een adblocker of inhoudsfilter de oorzaak.
* Controleer je Content Security Policy. Mogelijk moet je `https://cdn.mellow.tel` toestaan onder `script-src`.
De `invite_id` parameter is leeg of bevat nog steeds de letterlijke `INVITE_ID` placeholder. Kopieer de echte waarde van je dashboard en plak deze in de URL.
Meestal wordt een CSP- of CDN-regel toegepast die het script verwijdert. Controleer de responsheaders op je productiehost en plaats `cdn.mellow.tel` op de witte lijst.
Verwijder de `