Documentación de embeds de BrutoNet

Vista general

Un embed de BrutoNet es un iframe HTML estándar de ~6 líneas que renderiza una calculadora completamente funcional dentro de tu web. El visitante puede usar el calculator sin salir de tu sitio. Los datos se calculan en el navegador del visitante (no se envía nada a servidores de BrutoNet más allá del Referer header propio del navegador).

Tienes 14 calculadoras disponibles en el catálogo: sueldo bruto-neto, IRPF, finiquito, pensión, horas extras, hipoteca, capacidad de endeudamiento, interés compuesto, ahorro jubilación, ROI inmobiliario, inflación IPC y ganancias patrimoniales.

Plantilla del código embed

El código que vas a copiar tiene esta forma:

<iframe
  src="https://www.brutonet.es/embed/iframe/CALCULADORA/"
  width="100%"
  height="720"
  style="border:0;max-width:100%"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin"
  title="Nombre de la calculadora — BrutoNet"
></iframe>

Donde CALCULADORA es el slug de la calculadora (por ejemplo, conversor-bruto-neto). La altura recomendada (entre 660 y 800 px) varía por calculadora — la página de cada widget te da el valor óptimo. El parámetro loading="lazy" es importante: hace que el iframe solo se descargue cuando el usuario hace scroll a él, mejorando tu Core Web Vitals.

Instalación en WordPress

WordPress es la plataforma más usada y la más sencilla para embeber. Hay dos casos según el editor:

Editor Gutenberg (default desde WP 5.0)

1. Abre la entrada o página donde quieres mostrar el widget.
2. Pulsa el botón "+" para añadir un nuevo bloque.
3. Busca "HTML personalizado" (en inglés: "Custom HTML"). Selecciónalo.
4. Pega el código embed que copiaste de BrutoNet.
5. Pulsa "Vista previa" para verificar.
6. Publica o actualiza la entrada.

Editor Clásico

1. Cambia a la pestaña "Texto" (no "Visual").
2. Pega el código embed donde quieres que aparezca.
3. Vuelve a "Visual" para ver una vista previa.
4. Actualiza la entrada.

Tip: si tu WordPress usa un plugin de seguridad como Wordfence o iThemes Security que filtra iframes, añade brutonet.es a la lista de orígenes permitidos.

Instalación en Wix

1. Abre el editor de Wix de la página objetivo.
2. Pulsa "+ Add" en el sidebar.
3. Selecciona "Embed Code" → "HTML iframe".
4. En el panel que aparece, pega el código embed completo.
5. Ajusta el tamaño del bloque arrastrando las esquinas (Wix respeta el width/height del iframe).
6. Pulsa "Publicar".

Instalación en Webflow

1. En el Designer, arrastra un componente "Embed" desde el panel Add Elements.
2. Pulsa el componente. Aparece un editor modal.
3. Pega el código embed completo.
4. Pulsa "Save & Close". El iframe se renderiza en el preview de Webflow.
5. Publica el sitio.

Instalación en Squarespace

1. Edita la página objetivo.
2. Pulsa "+" para añadir un bloque.
3. Selecciona "Code" (requiere plan Business o superior). Si tu plan no incluye Code Block, usa "Embed" con la URL del iframe.
4. En el dropdown, selecciona "HTML".
5. Pega el código y guarda.

Instalación en Shopify

Hay dos formas según dónde quieras el widget:

En una página de producto o sección

1. Ve a Tienda online → Páginas (o Productos).
2. Edita la página deseada y cambia el editor a "</>" (Show HTML).
3. Pega el código embed.
4. Guarda.

En el theme (footer global, sidebar, etc.)

1. Ve a Tienda online → Temas → Acciones → Editar código.
2. Edita theme.liquid o la sección correspondiente.
3. Pega el código embed donde quieras que aparezca.
4. Guarda y publica.

Substack, Notion, Medium

