2 opties om toe te voegen
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 :
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.
| Info |
|---|
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. |
Widgets moeten altijd geïntegreerd worden bij de klant. De widgets zijn volledig responsief en passen zich dus aan de schermgrootte van de gebruiker aan.
...
Belangrijk:
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.
| Note |
|---|
Belangrijk: 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 het widget. |
...
Een widget toevoegen aan een webpagina via
...
embedcode
Een widget embed-code embedcode is een script-tag om toe te voegen binnen het body-element van een webpagina. Zo een embed-code
Een embedcode maakt gebruik van synchrone operaties om een placeholder te voorzien in de webpagina. Hierdoor is het niet mogelijk om embed-codes embedcodes asynchroon te gebruiken.
Om een global header te gebruiken met eenvoudig toegangsbeheer, volstaat het de embed-code embedcode toe te voegen aan de webpagina. De widget neemt de authenticatieflow voor zijn rekening.
| Note |
|---|
Belangrijk: Vergeet de @govflanders/vl-widget-polyfill niet toe te voegen aan de webpagina (zie Browser Polyfills voor meer info). |
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Een widget toevoegen aan een webpagina via Javascript (alternatief voor de
...
embedcode)
Zorg ervoor 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. Bij deze wordt de 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 instantie aanmaken en een referentie terug geventeruggeven. Zodra men een de referentie verkrijgtis teruggegeven, kan het koppelen aan een DOM-element plaatsvinden. Onderstaande code voorbeeld toont hoe men een widget instantie kan In het onderstaande codevoorbeeld staat hoe een widgetinstantie te koppelen aan een DOM-element en vervolgens mount-gedrag te triggeren.
| Note |
|---|
Belangrijk:
|
| Iframe | ||||||||
|---|---|---|---|---|---|---|---|---|
|
| Info |
|---|
Door met Javascript te werken, |
...
krijgt u meer mogelijkheden om de styling van de pagina te beheren. |