Interface GlobalHeaderClient

The window.globalHeaderClient object offers several methods for interacting with the widget. Each method is typed and returns promises, making asynchronous operations easier to handle.

interface GlobalHeaderClient {
    accessMenu: AccessMenuMethods;
    branding: BrandingMethods;
    contact: ContactMethods;
    getConfig: () => Promise<Config>;
    languageSwitcher: LanguageSwitcherMethods;
    mount: (element?: HTMLElement) => Promise<boolean>;
    setNavigationEnabled: (enabled: boolean) => Promise<boolean>;
    unmount: () => Promise<boolean>;
}

Properties

accessMenu branding contact getConfig languageSwitcher mount setNavigationEnabled unmount

Properties

accessMenu

accessMenu: AccessMenuMethods

Methods related to the Aanmelden menu.

branding

branding: BrandingMethods

Methods related to the branding of the widget. This includes:

  • Colors
  • Branding level
  • Umbrella
  • Host

contact

contact: ContactMethods

Methods related to the hulp nodig? menu.

getConfig

getConfig: () => Promise<Config>

Get the current configuration. This is the configuration for the widget ID given in the embed or entry script.

Type declaration

    • (): Promise<Config>

    • Returns Promise<Config>

      A promise that resolves to the current configuration. If an error occurs during retrieval, the promise will be rejected with an error message.

Example

const config = await globalHeaderClient.getConfig();

languageSwitcher

languageSwitcher: LanguageSwitcherMethods

Methods related to the language switcher.

The language switcher is a separate extension in the configuration (similar to the contact and access_menu extensions) and has its own configuration. For it to work and be visible, ensure all of the following:

  • Extension is enabled in the config, e.g.:
    {
      enabled: true,
      pluginTypeId: 'language_switcher',
    }
  • More than one language is enabled in the widget config (e.g. nl, fr).
  • The language switcher is configured via the client API for the languages that are enabled in the config (e.g. nl, fr).

If any of the above conditions are not met, nothing will be shown.

mount

mount: (element?: HTMLElement) => Promise<boolean>

Mount the Global Header Widget.

Type declaration

    • (element?: HTMLElement): Promise<boolean>

    • Parameters

      • Optionalelement: HTMLElement

        The element to mount the widget to. If omitted, mounts at the top of the page.

      Returns Promise<boolean>

      A boolean indicating if the widget was mounted successfully.

Example

const success = await globalHeaderClient.mount(document.getElementById('header'));

setNavigationEnabled

setNavigationEnabled: (enabled: boolean) => Promise<boolean>

Enable or disable navigation within the global header. When navigation is disabled, all interactive elements like the access menu, contact menu, and header links will not work or be hidden.

This is useful for scenarios like consent screens, where you don't want users to navigate away from the page by clicking on the header.

Type declaration

    • (enabled: boolean): Promise<boolean>

    • Parameters

      • enabled: boolean

        A boolean value indicating whether navigation should be enabled (true) or disabled (false).

      Returns Promise<boolean>

      A promise that resolves to a boolean, confirming if the navigation state was successfully updated.

Example

const success = await globalHeaderClient.setNavigationEnabled(false);

unmount

unmount: () => Promise<boolean>

Unmount the Global Header Widget.

Type declaration

    • (): Promise<boolean>

    • Returns Promise<boolean>

      A boolean indicating if the widget was unmounted successfully.

Example

const success = await globalHeaderClient.unmount();

Settings

Member Visibility

On This Page

Properties