Interface GlobalFooterClient

interface GlobalFooterClient {
    collapse: () => Promise<boolean>;
    expand: () => Promise<boolean>;
    getConfig: () => Promise<Config>;
    getHost: () => Promise<Host>;
    getLanguageLinks: () => Promise<LanguageLink[]>;
    getNavigationLinks: () => Promise<NavigationLink[]>;
    getSiteInfo: () => Promise<SiteInfo>;
    getSiteSubtitle: () => Promise<SubTitleItem[]>;
    getSiteTitle: () => Promise<string>;
    getUmbrella: () => Promise<Umbrella>;
    isCollapsed: () => Promise<boolean>;
    isCollapsible: () => Promise<boolean>;
    mount: (element?: HTMLElement) => Promise<boolean>;
    setCollapsible: (collapsible: boolean) => Promise<boolean>;
    setHost: (host: Translatable<Host>) => Promise<boolean>;
    setLanguageLinks: (links: Translatable<LanguageLink>[]) => Promise<boolean>;
    setNavigationLinks: (
        links: Translatable<NavigationLink>[],
    ) => Promise<boolean>;
    setSiteInfo: (siteInfo: Translatable<SiteInfo>) => Promise<boolean>;
    setSiteTitle: (title: Translatable<string>) => Promise<boolean>;
    setUmbrella: (umbrella: Translatable<Umbrella>) => Promise<boolean>;
    toggle: () => Promise<boolean>;
    unmount: () => Promise<boolean>;
}

Properties

collapse

collapse: () => Promise<boolean>

Collapses the footer.

Type declaration

- (): Promise<boolean>
- Returns Promise<boolean>
  A promise that resolves when the footer has been collapsed.

Example

const success = await globalFooterClient.collapse();

expand

expand: () => Promise<boolean>

Expands the footer.

Type declaration

- (): Promise<boolean>
- Returns Promise<boolean>
  A promise that resolves when the footer has been expanded.

Example

const success = await globalFooterClient.expand();

getConfig

getConfig: () => Promise<Config>

Gets the configuration object.

Type declaration

- (): Promise<Config>
- Returns Promise<Config>
  A promise that resolves to the configuration object.

Example

const config = await globalFooterClient.getConfig();

getHost

getHost: () => Promise<Host>

Gets the host.

Type declaration

- (): Promise<Host>
- Returns Promise<Host>
  A promise that resolves to the current host as a string.

Example

const host = await globalFooterClient.getHost();

getLanguageLinks

getLanguageLinks: () => Promise<LanguageLink[]>

Gets the language links.

Type declaration

- (): Promise<LanguageLink[]>
- Returns Promise<LanguageLink[]>
  A promise that resolves to an array of language links.

Example

const links = await globalFooterClient.getLanguageLinks();

getNavigationLinks

getNavigationLinks: () => Promise<NavigationLink[]>

Gets the navigation links.

Type declaration

- (): Promise<NavigationLink[]>
- Returns Promise<NavigationLink[]>
  A promise that resolves to an array of navigation links.

Example

const links = await globalFooterClient.getNavigationLinks();

getSiteInfo

getSiteInfo: () => Promise<SiteInfo>

Gets the site information.

Type declaration

- (): Promise<SiteInfo>
- Returns Promise<SiteInfo>
  A promise that resolves to the site information object.

Example

const siteInfo = await globalFooterClient.getSiteInfo();

getSiteSubtitle

getSiteSubtitle: () => Promise<SubTitleItem[]>

Gets the site subtitle.

Type declaration

- (): Promise<SubTitleItem[]>
- Returns Promise<SubTitleItem[]>
  A promise that resolves to the site subtitle as a string.

Example

const subtitle = await globalFooterClient.getSiteSubtitle();

getSiteTitle

getSiteTitle: () => Promise<string>

Gets the site title.

Type declaration

- (): Promise<string>
- Returns Promise<string>
  A promise that resolves to the site title as a string.

Example