• Substack: en el editor, escribe / y selecciona "Embed". Pega el código.
• Notion: escribe /embed y pega la URL del iframe (no el código completo, solo la URL https://www.brutonet.es/embed/iframe/SLUG/).
• Medium: pegado directo del HTML embed (Medium aplica el iframe automáticamente para URLs reconocidas).

HTML manual / sitios estáticos (Astro, Hugo, Jekyll, Next.js…)

Pega el código embed dentro de cualquier <div>, <article> o cualquier elemento contenedor de tu HTML. El iframe es un elemento HTML estándar y todos los frameworks modernos lo renderizan sin transformación.

Ejemplo en Astro:

---
const SITE = 'https://www.brutonet.es';
---

<article>
  <h2>Calcula tu finiquito en segundos</h2>
  <iframe
    src={`${SITE}/embed/iframe/calculadora-finiquito/`}
    width="100%"
    height="800"
    style="border:0;max-width:100%"
    loading="lazy"
    sandbox="allow-scripts allow-same-origin"
    title="Calculadora de Finiquito — BrutoNet"
  />
</article>

Personalización

Tema claro / oscuro

Añade ?theme=dark al final de la URL del iframe para tema oscuro:

src="https://www.brutonet.es/embed/iframe/conversor-bruto-neto/?theme=dark"

Tema por defecto: light. No requiere parámetro.

Altura del widget

Cambia el atributo height del iframe. Cada calculadora tiene una altura recomendada en su página de embed que evita scroll interno y asegura visibilidad de todos los campos. Mínimo recomendado: 600 px. Si quieres altura dinámica que se ajuste al contenido, usa postMessage (ver sección avanzada).

Altura dinámica (postMessage avanzado)

El iframe envía un postMessage al cargar con su altura interna. Si quieres ajustar la altura del iframe automáticamente al contenido, escucha este mensaje en tu sitio:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://www.brutonet.es') return;
  if (event.data?.source !== 'brutonet-embed') return;
  if (event.data?.type === 'loaded') {
    // El iframe se ha cargado. Si quieres reaccionar, hazlo aquí.
    console.log('Widget BrutoNet cargado:', event.data.tool);
  }
});

Resolución de problemas

El widget no aparece

Verifica:

• El código está pegado en un bloque HTML (no en texto plano del editor visual).
• Tu sitio es HTTPS (Chrome bloquea iframes HTTPS desde sitios HTTP).
• No tienes un plugin que filtre iframes (Wordfence, iThemes Security, etc.).
• Tu CSP custom permite frame-src https://www.brutonet.es.

El widget aparece pero está cortado / con scroll interno

Aumenta el atributo height del iframe. Cada calculadora tiene una altura recomendada en su página de embed.

El widget tarda mucho en cargar

Es esperado en la primera carga (CSS + JS Svelte ~80 KB Brotli). Las cargas posteriores son instantáneas (caché del navegador, 1 año). Si la primera carga tarda más de 3s, verifica tu conexión y contáctanos en hola@brutonet.es.

El número que muestra el widget no coincide con mi cálculo

Las calculadoras de BrutoNet aplican Method B AEAT (LIRPF art. 56-57) para IRPF y los topes oficiales de Seguridad Social 2026. Si tu cálculo difiere, comprueba:

• Qué CCAA has seleccionado (los tramos autonómicos varían).
• Número de pagas (12 vs 14: el bruto anual es idéntico, el mensual difiere).
• Si has incluido el mínimo personal (5.550 € + descendientes) correctamente.
• Para foral PV/Navarra, las deducciones son de cuota fija, no reducción de base.

Para un caso concreto, abre la calculadora en BrutoNet directamente y compara con el simulador oficial de la AEAT (que da el mismo resultado que nuestro Method B).

Términos de uso

Los widgets de BrutoNet son gratis para embeber bajo las siguientes condiciones:

• Atribución obligatoria: el footer del iframe ("Calculado por BrutoNet · brutonet.es") es no removible.
• Uso comercial permitido: puedes embeber en webs comerciales, blogs con publicidad, agencias, asesorías o medios.
• Uso educativo permitido: cursos, profesores, escuelas — sin restricción.
• NO se permite: sublicenciar, revender el widget como propio, eliminar la atribución o crear copias modificadas que oculten el origen.
• Aviso YMYL: las calculadoras son orientativas. Tu web debe mantener un disclaimer indicando que no son asesoramiento financiero, fiscal o jurídico personalizado. BrutoNet no se responsabiliza de decisiones tomadas a partir de los resultados.

Si tienes dudas, sugerencias o necesitas un widget personalizado (sin atribución, con tu marca, con datos prefilled, con eventos analytics propios), escríbenos a hola@brutonet.es.