Qué es el widget de calculadora
Un widget de calculadora es una versión pequeña y autocontenida de una calculadora completa de Calculate.Studio que se ejecuta dentro de tu propia página. Técnicamente es un iframe -- un elemento HTML que incrusta una página dentro de otra -- que apunta a una versión ligera de incrustación de la calculadora, más un párrafo de crédito de una línea debajo de ella. El iframe es un elemento HTML estándar compatible con todos los navegadores modernos, así que no hay nada que instalar ni nada que pueda entrar en conflicto con el código propio de tu sitio.
El widget es la misma calculadora que se ejecuta en Calculate.Studio: las mismas fórmulas verificadas, los mismos resultados instantáneos en el lado del cliente y, para las herramientas de salud y finanzas, el mismo aviso legal. Tus visitantes escriben sus números y ven los resultados de inmediato sin salir de tu página. Como el cálculo ocurre en el navegador del visitante y no en un servidor, el widget se mantiene rápido incluso con mucho tráfico, y no se envían datos del visitante a ningún sitio.
Las 210 calculadoras del sitio se pueden incrustar, todas y cada una. La galería en calculate.studio/en/widgets presenta las más solicitadas -- IMC, hipoteca, préstamo, porcentaje, interés compuesto, edad, calorías y promedio de calificaciones (GPA), entre otras -- y cada página individual de calculadora tiene un botón Embed junto a los botones para compartir que revela el snippet de esa herramienta en concreto.
Cómo instalarlo -- el método general
La instalación es un simple copiar y pegar. El snippet contiene dos partes: el iframe que muestra la calculadora y un pequeño párrafo de crédito que enlaza a la calculadora completa y a Calculate.Studio. Mantener intacta esa línea de crédito es la única condición para el uso gratuito -- es lo que mantiene el programa gratuito para todos.
- Abre calculate.studio/en/widgets, o abre cualquier página de calculadora y haz clic en el botón </> Embed.
- Haz clic en Copy code. El snippet se copia a tu portapapeles.
- En el editor de tu sitio web, cambia a la vista HTML (a veces llamada "código" o "fuente") de la página donde quieres la calculadora.
- Pega el snippet donde debe aparecer la calculadora, luego guarda y publica.
- Previsualiza la página. La calculadora debería cargar y calcular de inmediato -- pruébala una vez con números de ejemplo.
Instrucciones específicas por plataforma
La mayoría de los creadores de sitios web aceptan HTML sin procesar a través de un bloque o elemento dedicado, así que el mismo snippet funciona en todas partes. Los nombres varían según la plataforma:
| Plataforma | Dónde pegar el snippet |
|---|---|
| WordPress (editor de bloques) | Añade un bloque "HTML personalizado" y pega el snippet dentro. |
| WordPress (editor clásico) | Cambia la pestaña del editor de "Visual" a "Texto" y pega. |
| Wix | Añade un elemento "Embed HTML" (Añadir → Embed code → Embed HTML) y pega. |
| Squarespace | Añade un bloque "Code" a la sección de la página y pega. |
| Shopify | En el editor de la página o entrada de blog, haz clic en el botón <> (Show HTML) y pega. |
| Webflow | Añade un componente "Embed" y pega. |
| Sitio en HTML plano | Pega el snippet directamente en el HTML de la página donde debe mostrarse la calculadora. |
Tamaño, estilo y rendimiento
El snippet incluye un valor predeterminado sensato: ancho completo (width="100%"), una altura fija ajustada al número de campos de esa calculadora, y un borde ligero y redondeado. Puedes cambiar el valor de la altura si tu tema necesita un marco más alto o más bajo, y puedes editar o eliminar el estilo del borde para que coincida con tu diseño. El ancho es responsivo por defecto, así que el widget funciona en móviles sin trabajo adicional.
El iframe incluye loading="lazy", un atributo estándar del navegador que retrasa la carga del widget hasta que el visitante se desplaza cerca de él. Eso significa que incrustar una calculadora no añade prácticamente nada al tiempo de carga inicial de tu página -- el navegador solo obtiene el widget cuando está a punto de volverse visible.
Las propias páginas de incrustación están marcadas como noindex con un enlace canónico a la página completa de la calculadora, lo cual sigue las directrices de Google para contenido incrustado y duplicado. Por tanto, incrustar un widget no puede generar problemas de contenido duplicado ni para tu sitio ni para el nuestro.
La única regla: conserva el enlace de crédito
El programa de widgets es gratuito y sin registro gracias a una sola condición: el pequeño párrafo de crédito bajo el iframe -- la línea que dice "[Nombre de la calculadora] by Calculate.Studio" -- debe permanecer en su lugar. Es texto de 12 píxeles que se sitúa discretamente bajo el widget y no compite con tu contenido.
Eres libre de redimensionar el iframe, cambiar el estilo de su borde y colocar el widget en cualquier parte de tu sitio, incluidos sitios comerciales, blogs y proyectos de clientes. Si necesitas una calculadora que no está en la galería destacada, cada página de calculadora del sitio tiene su propio botón Embed, así que las 210 herramientas están disponibles.
¿Qué calculadoras funcionan mejor como widgets?
El mejor widget para tu sitio es aquel que, de no estar ahí, obligaría a tus lectores a abandonar tu página para buscarlo. Los blogs de fitness y bienestar suelen incrustar las calculadoras de IMC, calorías o TDEE (gasto energético total diario). Los sitios de bienes raíces y finanzas personales incrustan las calculadoras de hipoteca, préstamo e interés compuesto. Los sitios estudiantiles y educativos incrustan las calculadoras de GPA y porcentaje, y los blogs de interés general suelen añadir la calculadora de edad a publicaciones perennes.
Como cada widget muestra una versión compacta de la calculadora con un enlace a la versión completa -- que incluye tablas de interpretación, ejemplos resueltos y fuentes --, tus lectores obtienen una respuesta inmediata en tu página y un camino hacia un contexto más profundo cuando lo desean.
Preguntas frecuentes
¿El widget de calculadora es realmente gratis?
Sí. No hay registro, ni clave de API, ni límite de uso, ni coste. La única condición es que la pequeña línea de crédito bajo el widget, que enlaza a Calculate.Studio, permanezca en su lugar.
¿El widget ralentizará mi sitio web?
No. El iframe usa la carga diferida nativa del navegador, así que solo se obtiene cuando un visitante se desplaza cerca de él, y el cálculo se ejecuta por completo en el navegador del visitante. Añade prácticamente nada al tiempo de carga inicial.
¿Puedo incrustar una calculadora en un sitio web comercial o de un cliente?
Sí. Los widgets se pueden usar en sitios comerciales, blogs y proyectos de clientes sin coste alguno, siempre que el enlace de crédito bajo el widget permanezca intacto.
¿Puedo cambiar el tamaño o el borde del widget?
Sí. Puedes editar la altura del iframe y el estilo del borde para que coincida con tu sitio. El ancho ya es responsivo (100%), así que se adapta automáticamente a móviles y columnas estrechas.
¿Incrustar el widget causa problemas de contenido duplicado para el SEO?
No. Las páginas de incrustación están marcadas como noindex con un enlace canónico que apunta a la página completa de la calculadora, lo cual sigue las directrices documentadas de Google, así que los motores de búsqueda no tratan el widget como contenido duplicado en tu sitio.
Referencias
- MDN Web Docs — <iframe>: The Inline Frame element. Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
- MDN Web Docs — Lazy loading (loading attribute). Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
- Google Search Central — Consolidate duplicate URLs with canonicals. Google. https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
- Google Search Central — Block search indexing with noindex. Google. https://developers.google.com/search/docs/crawling-indexing/block-indexing
- WHATWG HTML Living Standard — The iframe element. https://html.spec.whatwg.org/multipage/iframe-embed-object.html