Aujourd'hui, il y a tellement de sites web et autres plateformes que les citoyens ne savent parfois plus où se rendre pour trouver les informations utiles. Futureproofed est aussi une nouvelle plateforme et fait donc partie des coupables. 🙈
Heureusement, nous avons une solution. Vous pouvez intégrer notre plateforme sur votre propre site web!
L'avantage?
Toutes les informations sont synchronisées. Dès que vous modifiez vos mesures et actions sur FutureproofedCities, les modifications apparaissent sur votre page publique.
Le logo et l'en-tête de votre propre site web seront toujours visibles.
Cool, n'est-ce pas? Mais comment ça marche?
Générer le bon code
Ne paniquez pas, vous n'avez pas à écrire votre propre code. Tout ce que vous avez à faire est de vous rendre sous l'onglet 'Page publique' en haut à droite. Cliquez ensuite sur 'Intégrer au site web de la ville' et choisissez ce que vous voulez intégrer:
→ Les actions
Texte d'introduction de la page d'action
Carte avec actions
Les actions
→ Les mesures
Texte d'introduction de la page des mesures
Tableau de bord (graphique avec vos émissions)
Les mesures
Le code sera alors généré automatiquement. Il vous suffit de le copier dans le code de votre propre site Web (ou de le transmettre à quelqu'un qui peut le faire 😉) et c'est terminé.
Un pas de plus: ajuster les dimensions du cadre
Vous n'aimez pas la façon dont les dimensions standards de notre code s'intègrent dans votre propre site web? Pas de problème, vous pouvez le personnaliser vous-même. Il se peut que les choses deviennent un peu techniques ici, alors vous voudrez peut-être faire appel à un développeur pour vous aider.
Voici le code intégré :
<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>
Cela garantit que le cadre est "réactif", c'est-à-dire qu'il s'adapte automatiquement à la taille de l'écran.
Si vous n'aimez pas le résultat, vous pouvez toujours:
ajuster la largeur (width) et la hauteur (height)
👉 par exemple, essayez de les mettre à 90 % au lieu de 100 %.
changez le padding-top, qui décrit la longueur du cadre. Vous pouvez le rendre aussi long ou aussi court que vous le souhaitez.
👉 essayez d'écrire 200% au lieu de 150%.
Toujours pas satisfait du résultat? Jouez avec les différents paramètres pour rendre l'intégration optimale.
Astuce: Vous pouvez faire autant d'intégrations différentes que vous le souhaitez. Vous pouvez créer un code pour les actions, et un autre pour les mesures, puis les mettre l'un après l'autre sur votre site. Ou vous pouvez afficher la carte ou le tableau de bord seuls. Tout est donc possible! 😊