💬 Contactopties in "Hulp nodig?"

1 Over de contactopties
2 Basisconcepten
- 2.1 Contextuele opties versus defaults
- 2.2 Eén type context versus meerdere types context
3 Configuratie van de contactopties
4 Voorbeelden configuraties met displayMode "grouped"
5 Dynamische contactopties via de JavaScript-API

Op deze pagina leest u hoe u de contactopties in het menu “Hulp nodig?” van de global header configureert en dynamisch kunt aanpassen via de Javascript-API.

Deze documentatie richt zich tot ontwikkelaars die de global header integreren in hun toepassing.

Over de contactopties

De contactopties verschijnen in het menu “Hulp nodig?” van de global header.

Voorbeeld contactopties vlaanderen.be

👉 Lees meer in de technische documentatie over de contactopties (EN)

De contactopties worden geconfigureerd bij de opzet van de global header. Als de contactopties niet of fout zijn geconfigureerd, dan worden standaard de contactopties van Vlaanderen getoond in het menu “Hulp nodig?”.

Een contactoptie krijgt een unieke identificatie in de contactGroupId. Deze identificatie wordt opgehaald uit:

het Organisatieregister indien het gaat om een OVO-code
de contactservice voor alle andere vormen van contactGroupId

Basisconcepten

Via de JavaScript-API kunt u de contactopties dynamisch instellen op basis van bijvoorbeeld ingelogde gebruiker, context in de applicatie of externe bron.

De contactopties die getoond worden in contact plugin komen uit de global header-configuratie. U kunt via de Javascript-API van de global header de contactopties dynamisch aanpassen.

Contextuele opties versus defaults

contextual: contactopties die afhangen van de actuele context, bijv. een stad of organisatie
defaults: fallback-contactopties die getoond worden als er geen of onvoldoende contextuele opties zijn, bijv. Vlaanderen.

Eén type context versus meerdere types context

Eén type contextuele informatie: er is één set contextuele contactopties beschikbaar (bijvoorbeeld voor één stad).
Meerdere types contextuele informatie: er zijn meerdere contextuele contactopties beschikbaar (bijvoorbeeld voor verschillende steden of organisaties tegelijk).

Configuratie van de contactopties

Reset van dynamische naar statische contactopties

Met de onderstaande code reset u de contactopties van een dynamische toestand terug naar de statische contactopties zoals geconfigureerd in de global header-configuratie::

vl.widget.client.capture(
  // Verplichte capturefunctie.
  function (widget) {
    if (widget.getPluginTypeId() === 'global_header') {
      widget.getExtension('contact', 'unsafe').resetServicePoints();
    }
  }
);

Statische configuratie (standaard)

Als de configuratie leeg is, worden de standaard contactopties van https://www.vlaanderen.be getoond.

{
  "contextual": [],
  "defaults": []
}

Standaard contactopties vlaanderen.be

Geen contextuele informatie, één of meerdere defaults

Als er maar 1 default contactoptie is, dan is de sectie “Vraag over een ander onderwerp?” niet zichtbaar.

{
  "contextual": [],
  "defaults": [
    {
      "type": "contactOption",
      "contactGroupId": "kortrijk",
      "label": "Algemene contactopties van Kortrijk"
    },
    {
      "type": "contactOption",
      "contactGroupId": "aalst",
      "label": "Algemene contactopties van Aalst"
    },
    {
      "type": "contactOption",
      "contactGroupId": "vlaanderen",
      "label": "Algemene contactopties van Vlaanderen"
    }
  ]
}

Geen contextuele informatie

Eén type contextuele informatie beschikbaar, met of zonder defaults

Met één type contextuele informatie is er één set contextuele contactopties beschikbaar, bijvoorbeeld voor één stad.

{
  "contextual": [
    {
      "type": "contactOption",
      "contactGroupId": "dendermonde",
      "label": "Algemene contactopties van Dendermonde"
    }
  ],
  "defaults": [
    {
      "type": "contactOption",
      "contactGroupId": "kortrijk",
      "label": "Algemene contactopties van Kortrijk"
    },
    {
      "type": "contactOption",
      "contactGroupId": "aalst",
      "label": "Algemene contactopties van Aalst"
    },
    {
      "type": "contactOption",
      "contactGroupId": "vlaanderen",
      "label": "Algemene contactopties van Vlaanderen"
    }
  ]
}

één type contextuele informatie

Meerdere types contextuele informatie, met verschillende labels (defaults)

In dit voorbeeld worden voor de defaults verschillende labels gebruikt.

