> ## 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.
# Monetize seu site com Mellowtel
> Adicione uma única tag de script para permitir que os visitantes te apoiem optando por compartilhar a largura de banda não utilizada.
Mellowtel permite que seus visitantes optem por compartilhar a largura de banda não utilizada em troca de te apoiar. Você adiciona um pequeno widget ao seu site, os visitantes escolhem instalar a extensão complementar, e você ganha com base nas solicitações que o navegador deles lida.
**Tempo estimado:** 5 a 10 minutos. **Você vai precisar:** de uma [conta Mellowtel](https://www.mellowtel.com/mellowtel-auth/) e acesso ao HTML do seu site (ou um equivalente de framework).
## Como funciona
Uma tag de script renderiza um botão, ícone ou banner no seu site.
Eles são direcionados para instalar a extensão complementar Mellowtel.
Seu `invite_id` vincula esse visitante à sua conta, então as solicitações tratadas pelo navegador deles são atribuídas a você.
## Antes de começar
* Uma conta Mellowtel. [Cadastre-se aqui](https://www.mellowtel.com/mellowtel-auth/) se você ainda não tiver uma.
* Seu `invite_id`, encontrado no seu [painel de controle](https://www.mellowtel.com/mellowtel-auth/) após criar um link de suporte.
* Acesso ao HTML do seu site, ou a capacidade de adicionar uma tag `
```
```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}
```
## Opções de configuração
Controle a aparência do widget através de parâmetros de consulta na URL do script.
| Parâmetro | Obrigatório | Valores | Descrição |
| ----------- | ----------- | ------------------------------------------------------ | -------------------------------------- |
| `invite_id` | Sim | Seu ID do painel de controle | Atribui ganhos à sua conta. |
| `type` | Sim | `button`, `icon`, `banner` | Estilo do widget mostrado no seu site. |
| `position` | Sim | `bottom-right`, `bottom-left`, `top-right`, `top-left` | Onde o widget fica na página. |
Visualize cada combinação ao vivo antes de enviar: [abra a pré-visualização do widget](https://cdn.mellow.tel/preview?position=bottom-right\&type=button\&invite_id=ijxf49s9h2f). Troque os parâmetros `type` e `position` na URL para ver cada variante.
## Verifique se funciona
Abra a página em uma nova aba do navegador (ou janela anônima para ignorar o cache).
Você deve ver o botão, ícone ou banner na posição escolhida. Se estiver faltando, verifique o console do navegador para solicitações bloqueadas.
Clicar no widget deve te levar à página de instalação da extensão com seu `invite_id` anexado.
Uma vez que um visitante instala e opta por participar, a atividade deles aparece no seu painel de controle Mellowtel.
## Solução de problemas
* Confirme que a tag de script está dentro de `` e seu `invite_id` está preenchido.
* Abra o DevTools e verifique a aba Network para uma solicitação a `cdn.mellow.tel/widget.js`. Se estiver bloqueada, um bloqueador de anúncios ou filtro de conteúdo provavelmente é a causa.
* Verifique sua Política de Segurança de Conteúdo. Você pode precisar permitir `https://cdn.mellow.tel` em `script-src`.
O parâmetro `invite_id` está vazio ou ainda contém o placeholder literal `INVITE_ID`. Copie o valor real do seu painel de controle e cole na URL.
Na maioria das vezes, uma regra CSP ou CDN está removendo o script. Verifique os cabeçalhos de resposta no seu host de produção e coloque `cdn.mellow.tel` na lista de permissões.
Exclua a tag `