Hoe kan ik de agenda tonen op mijn eigen website?

In dit artikel leggen we uit hoe je eenvoudig de agenda op je eigen website kunt tonen door gebruik te maken van een iFrame. Volg de onderstaande stappen om de agenda te integreren en leer hoe je de afmetingen kunt aanpassen aan jouw website.

Ga naar de beheeromgeving van je website. Dit kan een systeem zijn zoals WordPress, Joomla, Wix, of een ander platform waarmee je jouw website beheert.

Open de pagina of het gedeelte waar je de agenda wilt plaatsen. Dit kan bijvoorbeeld een blogbericht, een pagina of een zijbalk zijn.

De meeste websitebeheersystemen bieden een optie om over te schakelen naar de HTML-weergave. Zoek naar een knop met "Code", "HTML" of "Broncode".

Kopieer de volgende code en plak deze op de plaats waar je de agenda wilt tonen:

<iframe src="https://app.ordolio.com/vereniging/[VERENIGING-SLUG]/calendar/iframe/" title="Calendar" style="width: 100%; height: 100%; border: none;"></iframe>

Opgelet! Verander [VERENIGING-SLUG] in de URL naar de effectieve slug van je vereniging. De slug van je vereniging is de naam van je subdomein van Ordolio.

Voorbeeld
Je vereniging URL/subdomein is https://kfcdekampioenen.ordolio.com/
Jouw slug is kfcdekampioenen
De URL in de iFrame wordt dan https://app.ordolio.com/vereniging/kfcdekampioenen/calendar/iframe/

Sla je wijzigingen op in de websitebeheerder en bekijk de pagina in je browser om te zien hoe de agenda wordt weergegeven.

De agenda zal automatisch de volledige breedte en hoogte innemen van het gedeelte waarin je hem plaatst, maar je kunt zelf de afmetingen aanpassen als dat nodig is.

Breedte aanpassen

Je kunt de waarde van width veranderen in de iFrame-code:

• Voorbeeld: width: 80%; zorgt ervoor dat de agenda 80% van de breedte van het omringende element inneemt.

• Als je een vaste breedte wilt gebruiken, kun je bijvoorbeeld width: 600px; gebruiken om de agenda 600 pixels breed te maken.

Hoogte aanpassen

Je kunt de waarde van height op dezelfde manier aanpassen:

• Voorbeeld: height: 500px; zorgt ervoor dat de agenda 500 pixels hoog is.

Voorbeeld van aangepaste afmetingen

Als je bijvoorbeeld een vaste breedte van 800 pixels en een vaste hoogte van 600 pixels wilt, kun je de iFrame-code als volgt aanpassen:

<iframe src="https://app.ordolio.com/vereniging/[VERENIGING-SLUG]/calendar/iframe/" title="Calendar" style="width: 800px; height: 600px; border: none;"></iframe>

Met deze stappen kun je de agenda eenvoudig aanpassen aan de layout van je website!