Guia de Início Rápido do Widget de Monetização de Site Mellowtel

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 e acesso ao HTML do seu site (ou um equivalente de framework).

Como funciona

Você incorpora o widget

Uma tag de script renderiza um botão, ícone ou banner no seu site.

Um visitante clica nele

Eles são direcionados para instalar a extensão complementar Mellowtel.

Você recebe crédito

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 se você ainda não tiver uma.
Seu invite_id, encontrado no seu painel de controle após criar um link de suporte.
Acesso ao HTML do seu site, ou a capacidade de adicionar uma tag <script> através do seu framework ou CMS.

Cole isso no seu site, substituindo INVITE_ID pelo valor do seu painel de controle. Recomenda-se colocá-lo logo antes de </body> para não bloquear o carregamento da página.

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

<!-- Adicione ao footer.php do seu tema logo antes de </body>, -->
<!-- ou use um plugin "Header & Footer Scripts" e cole no campo do rodapé. -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

<!-- Webflow: Configurações do Projeto > Código Personalizado > Código do Rodapé -->
<!-- Shopify: Loja Online > Temas > Editar Código > theme.liquid (antes de </body>) -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

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. Troque os parâmetros type e position na URL para ver cada variante.

Verifique se funciona

Carregue seu site

Abra a página em uma nova aba do navegador (ou janela anônima para ignorar o cache).

Confirme se o widget é renderizado

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.

Clique no fluxo

Clicar no widget deve te levar à página de instalação da extensão com seu invite_id anexado.

Verifique seu painel de controle

Uma vez que um visitante instala e opta por participar, a atividade deles aparece no seu painel de controle Mellowtel.

Solução de problemas

O widget não está aparecendo

Vejo um aviso de 'invite_id ausente'

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.

Funciona localmente, mas não em produção

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.

Como removo o widget?

Divulgue aos seus visitantes

Recomendamos adicionar uma breve nota à sua política de privacidade para que os visitantes entendam o que significa optar por participar. Algo como:

Este site faz parceria com a Mellowtel. Se você optar por instalar a extensão deles, seu navegador pode compartilhar a largura de banda não utilizada para apoiar este site. A instalação é opcional e você pode optar por sair a qualquer momento.

Veja Privacidade e Opt in / Opt out para os detalhes completos que você pode vincular.

Precisa de ajuda?

Entre em contato pelo info@mellowtel.com ou junte-se a nós no Discord.

Monetize seu site com Mellowtel

Como funciona

Antes de começar

Instale o widget

Opções de configuração

Verifique se funciona

Solução de problemas

Divulgue aos seus visitantes

Precisa de ajuda?

​Como funciona

​Antes de começar

​Instale o widget

​Opções de configuração

​Verifique se funciona

​Solução de problemas

​Divulgue aos seus visitantes

​Precisa de ajuda?

Como funciona

Antes de começar

Instale o widget

Opções de configuração

Verifique se funciona

Solução de problemas

Divulgue aos seus visitantes

Precisa de ajuda?