Integre su página pública

¿Cómo puede insertar o integrar alguna parte de su página pública en su sitio web?

Noëmie Van den Bon avatar
Escrito por Noëmie Van den Bon
Actualizado hace más de una semana

Actualmente, existen tantas plataformas que, a veces, los ciudadanos no saben dónde mirar. Futureproofed también es una nueva plataforma y, por tanto, ¡tiene parte de culpa! 🙈

Pero, por suerte, también ofrecemos una solución: ¡Integre nuestra plataforma en su sitio web!

¿Cuál es la ventaja?

  • Toda la información se sincroniza, de manera que solo tendrá que hacer las modificaciones de medidas y acciones en un lugar, FutureproofedCities.

  • El logotipo y el encabezado de su web siempre están a la vista.

¿Qué le parece? ¿Pero cómo funciona?

Genere el código adecuado

¡No tema! Ni siquiera tendrá que escribir código. Lo único que tiene que hacer es ir a «Página pública», hacer clic en «Integrar en su sitio web» y seleccionar lo que quiera integrar:

→ Las acciones

  • Texto de introducción de página de acción

  • Mapa de acciones

  • Acciones

→ Las medidas

  • Texto de introducción de página de medidas

  • Panel de control (gráfico con emisiones)

  • Medidas

¡El código se generará automáticamente! Simplemente tendrá que copiarlo dentro del código de su sitio web (o enviárselo a alguien que sepa hacerlo 😉), ¡y listos!

Un paso más: ajustar las dimensiones del cuadro

¿No te gusta cómo las dimensiones estándar de nuestro código encajan en tu propia página web? No hay problema, puedes personalizarlo tú mismo. Las cosas pueden ponerse un poco técnicas aquí, así que puede que quieras contratar a un desarrollador para que te ayude.

Aquí está el código de incrustación:

<div class="FPC-container">
<iframe class="FPC-responsive-iframe" src="https://jouwstad.futureproofed.com?embed=1&embed.intro=1&embed.map=1&embed.chart=1&lang=en"></iframe>
</div><style>
.FPC-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 150%;
} .FPC-responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>

Esto asegura que el marco es "reactivo", es decir, se ajusta automáticamente al tamaño de la pantalla.

Si no le gusta el resultado, aún puede:

  • ajustar el ancho (width) y la altura (height)

👉 por ejemplo, intenta ponerlas al 90% en lugar del 100%.

  • cambiar el acolchado, que describe la longitud del marco. Puede hacerlo tan largo o tan corto como quiera.

👉 intenta escribir 200% en vez de 150%.

¿Todavía no está satisfecho con el resultado? Juega con los diferentes parámetros para que la integración sea óptima.

Consejo: Puede crear códigos para integrar tantas veces como quiera: por ejemplo, puede crear un código para las acciones y otro para las medidas, y ponerlos uno junto al otro en su web. O mostrar solo el mapa o solo el panel de control. ¡Todo es posible! 😊

¿Ha quedado contestada tu pregunta?