const title = await globalFooterClient.getSiteTitle();

getUmbrella

getUmbrella: () => Promise<Umbrella>

Gets the umbrella configuration.

Type declaration

- (): Promise<Umbrella>
- Returns Promise<Umbrella>
  A promise that resolves to the umbrella configuration.

Example

const umbrella = await globalFooterClient.getUmbrella();

isCollapsed

isCollapsed: () => Promise<boolean>

Checks if the footer is collapsed.

Type declaration

- (): Promise<boolean>
- Returns Promise<boolean>
  A promise that resolves to a boolean indicating if the footer is collapsed.

Example

const isCollapsed = await globalFooterClient.isCollapsed();

isCollapsible

isCollapsible: () => Promise<boolean>

Checks if the footer is collapsible.

Type declaration

- (): Promise<boolean>
- Returns Promise<boolean>
  A promise that resolves to a boolean indicating if the footer is collapsible.

Example

const isCollapsible = await globalFooterClient.isCollapsible();

mount

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

The mount method allows you to control where the Global Footer Widget is rendered on the page. There are two main ways to integrate the widget, depending on whether you want to manually control its placement or let it render automatically:

Using the 'entry' script: When you include the widget via the following script:
```
<script src="https://widgets.vlaanderen.be/api/v2/widget/__global_footer_id__/entry"></script>
```
The widget is not automatically rendered on the page. Instead, you must call the mount method from the window.globalFooterClient object to display it. This gives you control over where and when the widget is added. You can either:
- Mount to a specific element: Pass an HTML element to the mount method to render the widget inside that element.
```
const element = document.getElementById('customFooter');
window.globalFooterClient.mount(element);
```
- Mount without specifying an element: If no element is provided, the widget will automatically render at the bottom of the page.
```
window.globalFooterClient.mount();
```
Using the 'embed' script: If you use this script instead:
```
<script src="https://widgets.vlaanderen.be/api/v2/widget/__global_footer_id__/embed"></script>
```
The widget will automatically render at the location where the script is placed in the HTML. No additional action is needed to mount the widget in this case. For accessibility reasons, the footer is marked with role="contentinfo". If you prefer not to include this role (e.g., to avoid multiple contentinfo roles on a page), use the mount method described above with a <div> element.

Type declaration

- (element?: HTMLElement): Promise<boolean>
- Parameters
  - Optionalelement: HTMLElement
    The element to mount
  Returns Promise<boolean>
  A promise that resolves to true if the element was mounted, false otherwise

Example

const success = await globalFooterClient.mount(document.getElementById('customFooter'));

setCollapsible

setCollapsible: (collapsible: boolean) => Promise<boolean>

Sets whether the footer is collapsible.

Type declaration

- (collapsible: boolean): Promise<boolean>
- Parameters
  - collapsible: boolean
    A boolean indicating if the footer should be collapsible.
  Returns Promise<boolean>
  A promise that resolves when the collapsible state has been set.

Example

const success = await globalFooterClient.setCollapsible(true);

setHost

setHost: (host: Translatable<Host>) => Promise<boolean>

Sets the host.

Type declaration

- (host: Translatable<Host>): Promise<boolean>
- Parameters
  - host: Translatable<Host>
    The host to set.
  Returns Promise<boolean>
  A promise that resolves when the host has been set.

Example

const success = await globalFooterClient.setHost({ type: 'text', department: 'Dept', siteOwner: 'Owner' });

setLanguageLinks

setLanguageLinks: (links: Translatable<LanguageLink>[]) => Promise<boolean>

Sets the language links.

Type declaration

- (links: Translatable<LanguageLink>[]): Promise<boolean>
- Parameters
  - links: Translatable<LanguageLink>[]
    An array of language links to set.
  Returns Promise<boolean>
  A promise that resolves when the language links have been set.

Example

const success = await globalFooterClient.setLanguageLinks([{ href: '/en', label: 'English', langcode: 'en' }]);

setNavigationLinks

