Documentatie bouwstenen digitale loketten
🔧 De global header integreren in uw website/applicatie
Integratie-opties
Op deze pagina leest u hoe u de global header als widget integreert in uw website of applicatie.
U kunt dit op 2 manieren doen:
via een embed script - automatisch laden, eenvoudig
via een entry script - manueel laden, meer controle
De widget is volledig responsief en past zich automatisch aan de schermgrootte van de gebruiker aan.
Welke optie kiest u?
Embed script (automatisch laden) | Entry script (manueel laden) |
|---|---|
Snelle integratie met minimale configuratie | Opties om bijv.
|
Niet essentieel dat u meteen na het laden met de header communiceert | Controle over wanneer en waar de header wordt geladen |
Geen directe, onmiddellijke toegang nodig tot | Direct gebruik van |
Twijfelt u? Start met het embedscript. Hebt u later meer controle nodig, dan kunt u overstappen naar het entry script.
De global header widget toevoegen via embedcode (automatisch laden)
De embedcode is een <script>‑tag die u toevoegt binnen het <body>‑element van uw webpagina.
De embedcode gebruikt synchrone operaties om een placeholder in de pagina te creëren en toont de header automatisch op de plaats van het script.
Gebruik de embedcode als u:
een snelle en automatische integratie wilt met minimale configuratie
het niet cruciaal vindt hoe snel de global header wordt ingeladen
geen directe toegang nodig hebt tot
window.globalHeaderClientop het moment dat de pagina start
ℹ️ De header moet volledig geladen zijn vooraleer u ermee kunt communiceren.
U kunt een event gebruiken om te weten wanneer de header klaar is.
Meer info en voorbeeldcode
Voorbeeldscript
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Global header embed script example</title>
</head>
<body>
<!-- Gebruik hier uw eigen widget-id -->
<!-- Voor de testomgeving gebruikt u https://widgets.tni-vlaanderen.be -->
<script src="https://widgets.vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/embed"></script>
<div class="your-website-code">👋 Hello world</div>
</body>
</html>De embedcode is een script-tag die u toevoegt binnen het body-element van een webpagina. Een embedcode maakt gebruik van synchrone operaties om een placeholder te creëren in de webpagina. ❗Het |
|---|
De global header widget toevoegen via entry script (manueel laden)
Gebruik het entry script als u meer controle nodig hebt over wanneer, waar en hoe de header wordt gemount.
In dit scenario:
laadt u eerst het entry script in de
<head>van uw paginadaarna mount u de global header handmatig op het gewenste moment in de
<body>
Plaats het entry script in de<head>‑sectie van de HTML, bij voorkeur bovenaan.
Dit is essentieel omdat hetwindow.globalHeaderClient‑object alleen beschikbaar is nadat dit script is geladen.
💡 Plaats de widget‑script‑tag zo hoog mogelijk in de
<head>‑tag.
Zo kan uw applicatie met de widget communiceren voordat de rest van de pagina volledig is ingeladen.
Met het entry script wordt de header niet automatisch gerenderd.
U moet hiervoor demount‑methode expliciet aanroepen.
Voorbeeldscript
<!DOCTYPE html>
<html lang="nl">
<head>
<!-- Gebruik hier uw eigen widget-id -->
<!-- Voor de testomgeving gebruikt u https://widgets.tni-vlaanderen.be -->
<script src="https://widgets.vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/entry"></script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Global header entry script example</title>
</head>
<body>
<div class="your-website-code">👋 Hello world</div>
<script>
// Mount de header manueel nadat het script is geladen
window.globalHeaderClient.mount();
</script>
</body>
</html>Hulp nodig bij de integratie?
Kom gerust langs op ons technisch spreekuur.