Introductie embeds

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. Om een volledig overzicht te krijgen van alles wat een rol speelt in de koppeling van KampAdmin met je website, lees je best eerst dit artikel. 

Basiscode

Er zijn verschillende soorten embeds van KampAdmin voor aanbod, boekers, monitoren, nieuwsbrief-registratie... en deze hebben altijd dezelfde structuur:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>jQuery.getScript("https://inschrijven.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?embedded=true">
<img src="https://inschrijven.kampadmin.be/embed/loading.gif" />
</div>

Jouw organisation_code is altijd dezelfde en kan je navragen bij KampAdmin.
Het oranje deel is afhankelijk van welke embed je wilt toevoegen (zie hieronder).

De embeds

Hieronder vind je een voorbeeld van de verschillende soorten embeds die momenteel mogelijk zijn in KampAdmin met steeds enkele voorbeelden uit de praktijk. Klik op 'meer info' om meer details te krijgen over de mogelijkheden en het 'oranje deel' dat je hiervoor nodig hebt.. 

• Deelnemers & aanbod
  • Dashboard voor boekers: vb1 , vb2
  • Activiteiten-lijst: vb1 , vb2
  • Activiteiten-zoeker: vb1 , vb2
  • Rechtstreekse inschrijf-knop: vb.1
  • Meer info
• Monitoren
  • Registreren: vb1, vb2
  • Aanmelden: vb1, vb2
  • Moni-plaatsen zoeker; vb1, vb2
  • Meer info
• Nieuwsbrief
  • bv1, bv2
  • Meer info

Externe ID vinden van een item

De 'externe ID' van een item kan je steeds vinden in de URL ervan. Die staat net na de naam van de tabel (in het Engels). 

Bijvoorbeeld als dit de URL van een bepaalde categorie is:
admin.kampadmin.be/t/staging/admin/resources/activity_categories/f99c0bb0-3e3c-437d-81e3-e9074bd0ac5e?offset=4&count=8&qhash=xxx

Dan is dit de ID: f99c0bb0-3e3c-437d-81e3-e9074bd0ac5e 

Website-systemen

De KampAdmin-embeds werken in principe op elke website waar je zelf een iFrame en JavaScript code kan toevoegen en de URL uitleesbaar is door de JavaScript code. Twijfel je hierover, contacteer dan best je websitebouwer en KampAdmin om na te kijken of KampAdmin goed kan werken in je (nieuwe) website.

De KampAdmin-embeds werken al zeker wél op deze systemen:
Eigen gemaakte website (html/css, ook php), Wordpress, Webflow, Drupal, Sitemanager, Webhero, one.com websitebouwer, Squarespace...

Op "Wix" moet je een extra stap doen om alles werkende te krijgen, zie onderaan deze pagina. 

De KampAdmin-embeds werken slechts deels op deze systemen:
Google Sites

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:

De hoogte van de Iframe embeds past zich niet vanzelf aan :

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:

<script>
setTimeout(() => {
  jQuery.getScript("https://inschrijven.kampadmin.be/embed/ka-embedv4.js?q=" + new Date().getTime());
}, 200)
</script>

Tijdens het inschrijfproces kan je niet meer verder na de stap 'opties' :

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

Extra stap voor websitebouwer WIX

Indien je website gebouwd is met WIX, moet je een extra scriptje toevoegen aan je website om alles van KampAdmin te doen werken. Eens dat gebeurd is, werkt alles zoals omschreven in de andere helpdartikels.

Je voegt dit toe in Wix bij "Settings/instellingen" onder "Custom Code/Aangepaste code" bij de koptekst en geeft dit als naam "KampAdmin URL parameter bridge":

De code die je daar plakt is:

<script>
(function() {
  var params = new URLSearchParams(window.location.search);
  var kampadminPath = params.get('kampadmin');
  var kampadminToken = params.get('t');


  // URL parameter bridge (voor ?kampadmin= en ?t= params)
  if (kampadminPath || kampadminToken) {
    window.addEventListener('message', function(event) {
      if (event.data === 'kampadmin_request_parent_params') {
        var payload = {};
        if (kampadminPath) payload.kampadmin = kampadminPath;
        if (kampadminToken) payload.t = kampadminToken;
        event.source.postMessage({ type: 'kampadmin_parent_params', params: payload }, '*');
      }
    });
  }


  // Height resize bridge — past de HTML embed iframe aan wanneer de KampAdmin content van hoogte wijzigt
  window.addEventListener('message', function(event) {
    if (!event.data || event.data.type !== 'kampadmin_resize') return;
    var iframes = document.querySelectorAll('iframe');
    iframes.forEach(function(iframe) {
      try {
        if (iframe.contentWindow === event.source) {
          iframe.style.height = event.data.height + 'px';
        }
      } catch(e) {}
    });
  });
})();
</script>

En je kiest vervolgens voor:

• Naam: KampAdmin URL parameter bridge 
• Code toevoegen aan: Alle pagina's: Code laden op elke nieuwe pagina
• Code plaatsen in: Head

Bekijk met je websitebouwer wat er juist fout loopt en/of contacteer KampAdmin.