Widgets toevoegen aan een webpagina

2 opties om toe te voegen

Een widget integreren op uw gastwebsite is mogelijk via:

embedcode
Javascript

U moet de widget altijd zelf integreren. De widgets zijn volledig responsief en passen zich dus aan de schermgrootte van de gebruiker aan.

Bij de “global header en footer” - de header en footer van Digitaal Vlaanderen - is het aangeraden de widget zo dicht mogelijk bij het begin van de body-tag te plaatsen.

Scope

Alle Javascript-afhankelijkheden van een widget worden altijd gedownload en geladen in een geïsoleerde scope. Zo ontstaan er geen versieconflicten tussen de webpagina en de widget.

Belangrijk:

Stylesheets zijn hier een uitzondering op door het gebrek aan native ondersteuning om dit uit te voeren (bijvoorbeeld shadow-dom). Widgets vangen dit op door alle CSS-regels te prefixen met een unieke naam. Dit is echter geen garantie dat bepaalde CSS-regels voor een webpagina geen invloed hebben op het widget.

Een widget toevoegen aan een webpagina via embedcode

Een widget embedcode is een script-tag om toe te voegen binnen het body-element van een webpagina.

Een embedcode maakt gebruik van synchrone operaties om een placeholder te voorzien in de webpagina. Hierdoor is het niet mogelijk om embedcodes asynchroon te gebruiken.

Om een global header te gebruiken met eenvoudig toegangsbeheer, volstaat het de embedcode toe te voegen aan de webpagina. De widget neemt de authenticatieflow voor zijn rekening.

Belangrijk: Vergeet de @govflanders/vl-widget-polyfill niet toe te voegen aan de webpagina (zie Browser Polyfills voor meer info).

Een widget toevoegen aan een webpagina via Javascript (alternatief voor de embedcode)

Zorg er eerst voor dat uw ACM/IDM-aansluiting actief en gevalideerd is. Zie ook: https://overheid.vlaanderen.be/acm/idm-standaard-aansluitingsproces#aansluitingsproces-stap-per-stap

Voeg vervolgens de widget toe. De Javascript-code wordt voorzien waarbij door middel van de bootstrap-functie een widget-URL wordt omgezet naar een widget-instantie. Deze bootstrap-functie zal asynchroon een instantie van een widget aanmaken en een referentie teruggeven. Zodra de referentie is teruggegeven, kan het koppelen aan een DOM-element plaatsvinden. In het onderstaande codevoorbeeld staat hoe een widgetinstantie te koppelen aan een DOM-element en vervolgens mount-gedrag te triggeren.