Guía de Inicio Rápido del Widget de Monetización de Sitios Web de Mellowtel

Mellowtel permite que tus visitantes opten por compartir el ancho de banda no utilizado a cambio de apoyarte. Añades un pequeño widget a tu sitio, los visitantes eligen instalar la extensión complementaria y tú ganas en función de las solicitudes que maneja su navegador.

Tiempo estimado: 5 a 10 minutos. Necesitarás: una cuenta de Mellowtel y acceso al HTML de tu sitio (o un equivalente en tu framework).

Cómo funciona

Incrustas el widget

Una etiqueta de script renderiza un botón, icono o banner en tu sitio.

Un visitante hace clic

Se les lleva a instalar la extensión complementaria de Mellowtel.

Obtienes crédito

Tu invite_id vincula a ese visitante con tu cuenta, por lo que las solicitudes manejadas por su navegador se te atribuyen.

Antes de comenzar

Una cuenta de Mellowtel. Regístrate aquí si no tienes una.
Tu invite_id, que se encuentra en tu tablero después de crear un enlace de soporte.
Acceso al HTML de tu sitio, o la capacidad de añadir una etiqueta <script> a través de tu framework o CMS.

Pega esto en tu sitio, reemplazando INVITE_ID con el valor de tu tablero. Se recomienda colocarlo justo antes de </body> para que no bloquee la renderización de la 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
}

<!-- Añadir al footer.php de tu tema justo antes de </body>, -->
<!-- o usa un plugin de "Scripts de Header & Footer" y pégalo en el campo del pie de página. -->
<script
  src="https://cdn.mellow.tel/widget.js?type=button&position=bottom-right&invite_id=INVITE_ID"
  async>
</script>

<!-- Webflow: Configuración del Proyecto > Código Personalizado > Código del Pie de Página -->
<!-- Shopify: Tienda 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>

Opciones de configuración

Controla la apariencia del widget a través de parámetros de consulta en la URL del script.

Parámetro	Requerido	Valores	Descripción
`invite_id`	Sí	Tu ID del tablero	Atribuye las ganancias a tu cuenta.
`type`	Sí	`button`, `icon`, `banner`	Estilo del widget mostrado en tu sitio.
`position`	Sí	`bottom-right`, `bottom-left`, `top-right`, `top-left`	Dónde se ubica el widget en la página.

Previsualiza cada combinación en vivo antes de lanzarlo: abre la previsualización del widget. Cambia los parámetros type y position en la URL para ver cada variante.

Verifica que funcione

Carga tu sitio

Abre la página en una nueva pestaña del navegador (o en una ventana de incógnito para evitar la caché).

Confirma que el widget se renderiza

Deberías ver el botón, icono o banner en la posición que elegiste. Si falta, revisa la consola del navegador para ver si hay solicitudes bloqueadas.

Haz clic en el flujo

Al hacer clic en el widget deberías ser llevado a la página de instalación de la extensión con tu invite_id adjunto.

Revisa tu tablero

Una vez que un visitante instala y opta por participar, su actividad aparece en tu tablero de Mellowtel.

Solución de problemas

El widget no aparece

Veo una advertencia de 'missing invite_id'

El parámetro invite_id está vacío o aún contiene el marcador de posición literal INVITE_ID. Copia el valor real de tu tablero y pégalo en la URL.

Funciona localmente pero no en producción

A menudo, una regla de CSP o CDN está eliminando el script. Revisa los encabezados de respuesta en tu host de producción y permite cdn.mellow.tel.

¿Cómo elimino el widget?

Divulga a tus visitantes

Recomendamos añadir una breve nota a tu política de privacidad para que los visitantes entiendan qué significa optar por participar. Algo como:

Este sitio se asocia con Mellowtel. Si eliges instalar su extensión, tu navegador puede compartir el ancho de banda no utilizado para apoyar este sitio. La instalación es opcional y puedes optar por no participar en cualquier momento.

Consulta Privacidad y Optar por participar / Optar por no participar para obtener todos los detalles que puedes enlazar.

¿Necesitas ayuda?

Contáctanos en info@mellowtel.com o únete a nosotros en Discord.

Comenzar

Conceptos

Aplicaciones de escritorio

Complementos del navegador

Sitio web

Elementos de Mellowtel

Aplicación móvil

Monetiza tu sitio web con Mellowtel

Cómo funciona

Antes de comenzar

Instalar el widget

Opciones de configuración

Verifica que funcione

Solución de problemas

Divulga a tus visitantes

¿Necesitas ayuda?

​Cómo funciona

​Antes de comenzar

​Instalar el widget

​Opciones de configuración

​Verifica que funcione

​Solución de problemas

​Divulga a tus visitantes

​¿Necesitas ayuda?

Cómo funciona

Antes de comenzar

Instalar el widget

Opciones de configuración

Verifica que funcione

Solución de problemas

Divulga a tus visitantes

¿Necesitas ayuda?