Widgets incrustables: una calculadora en cualquier web que trae clientes y enlaces

El reto

La web típica de una empresa de ventanas es un folleto: fotos, una lista de perfiles y un formulario de contacto. Las preguntas reales del visitante - cuánto me va a costar, qué ayuda puedo pedir, qué exige la normativa donde vivo - reciben la misma respuesta: llámanos.

Crear esas herramientas para cada empresa por separado es caro, y mantener al día las reglas de las ayudas y los datos regionales en decenas de webs no es realista. La idea era construirlas una vez, alojarlas de forma centralizada y dejar que cualquier empresa del sector las ponga en su web copiando y pegando un fragmento. Para Estimia, que las aloja, cada inserción tenía que devolver algo: un enlace visible y seguible a su sitio.

Nuestro caso de Estimia menciona estos widgets en pocas líneas; aquí se explica cómo funcionan.

La calculadora del distribuidor, con sus propios precios

El widget principal es la calculadora profesional de ventanas - la misma que usan los distribuidores dentro del CRM de Estimia - empaquetada como componente web que funciona en cualquier sitio. La empresa añade una hoja de estilos, un script y una etiqueta <pvc-master> a la página, y sus visitantes tienen el editor completo: plantillas de ventanas, divisiones y aperturas, perfiles, acristalamiento, colores, vierteaguas, persianas, mosquiteras y un precio que se actualiza con cada cambio.

El precio es el de la empresa. En modo real, el widget carga desde la plataforma el catálogo y los márgenes de esa empresa ya resueltos, de modo que la calculadora de la web presupuesta exactamente lo mismo que el equipo comercial en la oficina. Cuando el visitante pulsa “Solicitar presupuesto”, se abre un formulario de contacto corto, y las ventanas configuradas llegan al CRM de la empresa como un pedido nuevo en la primera etapa del embudo, marcado como procedente del widget y con la página desde la que se envió. El comercial abre un pedido con las ventanas ya especificadas.

Cada empresa trabaja con una clave de licencia vinculada a su dominio. Un administrador de la empresa genera las claves en los ajustes, copia el fragmento listo para pegar y ve la clave una sola vez. El servidor comprueba el dominio que hace la petición antes de entregar el catálogo o aceptar una solicitud, y en producción rechaza las claves sin dominio configurado.

Para que el widget y los estilos de la web anfitriona no se rompan entre sí, todos los estilos del paquete van limitados al contenedor del widget, el modo oscuro solo se activa con un atributo explícito y el color de marca sale de una única variable CSS: el widget adopta el color de la empresa sin tocar nada más de la página. El visor 3D se deja fuera de la versión incrustable a propósito, para que pese poco.

También hay un modo demo sin licencia. Funciona con un catálogo de ejemplo “Tu empresa”, y el botón “Siguiente” genera al instante un presupuesto en PDF con marca y lo abre. No se guarda nada. Los instaladores prueban esta versión en la página de Estimia para instaladores.

La calculadora de subvenciones y deducción del IRPF

El segundo widget responde a la pregunta que muchos propietarios en España se hacen primero: ¿cuánto me devuelven? El visitante fija un presupuesto, indica si la vivienda es la habitual, está alquilada, es una segunda residencia o un negocio, elige la provincia y dice si ya tiene certificado energético. El widget imprime una factura breve: el proyecto, el certificado si hace falta, la subvención directa, la deducción del IRPF sobre lo que queda tras la subvención, lo que se paga por adelantado y el coste final real.

Las reglas siguen cómo se aplican los incentivos a las ventanas. La deducción vale para la vivienda habitual o una vivienda alquilada, no para segundas residencias ni locales; País Vasco y Navarra tienen sus propias deducciones; no hay subvención para locales de negocio ni por debajo de un importe mínimo. La factura se presenta como una estimación orientativa, no como asesoramiento fiscal, y los porcentajes y topes se mantienen en el lado de Estimia, así que todas las webs que la incrustan se actualizan en cuanto cambian.

La empresa que la incrusta decide cómo se ve y adónde lleva:

• Idioma - español, inglés o ruso.
• Tema - claro, oscuro o automático, y se puede cambiar en tiempo real para seguir el selector de tema de la propia web.
• Provincia fija - una empresa que trabaja en una sola región fija la calculadora en ella y el selector pasa a ser de solo lectura.
• Presupuesto - un valor inicial y su propio rango del control deslizante.
• Color de marca - un único valor hexadecimal, y el control, los resaltados y los totales lo siguen.
• Sus propios botones - los enlaces colocados dentro del contenedor se convierten en los botones bajo el resultado: el formulario de presupuesto de la empresa, WhatsApp o lo que quiera.
• Altura automática - el widget es un iframe que comunica su altura, así que crece con el contenido y nunca muestra una barra de desplazamiento interior.

El mapa de valores U y precios orientativos

El tercer widget es un mapa de España en el que se puede pulsar cada provincia. En un modo las provincias se colorean según el valor U máximo de ventana que exige allí el Código Técnico; en el otro, según la zona climática del CTE. Al pulsar una provincia, un panel muestra su zona, el valor U exigido, el tipo de acristalamiento que lo cumple y un coste orientativo instalado para una ventana de unos 100×100 cm en PVC eficiente, una opción habitual y aluminio con rotura de puente térmico.

Esos costes son ilustrativos y el widget lo dice en cada panel: se derivan del requisito de valor U de la zona, no son un presupuesto de mercado. Los botones del panel llevan al visitante a las páginas de la propia empresa.

La sección “para desarrolladores” como fuente de enlaces

Cada widget tiene su página en la sección para desarrolladores de Estimia: un fragmento de inicio rápido, una tabla con todas las opciones, un ejemplo completo en vivo con todas ellas activadas, una explicación de cómo funciona por dentro y las condiciones de uso. Los widgets gratuitos tienen una sola condición: el enlace de crédito visible “Calculator provided by Estimia” se queda en su sitio.

El cargador lo comprueba. Antes de arrancar la calculadora verifica que hay un enlace a Estimia presente, visible y sin nofollow; si falta o está oculto, en lugar de la calculadora aparece un aviso breve con un enlace a la guía. El fragmento recomendado incluye el crédito como un enlace normal en el HTML de la página anfitriona, no como uno insertado por un script, para que los buscadores lo vean como un enlace real. El widget no pone cookies en el dominio anfitrión ni recoge datos personales, así que no añade nada al banner de consentimiento.

Para la empresa que lo incrusta, el widget es una herramienta gratuita y mantenida. Para Estimia, cada inserción es un enlace seguible desde una web del mismo sector. La sección anuncia además la calculadora 3D de precios incrustable como el siguiente widget; figura como “próximamente”.

Funcionando en Ventanas Fraktal

Ventanas Fraktal, una empresa de ventanas con web propia, tiene la calculadora de subvenciones en su página de ayudas. La calculadora viene de Estimia; los botones bajo el resultado son de Fraktal - contacto, WhatsApp y un enlace a su guía sobre las subvenciones para ventanas - y la línea de crédito va debajo como un enlace normal. Bajo la calculadora Fraktal publica su propio artículo, paso a paso, sobre cómo solicitar la ayuda y la deducción. El visitante obtiene la respuesta sin salir de la web de Fraktal.

Stack tecnológico

- Calculadora del distribuidor: componente web en React 19 (light DOM, CSS aislado), compilado con Vite
- API de la plataforma: Laravel (configuración del catálogo, licencias por dominio, solicitudes al CRM)
- PDF: presupuesto demo generado al instante por la plataforma, sin guardar nada
- Widgets públicos: componentes Svelte 5 en el sitio Astro, incrustados como iframes
- Cargador: script asíncrono ligero con comprobación del crédito y altura automática por postMessage
- Datos: provincias, zonas climáticas y límites de valor U del CTE, reglas de subvenciones e IRPF
- Alojamiento: Cloudflare Pages (estimia.es), la aplicación de la plataforma para el paquete del distribuidor
- Idiomas: español, inglés, ruso

Resultado

Una empresa de ventanas puede poner en su web una calculadora que funciona en pocos minutos: su propio configurador con precios, con licencia para su dominio y pedidos completos que llegan a su CRM, o herramientas gratuitas para lo que más preguntan los visitantes - subvenciones, deducciones y lo que exige la normativa en su provincia. Las herramientas se construyen y mantienen una sola vez y funcionan igual en todas las webs, y cada inserción gratuita enlaza a Estimia desde una web del mismo sector.