Documentatie voor klanten en partners van Digitaal Vlaanderen - bouwstenen Mijn Burgerprofiel, Verenigingsloket en e-loketondernemers">Documentatie voor klanten en partners van Digitaal Vlaanderen - bouwstenen Mijn Burgerprofiel, Verenigingsloket en e-loketondernemers


Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

Een widget integreren op uw gastwebsite is mogelijk via embed-code of Javascript. Afhankelijk van het type widget bestaan er richtlijnen voor een optimale weergave. Bij de “Global Header” - de header van Digitaal Vlaanderen - is het aangeraden de widget zo dicht mogelijk bij het begin van de body-tag te plaatsen.

Widgets moeten altijd geïntegreerd worden bij de klant. De widgets zijn volledig responsive en passen zich dus aan de schermgrootte van de gebruiker aan.

Belangrijk:

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. Stylesheets zijn hier echter 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 de widget.

Voorbeeld van een Global Header op Vlaanderen.be

Een widget toevoegen aan een webpagina via embed-code

Een widget embed-code is een script-tag om toe te voegen binnen het body-element van een webpagina. Zo een embed-code maakt gebruik van synchrone operaties om een placeholder te voorzien in de webpagina. Hierdoor is het niet mogelijk om embed-codes asynchroon te gebruiken. Om een global header te gebruiken met eenvoudig toegangsbeheer, volstaat het de embed-code toe te voegen aan de webpagina. De widget neemt de authenticatieflow voor zijn rekening.

Belangrijk:

Een widget toevoegen aan een webpagina via Javascript (alternatief voor de embed-code)

Zorg ervoor dat uw ACM/IDM-aansluiting actief en gevalideerd is. Voeg vervolgens de widget toe. Bij deze wordt de Javascript-code voorzien waarbij door middel van de bootstrap-functie een widget-URL wordt omgezet naar een widget-instantie. Deze bootstrap-functie zal asynchroon een widget instantie aanmaken en een referentie terug geven. Zodra men een referentie verkrijgt, kan het koppelen aan een DOM-element plaatsvinden. Onderstaande code voorbeeld toont hoe men een widget instantie kan koppelen aan een DOM-element en vervolgens mount-gedrag triggeren.

Belangrijk:

Door met Javascript te werken, zijn er meer mogelijkheden om de styling van de pagina te beheren.

  • No labels