> ## 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.
# Monetisiere deine Website mit Mellowtel
> Füge ein einzelnes Skript-Tag hinzu, um Besuchern zu ermöglichen, dich durch das Teilen ungenutzter Bandbreite zu unterstützen.
Mellowtel ermöglicht es deinen Besuchern, ungenutzte Bandbreite zu teilen, um dich zu unterstützen. Du fügst ein kleines Widget zu deiner Seite hinzu, Besucher entscheiden sich, die Begleit-Erweiterung zu installieren, und du verdienst basierend auf den Anfragen, die ihr Browser bearbeitet.
**Geschätzte Zeit:** 5 bis 10 Minuten. **Du benötigst:** ein [Mellowtel-Konto](https://www.mellowtel.com/mellowtel-auth/) und Zugriff auf das HTML deiner Website (oder ein entsprechendes Framework).
## So funktioniert es
Ein Skript-Tag rendert einen Button, ein Icon oder ein Banner auf deiner Seite.
Sie werden zur Installation der Mellowtel-Begleit-Erweiterung weitergeleitet.
Deine `invite_id` verknüpft diesen Besucher mit deinem Konto, sodass Anfragen, die von ihrem Browser bearbeitet werden, dir zugeschrieben werden.
## Bevor du beginnst
* Ein Mellowtel-Konto. [Hier anmelden](https://www.mellowtel.com/mellowtel-auth/), wenn du noch keines hast.
* Deine `invite_id`, die du auf deinem [Dashboard](https://www.mellowtel.com/mellowtel-auth/) nach dem Erstellen eines Support-Links findest.
* Zugriff auf das HTML deiner Website oder die Möglichkeit, ein `
```
```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}
```
## Konfigurationsoptionen
Steuere das Erscheinungsbild des Widgets über Abfrageparameter in der Skript-URL.
| Parameter | Erforderlich | Werte | Beschreibung |
| ----------- | ------------ | ------------------------------------------------------ | ------------------------------------------------- |
| `invite_id` | Ja | Deine ID aus dem Dashboard | Ordnet die Einnahmen deinem Konto zu. |
| `type` | Ja | `button`, `icon`, `banner` | Widget-Stil, der auf deiner Seite angezeigt wird. |
| `position` | Ja | `bottom-right`, `bottom-left`, `top-right`, `top-left` | Wo das Widget auf der Seite platziert wird. |
Vorschau jeder Kombination live, bevor du sie veröffentlichst: [öffne die Widget-Vorschau](https://cdn.mellow.tel/preview?position=bottom-right\&type=button\&invite_id=ijxf49s9h2f). Tausche die `type`- und `position`-Parameter in der URL aus, um jede Variante zu sehen.
## Überprüfe, ob es funktioniert
Öffne die Seite in einem neuen Browser-Tab (oder im Inkognito-Fenster, um den Cache zu umgehen).
Du solltest den Button, das Icon oder das Banner an der von dir gewählten Position sehen. Wenn es fehlt, überprüfe die Browser-Konsole auf blockierte Anfragen.
Ein Klick auf das Widget sollte dich zur Installationsseite der Erweiterung mit deiner `invite_id` führen.
Sobald ein Besucher die Erweiterung installiert und sich anmeldet, wird seine Aktivität auf deinem Mellowtel-Dashboard angezeigt.
## Fehlerbehebung
* Bestätige, dass das Skript-Tag innerhalb von `` ist und deine `invite_id` ausgefüllt ist.
* Öffne die DevTools und überprüfe den Netzwerk-Tab auf eine Anfrage an `cdn.mellow.tel/widget.js`. Wenn sie blockiert ist, liegt das wahrscheinlich an einem Adblocker oder Inhaltsfilter.
* Überprüfe deine Content Security Policy. Möglicherweise musst du `https://cdn.mellow.tel` unter `script-src` erlauben.
Der `invite_id`-Parameter ist leer oder enthält noch den Platzhalter `INVITE_ID`. Kopiere den echten Wert aus deinem Dashboard und füge ihn in die URL ein.
Meistens wird ein CSP- oder CDN-Regel das Skript entfernen. Überprüfe die Antwort-Header auf deinem Produktionshost und setze `cdn.mellow.tel` auf die Whitelist.
Lösche das `