Alle collecties
Publieke communicatie
Embed je publieke pagina
Embed je publieke pagina

Hoe kan je delen van je publieke pagina in je website embedden of integreren?

Noëmie Van den Bon avatar
Geschreven door Noëmie Van den Bon
Meer dan een week geleden bijgewerkt

Er bestaan tegenwoordig zo veel platformen dat burgers soms niet meer weten waar naartoe te surfen. Ook Futureproofed is een nieuw platform en is hier dus schuldig aan. 😊

We hebben gelukkig wel een oplossing: Integreer ons platform in je eigen website

Het voordeel?

→ Alle informatie wordt gesynchroniseerd, zodat je je maatregelen en acties maar op één plaats moet aanpassen. 

→ Het logo en de header van je eigen website blijven altijd zichtbaar. 

Cool, toch?

Maar hoe werkt dat juist?

Genereer de juiste code

Geen paniek, je hoeft zelf geen code te schrijven. Het enige dat je moet doen, is naar ‘Publieke pagina’ gaan, klikken op ‘Integreren in je eigen website’ en kiezen wat je wil integreren:

  • Intro tekstje actiepagina

  • Kaart met acties

  • Overzicht van acties

  • Intro tekstje maatregelenpagina

  • Dashboard (grafiek met je emissies)

  • Maatregelen

De code wordt vanzelf gegenereerd! Die hoef je gewoon te kopiëren in je eigen website code (of door te sturen naar iemand die dat kan 😉) en klaar is kees!

Een stapje verder: pas de afmetingen van het kader aan

Vind je de standaard afmetingen van onze code niet mooi passen in jullie eigen website? Geen probleem, je kan die zelf aanpassen. Hier wordt het even een beetje technisch, dus haal er eventueel een developer bij om je te helpen.

Zo ziet de embed code er uit:

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

Deze zorgt ervoor dat het frame “Responsive” is, en die zich automatisch zal aanpassen aan de afmetingen van het scherm.

Moest je het toch niet mooi vinden, kan je nog steeds:

  • de width en height gaan aanpassen

👉 probeer ze bijvoorbeeld eens op 90% zetten in plaats van op 100%

  • de padding-top veranderen, deze beschrijft de lengte van het frame. Die kan je ook zo lang of zo kort maken als je wilt

👉 probeer eens 200% te schrijven in plaats van 150%.

Nog steeds niet tevreden met het resultaat? Speel wat met de verschillende parameters om de integratie optimaal te maken.

Tip: Je kan zoveel mogelijk verschillende integraties maken als je wil: je kan een code maken voor de acties, en andere voor de maatregelen, en die na elkaar zetten op de website. Of toon enkel de kaart of enkel je dashboard. Alles is mogelijk! 😊 

Was dit een antwoord op uw vraag?