Embed your public page

How can you embed or integrate parts of your public page in your website?

Noëmie Van den Bon avatar
Written by Noëmie Van den Bon
Updated over a week ago

There are currently (so) many platforms that citizens sometimes no longer know to which they need to go. Futureproofed is also a new platform and therefore adds to this confusion 😊

Luckily, we do have a solution: Integrate our platform in your own website! 

The benefit?

 → All the information is synchronised, so that you only need to adjust your measures and actions in one place. 

 → The logo and the header of your own website will always remain visible. 

Isn’t that cool? But how exactly does that work?

Generate the correct code

Don’t panic, you don’t need to write the code yourself. The only thing you need to do is go to “Public page”, click “Integrate in your own website” and choose what you want to integrate:

  • Small intro text of page of actions

  • Map containing actions

  • Overview of actions

  • Small intro text of page of measures

  • Dashboard (graph containing your emissions)

  • Measures

The code is generated automatically! You just need to copy it into your own website code (or forward it to someone who can do this 😉) and that’s it!

One step further: adjust the dimensions of the frame

You don't like how the standard dimensions of our code fit in your own website? No problem, you can customise it yourself. It may be getting a little technical here, so you may want to reach out to a developer to help you out.

This is what the embed code looks like:

<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>

This ensures that the frame is "Responsive", so it will automatically adjust to the size of the screen.

If you don't like the way it looks, you can still:

  • adjust the width and height

👉 for example, try putting them at 90% instead of 100%.

  • change the padding-top, which describes the length of the frame. You can also make it as long or as short as you want.

👉 try writing 200% instead of 150%.

Still not satisfied with the result? Play around with the different parameters to make the integration optimal.

Tip: You can make as many different integrations as you want: you can create one code for the actions, another for the measures and put those next to one another on the website. Or you can show only the map or only your dashboard. So, everything is possible! 😊

Did this answer your question?