CCalcu.mx
Calculadoras

Cómo insertar una calculadora en tu sitio web

Insertar un widget de Calcu.mx es pegar un código iframe en tu página. Aquí tienes el paso a paso para cada plataforma y cómo resolver los problemas más comunes.

Respuesta rápida

Para insertar una calculadora, copia su código iframe y pégalo en la vista de HTML de tu página (no en el editor visual). En WordPress usa el bloque «HTML personalizado»; en Wix, Squarespace, Shopify o Google Sites, el bloque o widget de código. Guarda y la calculadora aparecerá lista.

Puntos clave

  • El código siempre va en una zona de HTML, nunca en el editor visual.
  • WordPress.com gratuito y Personal bloquean iframes: necesitas Business o autoalojado.
  • Si el código aparece como texto, lo pegaste en el editor visual.
  • El widget es responsivo; el script opcional de auto-ajuste corrige el alto en móvil.
  • No necesitas registro ni modificar el código: pégalo tal cual.

WordPress (autoalojado)

En WordPress instalado en tu propio hosting (wordpress.org) tienes tres formas, según tu editor:

Editor de bloques (Gutenberg)

  1. 1Edita la entrada o página donde quieras la calculadora.
  2. 2Pulsa «+» para añadir un bloque y busca «HTML personalizado» (Custom HTML).
  3. 3Pega el código iframe dentro del bloque.
  4. 4Usa «Vista previa» y publica.

Editor clásico

  1. 1Abre el editor y cambia a la pestaña «Texto» (no «Visual»).
  2. 2Pega el código donde quieras que aparezca.
  3. 3Guarda; puedes volver a «Visual» para seguir editando.

Elementor

  1. 1Arrastra el widget «HTML» a tu sección.
  2. 2Pega el código iframe en el campo de código.
  3. 3Actualiza la página.

⚠️ La trampa de WordPress.com

Los planes gratuito y Personal de WordPress.com bloquean los iframes por completo. Si pegas el código, al guardar simplemente desaparece y no verás ningún error. Para insertar widgets necesitas el plan Business (o Comercio) de WordPress.com, o bien WordPress autoalojado (wordpress.org). Esto no aplica a WordPress autoalojado, que sí permite iframes en todos los planes de hosting.

Wix

  1. 1En el editor, pulsa «Insertar» (o «+»).
  2. 2Elige «Insertar un widget» → «Insertar código» (Embed HTML / iframe).
  3. 3Pega el código iframe y coloca el bloque donde quieras.
  4. 4Publica el sitio.

Squarespace

  1. 1Añade un bloque y elige «Código» (Code Block).
  2. 2Pega el código iframe y desactiva cualquier opción que lo muestre como texto.
  3. 3Guarda la página.

Shopify

  1. 1En una página, abre el editor de contenido y pulsa «<>» (mostrar HTML).
  2. 2Pega el código iframe en la vista de HTML.
  3. 3Para una sección del tema, usa una sección de «HTML personalizado» en el editor de temas y pega el código ahí.

Blogger

  1. 1Al editar la entrada, cambia de «Redactar» a la vista «HTML».
  2. 2Pega el código iframe donde quieras.
  3. 3Publica la entrada.

Google Sites

  1. 1En el panel derecho, pulsa «Insertar».
  2. 2Elige «Insertar» → «Código de inserción» (Embed code).
  3. 3Pega el código iframe y pulsa «Siguiente» → «Insertar».

Sitio HTML

Si administras tu propio HTML, pega el código dentro del <body>, en el punto exacto donde quieras que aparezca la calculadora. No requiere librerías ni CSS adicional.

El error más común

El fallo número uno es pegar el código en el editor visual en lugar de la vista de HTML. El editor visual «escapa» el código y el visitante ve el texto del iframe en vez de la calculadora. La solución siempre es la misma: cambia a la vista de HTML (o al bloque de HTML) y vuelve a pegar el código.

¿No funciona? Solución de problemas

  • El código aparece como texto: lo pegaste en el editor visual. Usa la vista de HTML.
  • No aparece nada: tu plataforma bloquea iframes (típico de WordPress.com gratuito/Personal). Sube de plan o usa WordPress autoalojado.
  • El widget se ve muy corto o cortado: agrega el script de auto-ajuste (abajo) o aumenta el valor de height del iframe.
  • Se ve angosto en móvil: el iframe usa width="100%"; asegúrate de no envolverlo en un contenedor con ancho fijo.

Script opcional de auto-ajuste

El iframe funciona perfecto sin nada más. Pero si quieres que su alto se acomode solo al contenido (sin barra interna, sin espacio de sobra), añade esta línea una vez en tu página, idealmente antes de </body>:

<script src="https://calcu.mx/widgets/resize.js" async></script>

El script solo escucha mensajes del propio Calcu.mx (verifica el origen de forma estricta) y ajusta el alto de los iframes de Calcu.mx en tu página. Es completamente opcional: la mayoría de los sitios no lo necesitan.

Preguntas frecuentes

¿Cómo inserto un iframe en WordPress?

En WordPress autoalojado, usa el bloque «HTML personalizado» del editor de bloques (Gutenberg) y pega ahí el código. En el editor clásico, cambia a la pestaña «Texto» (no «Visual») antes de pegar. Con Elementor, usa el widget «HTML». En los tres casos el código debe ir en una zona de HTML, no en el editor visual.

¿Por qué mi código aparece como texto en vez de la calculadora?

Casi siempre es porque pegaste el código en el editor visual en lugar de la vista de HTML. El editor visual «escapa» el código y lo muestra como texto. Cambia a la vista de HTML o al bloque de HTML personalizado y vuelve a pegarlo.

¿Por qué el iframe no aparece en WordPress.com gratis?

Los planes gratuito y Personal de WordPress.com bloquean los iframes por seguridad. Necesitas el plan Business (o Comercio) de WordPress.com, o bien WordPress autoalojado (wordpress.org). En los planes que no permiten iframes, el código simplemente desaparece al guardar.

¿Puedo insertar el widget en Wix o Squarespace?

Sí. En Wix usa «Insertar» → «Insertar un widget» → «Insertar código». En Squarespace usa un bloque de «Código» y pega el iframe. En ambos, pega el código tal cual, sin modificarlo.

El widget se ve cortado en el celular, ¿cómo lo arreglo?

En pantallas angostas la calculadora es más alta y puede quedar con una barra de desplazamiento interna. Agrega el script opcional de auto-ajuste (una línea) para que el alto del iframe se acomode solo al contenido en cualquier dispositivo.

¿El widget hace más lento mi sitio?

El impacto es mínimo: el iframe se carga de forma diferida (loading="lazy"), así que solo se descarga cuando el visitante se acerca a él. Puedes poner varios widgets en una misma página sin un efecto notable en la velocidad.

¿Ya sabes cómo insertarlo? Elige tu calculadora en el catálogo de widgets o personalízala en el configurador.