setNavigationLinks: (links: Translatable<NavigationLink>[]) => Promise<boolean>

Sets the navigation links.

Type declaration

- (links: Translatable<NavigationLink>[]): Promise<boolean>
- Parameters
  - links: Translatable<NavigationLink>[]
    An array of navigation links to set.
  Returns Promise<boolean>
  A promise that resolves when the navigation links have been set.

Example

const success = await globalFooterClient.setNavigationLinks([{ href: '/home', label: 'Home', target: '_blank' }]);

setSiteInfo

setSiteInfo: (siteInfo: Translatable<SiteInfo>) => Promise<boolean>

Sets the site information.

Type declaration

- (siteInfo: Translatable<SiteInfo>): Promise<boolean>
- Parameters
  - siteInfo: Translatable<SiteInfo>
    The site information object to set.
  Returns Promise<boolean>
  A promise that resolves when the site information has been set.

Example

const success = await globalFooterClient.setSiteInfo({ title: 'My Site', subTitleItems: [{ type: 'text', label: 'Subtitle' }] });

setSiteTitle

setSiteTitle: (title: Translatable<string>) => Promise<boolean>

Sets the site title.

Type declaration

- (title: Translatable<string>): Promise<boolean>
- Parameters
  - title: Translatable<string>
    The site title to set.
  Returns Promise<boolean>
  A promise that resolves when the site title has been set.

Example

const success = await globalFooterClient.setSiteTitle('New Title');

setUmbrella

setUmbrella: (umbrella: Translatable<Umbrella>) => Promise<boolean>

Sets the umbrella configuration.

Type declaration

- (umbrella: Translatable<Umbrella>): Promise<boolean>
- Parameters
  - umbrella: Translatable<Umbrella>
    The umbrella configuration to set.
  Returns Promise<boolean>
  A promise that resolves when the umbrella has been set.

Example

const success = await globalFooterClient.setUmbrella({ alt: 'Umbrella', src: 'umbrella.png', srcSet: ['umbrella@2x.png'] });

toggle

toggle: () => Promise<boolean>

Toggles the collapsed state of the footer.

Type declaration

- (): Promise<boolean>
- Returns Promise<boolean>
  A promise that resolves when the collapsed state has been toggled.

Example

const success = await globalFooterClient.toggle();

unmount

unmount: () => Promise<boolean>

Unmount an element

Type declaration

- (): Promise<boolean>
- Returns Promise<boolean>
  A promise that resolves to true if the element was unmounted, false otherwise

Example

const success = await globalFooterClient.unmount();

Interface GlobalFooterClient

Index

Properties

Properties

collapse

Type declaration

Returns Promise<boolean>

Example

expand

Type declaration

Returns Promise<boolean>

Example

getConfig

Type declaration

Returns Promise<Config>

Example

getHost

Type declaration

Returns Promise<Host>

Example

getLanguageLinks

Type declaration

Returns Promise<LanguageLink[]>

Example

getNavigationLinks

Type declaration

Returns Promise<NavigationLink[]>

Example

getSiteInfo

Type declaration

Returns Promise<SiteInfo>

Example

getSiteSubtitle

Type declaration

Returns Promise<SubTitleItem[]>

Example

getSiteTitle

Type declaration

Returns Promise<string>

Example

getUmbrella

Type declaration

Returns Promise<Umbrella>

Example

isCollapsed

Type declaration

Returns Promise<boolean>

Example

isCollapsible

Type declaration

Returns Promise<boolean>

Example

mount

Type declaration

Parameters

Returns Promise<boolean>

Example

setCollapsible

Type declaration

Parameters

Returns Promise<boolean>

Example

setHost

Type declaration

Parameters

Returns Promise<boolean>

Example

setLanguageLinks

Type declaration

Parameters

Returns Promise<boolean>

Example

setNavigationLinks

Type declaration

Parameters

Returns Promise<boolean>

Example

setSiteInfo

Type declaration

Parameters