{
  "contextual": [
    {
      "type": "contactOption",
      "contactGroupId": "dendermonde",
      "label": "Algemene contactopties van Dendermonde"
    },
    {
      "type": "contactOption",
      "contactGroupId": "gent",
      "label": "Algemene contactopties van Gent"
    }
  ],
  "defaults": [
    {
      "type": "contactOption",
      "contactGroupId": "kortrijk",
      "label": "Algemene contactopties van Kortrijk"
    },
    {
      "type": "contactOption",
      "contactGroupId": "aalst",
      "label": "Algemene contactopties van Aalst"
    },
    {
      "type": "contactOption",
      "contactGroupId": "vlaanderen",
      "label": "Algemene contactopties van Vlaanderen"
    }
  ]
}

Defaults met verschillende labels

Meerdere types contextuele informatie met hetzelfde label

In sommige scenario’s kunt u voor verschillende defaults hetzelfde label gebruiken, bijvoorbeeld wanneer de contactopties van verschillende organisaties allemaal “Algemene contactopties van …” als knoptekst krijgen. In dat geval zijn de onderliggende contactGroupId-waarden verschillend, maar is het zichtbare label identiek.

Defaults met dezelfde labels

Voorbeelden configuraties met `displayMode "grouped"`

Met displayMode: "grouped" kunt u de contactopties groeperen onder één overkoepelend label (groupLabel). Dit is nuttig wanneer u meerdere gerelateerde contactopties gebundeld wilt tonen, bijvoorbeeld voor woonmaatschappijen.

Meerdere types contextuele informatie, met defaults (grouped)

In het onderstaande voorbeeld worden vijf contactopties en één link gebruikt.

{
  "displayMode": "grouped",
  "groupLabel": "Neem contact op met een woonmaatschappij",
  "contextual": [
    {
      "type": "contactOption",
      "contactGroupId": "OVO002919"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO002940"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO039151"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO025805"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO002499"
    },
    {
      "type": "link",
      "href": "https://www.vlaanderen.be/wonen-in-vlaanderen/zoek-een-organisatie/",
      "label": "Zoek een woonmaatschappij in uw buurt"
    }
  ],
  "defaults": [
    {
      "type": "contactOption",
      "contactGroupId": "vlaanderen",
      "label": "Algemene contactopties van de Vlaamse overheid"
    }
  ]
}

Meerdere types contextuele informatie

Eén type contextuele informatie, met defaults (grouped)

In het onderstaande voorbeeld wordt één contextuele optie gecombineerd met defaults

{
  "displayMode": "grouped",
  "groupLabel": "Neem contact op met een woonmaatschappij",
  "contextual": [
    {
      "type": "contactOption",
      "contactGroupId": "OVO002919"
    }
  ],
  "defaults": [
    {
      "type": "contactOption",
      "contactGroupId": "vlaanderen",
      "label": "Algemene contactopties van de Vlaamse overheid"
    }
  ]
}

1 type contextuele informatie (contactoptie)

Meerdere contextuele opties, geen defaults (grouped)

In het onderstaande voorbeeld worden meerdere contextuele opties zonder defaults gebruikt.

{
  "displayMode": "grouped",
  "groupLabel": "Neem contact op met een woonmaatschappij",
  "contextual": [
    {
      "type": "contactOption",
      "contactGroupId": "OVO002919"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO002940"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO039151"
    }
  ],
  "defaults": []
}

Dynamische contactopties via de JavaScript-API

In onderstaand codevoorbeeld ziet u hoe u via de JavaScript‑API van de global header in runtime de contactopties instelt.

De functie setServicePoints krijgt dezelfde structuur mee als de configuratievoorbeelden hierboven, maar dan dynamisch vanuit uw toepassing. Zo kunt u, afhankelijk van de context of ingelogde gebruiker, andere contactopties tonen dan de statische configuratie in de global header.

vl.widget.client.capture(widget => {
    console.log(widget.getPluginTypeId());
  if (widget.getPluginTypeId() === 'global_header') {
    widget.getExtension('contact').then(contact => {
      console.log(contact);
      contact.setServicePoints({
  "displayMode": "grouped",
  "groupLabel": "Neem contact op met een woonmaatschappij",
  "contextual": [
    {
      "type": "contactOption",
      "contactGroupId": "OVO002919"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO002884"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO002940"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO039151"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO025805"
    },
    {
      "type": "contactOption",
      "contactGroupId": "OVO002499"
    },
    {
      "type": "link",
      "href": "https://www.vlaanderen.be/wonen-in-vlaanderen/zoek-een-organisatie/",
      "label": "Zoek een woonmaatschappij in uw buurt"
    }
  ],
  "defaults": [{
    "type": "contactOption",
    "contactGroupId": "vlaanderen",
    "label": "Algemene contactopties van de Vlaamse overheid"
  },
  {
    "type": "link",
    "href": "https://www.google.be"
  }]
});
    });
  }
});

Documentatie bouwstenen digitale loketten