In dit artikel vind je meer informatie over de Iframe embeds die je op je website kan plaatsen op KampAdmin in je website op te nemen. Dit is dé manier om de dashboards te tonen aan ouders en monitoren.
Veel organisaties gebruiken deze methode ook om het kampaanbod te tonen, maar dat kan ook via onze API verlopen als je veel inschrijvingen hebt.
De basiscode
Er zijn verschillende soorten embeds van KampAdmin:
- Ouder dashboard (bv1, bv2)
- Monitoren dashboard (bv1, bv2)
- Activiteiten-lijst (bv1, bv2)
- Activiteiten-zoeker (bv1, bv2)
- Moni-activiteiten-zoeker (bv1, bv2)
- Rechtstreekse inschrijf-knop
- Nieuwsbrief registratie (bv1, bv2)
Deze hebben altijd dezelfde structuur:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>jQuery.getScript("https://booking.kampadmin.be/embed/ka-embedv4.js?q=" + new Date().getTime());</script>
<div id="kampadmin-booking" style="width: 100%" data-theme-url="/t/organisation_code/dashboard">
<img src="https://booking.kampadmin.be/embed/loading.gif" />
</div> Jouw organisation_code is altijd dezelfde en kan je navragen bij [email protected] .
Het oranje deel is afhankelijk van welke embed je wilt toevoegen (zie hieronder).
Deelnemers & aanbod
Dashboard ouders
Activiteiten-lijst
Dit soort embed is handig voor een lijstje aan activiteiten binnen een bepaald thema. Meestal gaat het over een beperkte lijst aan activiteiten.
Enkele voorbeelden: bv1, bv2
Het oranje deel hier is: activities/grouped? om het hele aanbod te tonen.
Je kan filteren op categorie, thema, periode, locatie en/of tag door hier nog een deeltje (of meerdere) aan vast te plakken.
&category=00000 om te filteren op categorie
&activity_info=00000 om te filteren op thema
&period=00000 om te filteren op periode
&location_id=00000 om te filteren op locatie
Waarbij 00000 de ID is van de categorie/thema/… waarop je wilt filteren. Je kan meerdere opgeven door de ID’s te scheiden met komma’s. Hoe je een ID van een item kan vinden, wordt onderaan op deze pagina uitgelegd.
Optioneel kan je ook nog filteren via tag’s door &tags=nieuw toe te voegen achteraan. Daarbij wordt nu gefilterd op de tag nieuw. Gebruik hiervoor enkel tags zonder spaties. Ook hier kan je meerdere tags opgeven door ze te scheiden met komma’s.
Enkele voorbeelden van een eindresultaat:
– activities/grouped?&category=abc-def-ghi-jkl&location_id=jklm-aiidz-uzihziu
– activities/grouped?&activity_info=abc-def-ghi,jkl-mno-pqr-stu,vwx-yz0
– activities/grouped?&period=aaa-bbb-ccc&tags=’nieuw’,’vernieuwd’
Activiteiten-zoeker
Via een activiteitenzoeker kan men interactief zoeken door het aanbod op je website door te filteren. Dit is handig om een groter aanbod te tonen.
Enkele voorbeelden: bv1, bv2
Het oranje deel hiervoor is: welcome?grouped=true indien je je hele aanbod wilt tonen.
Ook hier kan je filteren om een deel van het aanbod te tonen door achteraan delen toe te voegen.
&search[category]=00000 om te filteren op categorie (via ID)
&search[period]=00000 om te filteren op periode (via ID)
&search[location_id]=00000 om te filteren op locatie (via ID)
&search[birth_year]=2018 om te filteren op geboortejaar (jaartal)
&search[still_place]=true om te filteren op aanbod met vrije plaatsen (true/false)
&search[sleepover]=true om te filteren op overnachting (true/false)
(filteren op thema is hier niet voorzien aangezien de activiteiten worden gebundeld per thema)
Het systeem is hierbij hetzelfde als word uitgelegd bij de activiteiten-lijst embed hierboven.
Optioneel kan je ook nog filteren via tag’s door &search[tags]=nieuw toe te voegen achteraan. Daarbij wordt nu gefilterd op de tag nieuw. Gebruik hiervoor enkel tags zonder spaties. Ook hier kan je meerdere tags opgeven door ze te scheiden met komma’s.
Rechtstreekse inschrijf-knop
Naast embeds, kan je ook zelf pagina’s maken met uitleg over bepaalde concepten. Je kan de achter een knop of link een hyperlink zetten die meteen naar de inschrijfprocedure gaat voor een bepaalde activiteit:
www.kampadmin.be/login/?kampadmin=/t/organisation_code/activities/activity_id/persons
Waarbij:
– dit de link is naar de ouder-pagina (zie bovenaan)
– organisation_code dezelfde als altijd
– activity_id de external-id is van de activiteit.
Monitoren
Moni dashboard
Monitoren krijgen bij KampAdmin een wachtwoord waarmee ze kunnen inloggen (bv). Eens ingelogd wordt deze pagina gevuld met het dashboard.
Het oranje deel hiervoor is: leaders/sessions/sign_in
Moni activiteiten-zoeker
Nieuwsbrieven
Je kan ook een embed toevoegen, bijvoorbeeld in de footer van je website of op de contactpagina, waarmee je mensen kan laten registreren voor je nieuwsbrief. Deze mensen krijgen dan in Podio de rol ‘nieuwsbrief’, eventueel bovenop andere rollen als die al bestonden.
Hiervoor gebruik je een andere embed-code zodat deze zeker geen conflicten geeft met andere embeds indien je de nieuwsbrief bijvoorbeeld in de footer van je website zou opnemen:
<iframe src="https://kampadmin-v2-2-production.herokuapp.com/t/organisation_code/newsletter" id="kampadmin-embed-2" style="width: 100%; height: 100px; border:none;" frameborder=0></iframe>
<script>jQuery('#kampadmin-embed-2').iFrameResize({ checkOrigin: ["https://kampadmin-v2-2-production.herokuapp.com"] });</script>
Externe ID vinden van een item
De ID (externe ID // External ID) van een Podio item kan je terugvinden door er naar toe te gaan in Podio en dan te klikken op ‘acties’ en vervolgens op ‘ontwikkelaarsinfo’:
Troubleshooting
Indien je problemen ondervind met de Embed-integratie op je website, kan je hieronder op zoek gaan naar een antwoord. Meestal volstaat een kleine ingreep in de website om dit te verhelpen:
Indien je een website hebt die veel Javascript (JS) gebruikt, kan het zijn dat de KampAdmin-embed zich niet automatisch in hoogte aanpast. Het kan daarbij helpen om het KampAdmin-script vertraagd in te laden. Vervang daarvoor de huidige inlading door:
setTimeout(() => {
jQuery.getScript("https://booking.kampadmin.be/embed/ka-embedv4.js?q=" + new Date().getTime());
}, 200)De oorzaak is allicht een restrictie die door de website wordt gezet over wat op de pagina wel/niet mag gebeuren kwa gebruik van Javascript.
Kijk met je websitebouwer na of de volgende page-headers uit staan:
- Hoogst waarschijnlijk is deze page-header de boosdoener:
- sync-xhr=()
- Maar het kan ook aan een van deze liggen:
- Content-Security-Policy: connect-src
- X-Content-Security-Policy
- X-Frame-Options
Bekijk met je websitebouwer wat er juist fout loopt en/of contacteer KampAdmin.
