Mellowtel Website Monetization Widget Snelle Start Gids

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 en toegang tot de HTML van je site (of een equivalent framework).

Hoe het werkt

Je embedt de widget

Een script-tag rendert een knop, icoon of banner op je site.

Een bezoeker klikt erop

Ze worden doorgestuurd om de Mellowtel-extensie te installeren.

Je krijgt krediet

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 als je er nog geen hebt.
Je invite_id, te vinden op je dashboard na het maken van een ondersteuningslink.
Toegang tot de HTML van je site, of de mogelijkheid om een <script>-tag toe te voegen via je framework of CMS.

Plak dit in je site, vervang INVITE_ID door de waarde van je dashboard. Het wordt aanbevolen om het net voor </body> te plaatsen, zodat het de paginaweergave niet blokkeert.

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

<!-- Voeg toe aan de footer.php van je thema net voor </body>, -->
<!-- of gebruik een "Header & Footer Scripts" plugin en plak het in het voettekstenveld. -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

<!-- Webflow: Projectinstellingen > Aangepaste code > Voettekstcode -->
<!-- Shopify: Online Store > Thema's > Code bewerken > theme.liquid (voor </body>) -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

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. Wissel de type en position parameters in de URL om elke variant te zien.

Verifieer dat het werkt

Laad je site

Open de pagina in een nieuwe browsertab (of incognitovenster om de cache te omzeilen).

Bevestig dat de widget wordt weergegeven

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.

Klik door de flow

Door op de widget te klikken, zou je naar de extensie-installatiepagina moeten worden geleid met je invite_id eraan gekoppeld.

Controleer je dashboard

Zodra een bezoeker installeert en zich aanmeldt, verschijnt hun activiteit op je Mellowtel-dashboard.

Problemen oplossen

De widget wordt niet weergegeven

Ik zie een 'missing invite_id' waarschuwing

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.

Het werkt lokaal maar niet in productie

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.

Hoe verwijder ik de widget?

Informeer je bezoekers

We raden aan om een korte notitie toe te voegen aan je privacybeleid zodat bezoekers begrijpen wat het betekent om zich aan te melden. Iets als:

Deze site werkt samen met Mellowtel. Als je ervoor kiest om hun extensie te installeren, kan je browser ongebruikte bandbreedte delen om deze site te ondersteunen. Installatie is optioneel en je kunt je op elk moment afmelden.

Zie Privacy en Aanmelden / Afmelden voor de volledige details waar je naar kunt linken.

Hulp nodig?

Neem contact op via info@mellowtel.com of sluit je aan bij ons op Discord.

Monetiseer je website met Mellowtel

Hoe het werkt

Voordat je begint

Installeer de widget

Configuratie-opties

Verifieer dat het werkt

Problemen oplossen

Informeer je bezoekers

Hulp nodig?

​Hoe het werkt

​Voordat je begint

​Installeer de widget

​Configuratie-opties

​Verifieer dat het werkt

​Problemen oplossen

​Informeer je bezoekers

​Hulp nodig?

Hoe het werkt

Voordat je begint

Installeer de widget

Configuratie-opties

Verifieer dat het werkt

Problemen oplossen

Informeer je bezoekers

Hulp nodig?