Mellowtel Website-Monetarisierungs-Widget Schnellstartanleitung

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 und Zugriff auf das HTML deiner Website (oder ein entsprechendes Framework).

So funktioniert es

Du bettest das Widget ein

Ein Skript-Tag rendert einen Button, ein Icon oder ein Banner auf deiner Seite.

Ein Besucher klickt darauf

Sie werden zur Installation der Mellowtel-Begleit-Erweiterung weitergeleitet.

Du erhältst Gutschriften

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, wenn du noch keines hast.
Deine invite_id, die du auf deinem Dashboard nach dem Erstellen eines Support-Links findest.
Zugriff auf das HTML deiner Website oder die Möglichkeit, ein <script>-Tag über dein Framework oder CMS hinzuzufügen.

Füge dies in deine Seite ein und ersetze INVITE_ID mit dem Wert aus deinem Dashboard. Es wird empfohlen, es direkt vor </body> zu platzieren, damit es das Seitenrendering nicht blockiert.

<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
}

<!-- Füge es in die footer.php deines Themes direkt vor </body> ein, -->
<!-- oder verwende ein "Header & Footer Scripts"-Plugin und füge es in das Footer-Feld ein. -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

<!-- Webflow: Projekteinstellungen > Benutzerdefinierter Code > Footer-Code -->
<!-- Shopify: Online-Shop > Themes > Code bearbeiten > theme.liquid (vor </body>) -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

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. Tausche die type- und position-Parameter in der URL aus, um jede Variante zu sehen.

Überprüfe, ob es funktioniert

Lade deine Seite

Öffne die Seite in einem neuen Browser-Tab (oder im Inkognito-Fenster, um den Cache zu umgehen).

Bestätige, dass das Widget angezeigt wird

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.

Durchlaufe den Ablauf

Ein Klick auf das Widget sollte dich zur Installationsseite der Erweiterung mit deiner invite_id führen.

Überprüfe dein Dashboard

Sobald ein Besucher die Erweiterung installiert und sich anmeldet, wird seine Aktivität auf deinem Mellowtel-Dashboard angezeigt.

Fehlerbehebung

Das Widget wird nicht angezeigt

Ich sehe eine 'fehlende invite_id'-Warnung

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.

Es funktioniert lokal, aber nicht in der Produktion

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.

Wie entferne ich das Widget?

Offenlegung gegenüber deinen Besuchern

Wir empfehlen, einen kurzen Hinweis in deine Datenschutzerklärung aufzunehmen, damit die Besucher verstehen, was das Opt-in bedeutet. Etwa so:

Diese Seite arbeitet mit Mellowtel zusammen. Wenn du dich entscheidest, deren Erweiterung zu installieren, kann dein Browser ungenutzte Bandbreite teilen, um diese Seite zu unterstützen. Die Installation ist optional und du kannst dich jederzeit abmelden.

Siehe Datenschutz und Opt-in / Opt-out für die vollständigen Details, auf die du verlinken kannst.

Brauchst du Hilfe?

Kontaktiere uns unter info@mellowtel.com oder tritt uns auf Discord bei.

Monetisiere deine Website mit Mellowtel

So funktioniert es

Bevor du beginnst

Installiere das Widget

Konfigurationsoptionen

Überprüfe, ob es funktioniert

Fehlerbehebung

Offenlegung gegenüber deinen Besuchern

Brauchst du Hilfe?

​So funktioniert es

​Bevor du beginnst

​Installiere das Widget

​Konfigurationsoptionen

​Überprüfe, ob es funktioniert

​Fehlerbehebung

​Offenlegung gegenüber deinen Besuchern

​Brauchst du Hilfe?

So funktioniert es

Bevor du beginnst

Installiere das Widget

Konfigurationsoptionen

Überprüfe, ob es funktioniert

Fehlerbehebung

Offenlegung gegenüber deinen Besuchern

Brauchst du Hilfe?