> ## 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.
# Monétisez votre site web avec Mellowtel
> Ajoutez une simple balise script pour permettre aux visiteurs de vous soutenir en choisissant de partager leur bande passante inutilisée.
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](https://www.mellowtel.com/mellowtel-auth/) et accès au HTML de votre site (ou un équivalent de framework).
## Comment ça fonctionne
Une balise script affiche un bouton, une icône ou une bannière sur votre site.
Ils sont redirigés pour installer l'extension compagnon Mellowtel.
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](https://www.mellowtel.com/mellowtel-auth/) si vous n'en avez pas.
* Votre `invite_id`, trouvé sur votre [tableau de bord](https://www.mellowtel.com/mellowtel-auth/) après avoir créé un lien de soutien.
* Accès au HTML de votre site, ou la capacité d'ajouter une balise `
```
```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}
```
## 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](https://cdn.mellow.tel/preview?position=bottom-right\&type=button\&invite_id=ijxf49s9h2f). Changez les paramètres `type` et `position` dans l'URL pour voir chaque variante.
## Vérifiez que ça fonctionne
Ouvrez la page dans un nouvel onglet de navigateur (ou une fenêtre incognito pour contourner le cache).
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.
Cliquer sur le widget devrait vous amener à la page d'installation de l'extension avec votre `invite_id` attaché.
Une fois qu'un visiteur installe et opte pour, son activité apparaît sur votre tableau de bord Mellowtel.
## Dépannage
* Confirmez que la balise script est à l'intérieur de `` et que votre `invite_id` est rempli.
* Ouvrez DevTools et vérifiez l'onglet Réseau pour une requête à `cdn.mellow.tel/widget.js`. Si elle est bloquée, un bloqueur de publicités ou un filtre de contenu est probablement la cause.
* Vérifiez votre politique de sécurité de contenu. Vous devrez peut-être autoriser `https://cdn.mellow.tel` sous `script-src`.
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.
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.
Supprimez la balise `