Guide de démarrage rapide du widget de monétisation de site web Mellowtel

Mellowtel permet à vos visiteurs de choisir de partager leur bande passante inutilisée en échange de vous soutenir. Vous ajoutez un petit widget à votre site, les visiteurs choisissent d’installer l’extension compagnon, et vous gagnez en fonction des requêtes traitées par leur navigateur.

Temps estimé : 5 à 10 minutes. Vous aurez besoin de : un compte Mellowtel et accès au HTML de votre site (ou un équivalent de framework).

Comment ça fonctionne

Vous intégrez le widget

Une balise script affiche un bouton, une icône ou une bannière sur votre site.

Un visiteur clique dessus

Ils sont redirigés pour installer l’extension compagnon Mellowtel.

Vous recevez du crédit

Votre invite_id lie ce visiteur à votre compte, donc les requêtes traitées par leur navigateur vous sont attribuées.

Avant de commencer

Un compte Mellowtel. Inscrivez-vous ici si vous n’en avez pas.
Votre invite_id, trouvé sur votre tableau de bord après avoir créé un lien de soutien.
Accès au HTML de votre site, ou la capacité d’ajouter une balise <script> via votre framework ou CMS.

Collez ceci dans votre site, en remplaçant INVITE_ID par la valeur de votre tableau de bord. Il est recommandé de le placer juste avant </body> pour ne pas bloquer le rendu de la page.

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

<!-- Ajoutez à votre theme's footer.php juste avant </body>, -->
<!-- ou utilisez un plugin "Header & Footer Scripts" et collez dans le champ pied de page. -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

<!-- Webflow: Paramètres du projet > Code personnalisé > Code du pied de page -->
<!-- Shopify: Boutique en ligne > Thèmes > Modifier le code > theme.liquid (avant </body>) -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

Options de configuration

Contrôlez l’apparence du widget via les paramètres de requête dans l’URL du script.

Paramètre	Requis	Valeurs	Description
`invite_id`	Oui	Votre ID du tableau de bord	Attribue les gains à votre compte.
`type`	Oui	`button`, `icon`, `banner`	Style du widget affiché sur votre site.
`position`	Oui	`bottom-right`, `bottom-left`, `top-right`, `top-left`	Où le widget est placé sur la page.

Prévisualisez chaque combinaison en direct avant de publier : ouvrez la prévisualisation du widget. Changez les paramètres type et position dans l’URL pour voir chaque variante.

Vérifiez que ça fonctionne

Chargez votre site

Ouvrez la page dans un nouvel onglet de navigateur (ou une fenêtre incognito pour contourner le cache).

Confirmez que le widget s'affiche

Vous devriez voir le bouton, l’icône ou la bannière à l’emplacement choisi. S’il manque, vérifiez la console du navigateur pour les requêtes bloquées.

Cliquez à travers le flux

Cliquer sur le widget devrait vous amener à la page d’installation de l’extension avec votre invite_id attaché.

Vérifiez votre tableau de bord

Une fois qu’un visiteur installe et opte pour, son activité apparaît sur votre tableau de bord Mellowtel.

Dépannage

Le widget ne s'affiche pas

Je vois un avertissement 'invite_id manquant'

Le paramètre invite_id est vide ou contient encore le littéral INVITE_ID. Copiez la vraie valeur de votre tableau de bord et collez-la dans l’URL.

Ça fonctionne localement mais pas en production

Le plus souvent, une règle CSP ou CDN supprime le script. Vérifiez les en-têtes de réponse sur votre hôte de production et mettez cdn.mellow.tel sur liste blanche.

Comment supprimer le widget ?

Divulguer à vos visiteurs

Nous recommandons d’ajouter une courte note à votre politique de confidentialité pour que les visiteurs comprennent ce que signifie opter. Quelque chose comme :

Ce site est partenaire de Mellowtel. Si vous choisissez d’installer leur extension, votre navigateur peut partager de la bande passante inutilisée pour soutenir ce site. L’installation est optionnelle et vous pouvez vous désinscrire à tout moment.

Voir Confidentialité et Opt in / Opt out pour les détails complets que vous pouvez lier.

Besoin d’aide ?

Contactez-nous à info@mellowtel.com ou rejoignez-nous sur Discord.

Monétisez votre site web avec Mellowtel

Comment ça fonctionne

Avant de commencer

Installer le widget

Options de configuration

Vérifiez que ça fonctionne

Dépannage

Divulguer à vos visiteurs

Besoin d’aide ?

​Comment ça fonctionne

​Avant de commencer

​Installer le widget

​Options de configuration

​Vérifiez que ça fonctionne

​Dépannage

​Divulguer à vos visiteurs

​Besoin d’aide ?

Comment ça fonctionne

Avant de commencer

Installer le widget

Options de configuration

Vérifiez que ça fonctionne

Dépannage

Divulguer à vos visiteurs

Besoin d’aide ?