@govflanders/vl-widget-global-header-types 2.0.5 → 2.0.7

package/README.md

@@ -277,6 +277,62 @@ client.accessMenu.setMainLinks([
 ]);
 ```
 
+## Content Security Policy (CSP)
+
+To ensure the secure integration of the **Global Header Widget**, you need to configure your Content Security Policy (CSP) with the following directives:
+
+### Production Environment CSP Configuration
+
+The minimum required CSP directives for using the global-header in a production environment are:
+
+| Directive    | Value                                      |
+|--------------|--------------------------------------------|
+| `connect-src`| `https://widgets.vlaanderen.be`            |
+| `connect-src`| `wss://chat.contactcenter.vlaanderen.be`   |
+| `connect-src`| `https://chat.contactcenter.vlaanderen.be` |
+| `connect-src`| `https://contactapi.vlaanderen.be`         |
+| `font-src`   | `https://ui.vlaanderen.be`                 |
+| `font-src`   | `https://assets.vlaanderen.be`             |
+| `font-src`   | `https://widgets.vlaanderen.be`            |
+| `img-src`    | `data:`                                    |
+| `img-src`    | `https://assets.vlaanderen.be`             |
+| `img-src`    | `https://widgets.vlaanderen.be`            |
+| `script-src` | `https://widgets.vlaanderen.be`            |
+
+### TNI Environment CSP Configuration
+
+The minimum required CSP directives for using the global-header in a TNI environment are:
+
+| Directive    | Value                                       |
+|--------------|---------------------------------------------|
+| `connect-src`| `https://tni.widgets.dev-vlaanderen.be`     |
+| `connect-src`| `wss://tni.contactapi.uat-vlaanderen.be`    |
+| `connect-src`| `https://chat.contactcenter.dev-vlaanderen.be` |
+| `connect-src`| `https://tni.contactapi.uat-vlaanderen.be`  |
+| `font-src`   | `https://ui.vlaanderen.be`                  |
+| `font-src`   | `https://assets.vlaanderen.be`              |
+| `font-src`   | `https://tni.widgets.vlaanderen.be`         |
+| `img-src`    | `data:`                                     |
+| `img-src`    | `https://assets.vlaanderen.be`              |
+| `img-src`    | `https://tni.widgets.vlaanderen.be`         |
+| `script-src` | `https://tni.widgets.vlaanderen.be`         |
+
+### Additional CSP for Screensharing
+
+If you're using the screensharing extension in the contact menu, include the following additional directives:
+
+| Directive    | Value (Production & TNI)                 |
+|--------------|------------------------------------------|
+| `connect-src`| `cobrowse.io`                            |
+| `connect-src`| `*.cobrowse.io`                          |
+| `connect-src`| `wss://*.cobrowse.io`                    |
+
+### Further Information
+
+For more detailed information about the cobrowse CSP settings, please refer to the [Cobrowse SDK Installation Guide](https://docs.cobrowse.io/sdk-installation/web#content-security-policies-csps).
+
+Ensure that your CSP settings are correctly configured to avoid any issues with the widget's functionality and security. If you have any questions or need further assistance, please refer to the [Contact Information](#contact-information) section.
+
 ## Contact Information
 
 If you need assistance or have any questions regarding the **Global Header Widget**, feel free to reach out to us:

package/dist/client/access-menu.d.ts

@@ -5,46 +5,62 @@ export interface AccessMenuMethods {
      * Set the main links
      * @param mainLinks The main links to set
      * @returns The result of the operation
+     * @example
+     * const success = await globalHeaderClient.accessMenu.setMainLinks([{ label: 'Home', href: '/', isExternal: false }]);
      */
     setMainLinks: (mainLinks: Translatable<MainLink>[]) => Promise<boolean>;
     /**
      * Add an application menu link
      * @param link The application menu link to add
      * @returns The updated list of application menu links
+     * @example
+     * const updatedLinks = await globalHeaderClient.accessMenu.addApplicationMenuLink({ label: 'Dashboard', href: '/dashboard' });
      */
     addApplicationMenuLink: (link: Translatable<ApplicationMenuLink>) => Promise<Translatable<ApplicationMenuLink>[]>;
     /**
      * Add multiple application menu links
      * @param links The application menu links to add
      * @returns The updated list of application menu links
+     * @example
+     * const updatedLinks = await globalHeaderClient.accessMenu.addApplicationMenuLinks([{ label: 'Profile', href: '/profile' }]);
      */
     addApplicationMenuLinks: (links: Translatable<ApplicationMenuLink>[]) => Promise<Translatable<ApplicationMenuLink>[]>;
     /**
      * Set all application menu links
      * @param links The application menu links to set
      * @returns The updated list of application menu links
+     * @example
+     * const updatedLinks = await globalHeaderClient.accessMenu.setApplicationMenuLinks([{ label: 'Settings', href: '/settings' }]);
      */
     setApplicationMenuLinks: (links: Translatable<ApplicationMenuLink>[]) => Promise<Translatable<ApplicationMenuLink>[]>;
     /**
      * Set the profile configuration
      * @param profileConfig The profile configuration to set
      * @returns The result of the operation
+     * @example
+     * const success = await globalHeaderClient.accessMenu.setProfile({ active: true, loginUrl: '/login', logoutUrl: '/logout' });
      */
     setProfile: (profileConfig: Partial<ProfileConfig>) => Promise<boolean>;
     /**
      * Get the profile configuration
      * @returns The profile configuration
+     * @example
+     * const profile = await globalHeaderClient.accessMenu.getProfile();
      */
     getProfile: () => Promise<Partial<ProfileConfig>>;
     /**
      * Get the application name
      * @returns The application name
+     * @example
+     * const appName = await globalHeaderClient.accessMenu.getApplicationName();
      */
     getApplicationName: () => Promise<string>;
     /**
      * Set the application name
      * @param applicationName The application name to set
      * @returns The result of the operation
+     * @example
+     * const success = await globalHeaderClient.accessMenu.setApplicationName('My Application');
      */
     setApplicationName: (applicationName: Translatable<string>) => Promise<boolean>;
 }

package/dist/client/branding.d.ts

@@ -3,35 +3,47 @@ export interface BrandingMethods {
     /**
      * Get the branding level
      * @returns The branding level
+     * @example
+     * const level = await globalHeaderClient.branding.getLevel();
      */
     getLevel: () => Promise<number>;
     /**
      * Set the branding level
      * @param level The branding level to set
      * @returns A boolean indicating the success of the operation
+     * @example
+     * const success = await globalHeaderClient.branding.setLevel(2);
      */
     setLevel: (level: number) => Promise<boolean>;
     /**
      * Get the branding colors
      * @returns The branding colors
+     * @example
+     * const colors = await globalHeaderClient.branding.getColors();
      */
     getColors: () => Promise<BrandingConfigColors>;
     /**
      * Get a specific branding color
      * @param type The type of the branding color to retrieve
      * @returns The requested branding color
+     * @example
+     * const color = await globalHeaderClient.branding.getColor('primary');
      */
     getColor: (type: keyof BrandingConfigColors) => Promise<string>;
     /**
      * Set the branding colors
      * @param colors The branding colors to set
      * @returns A boolean indicating the success of the operation
+     * @example
+     * const success = await globalHeaderClient.branding.setColors({ primary: '#000000', functional: '#FFFFFF' });
      */
     setColors: (colors: BrandingConfigColors) => Promise<boolean>;
     /**
      * Set a specific branding color
      * @param args The branding color type and value to set
      * @returns A boolean indicating the success of the operation
+     * @example
+     * const success = await globalHeaderClient.branding.setColor({ type: 'primary', value: '#FF0000' });
      */
     setColor: (args: {
         type: keyof BrandingConfigColors;
@@ -40,28 +52,38 @@ export interface BrandingMethods {
     /**
      * Get the branding host configuration
      * @returns The branding host configuration
+     * @example
+     * const hostConfig = await globalHeaderClient.branding.getHost();
      */
     getHost: () => Promise<Partial<BrandingConfigHost>>;
     /**
      * Set the branding host configuration
      * @param host The branding host configuration to set
      * @returns A boolean indicating the success of the operation
+     * @example
+     * const success = await globalHeaderClient.branding.setHost({ label: 'My Host', href: 'https://example.com', logo: { src: 'logo.png', alt: 'Logo' } });
      */
     setHost: (host: Partial<BrandingConfigHost>) => Promise<boolean>;
     /**
      * Get the branding umbrella configuration
      * @returns The branding umbrella configuration
+     * @example
+     * const umbrellaConfig = await globalHeaderClient.branding.getUmbrella();
      */
     getUmbrella: () => Promise<Partial<BrandingConfigUmbrella>>;
     /**
      * Set the branding umbrella configuration
      * @param umbrella The branding umbrella configuration to set
      * @returns A boolean indicating the success of the operation
+     * @example
+     * const success = await globalHeaderClient.branding.setUmbrella({ label: 'Umbrella', href: 'https://umbrella.com' });
      */
     setUmbrella: (umbrella: Partial<BrandingConfigUmbrella>) => Promise<boolean>;
     /**
      * Get the branding variables
      * @returns A record of CSS variable names and their values
+     * @example
+     * const variables = await globalHeaderClient.branding.getVariables();
      */
     getVariables: () => Promise<Record<string, string>>;
 }

package/dist/client/client.d.ts

@@ -9,37 +9,58 @@ import { Config } from '../config';
  */
 export interface GlobalHeaderClient {
     /**
-     * The contact methods TODO: add description
+     * Methods related to the **hulp nodig?** menu.
      */
     contact: ContactMethods;
     /**
-     * The access menu methods TODO: add description
+     * Methods related to the **Aanmelden** menu.
      */
     accessMenu: AccessMenuMethods;
     /**
-     * The branding methods TODO: add description
+     * Methods related to the branding of the widget. This includes:
+     * - Colors
+     * - Branding level
+     * - Umbrella
+     * - Host
      */
     branding: BrandingMethods;
     /**
-     * Set whether navigation is enabled.
-     * @param enabled The navigation enabled state.
-     * @returns A boolean indicating if the navigation state was set.
+     * 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.
+     *
+     * @param enabled - A boolean value indicating whether navigation should be enabled (true) or disabled (false).
+     * @returns A promise that resolves to a boolean, confirming if the navigation state was successfully updated.
+     * @example
+     * const success = await globalHeaderClient.setNavigationEnabled(false);
      */
     setNavigationEnabled: (enabled: boolean) => Promise<boolean>;
     /**
      * Get the current configuration.
-     * @returns The current configuration.
+     * This is the configuration for the widget ID given in the embed or entry script.
+     *
+     * @returns 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();
      */
     getConfig: () => Promise<Config>;
     /**
      * Mount the Global Header Widget.
      * @param element The element to mount the widget to. If omitted, mounts at the top of the page.
      * @returns A boolean indicating if the widget was mounted successfully.
+     * @example
+     * const success = await globalHeaderClient.mount(document.getElementById('header'));
      */
     mount: (element?: HTMLElement) => Promise<boolean>;
     /**
      * Unmount the Global Header Widget.
      * @returns A boolean indicating if the widget was unmounted successfully.
+     * @example
+     * const success = await globalHeaderClient.unmount();
      */
     unmount: () => Promise<boolean>;
 }

package/dist/client/contact.d.ts

@@ -4,37 +4,67 @@ export interface ContactMethods {
     /**
      * Get the current service points
      * @returns A promise that resolves to the current service points
+     * @example
+     * const servicePoints = await globalHeaderClient.contact.getServicePoints();
      */
     getServicePoints: () => Promise<EnrichedServicePoints>;
     /**
      * Set the service points
      * @param servicePoints The service points to set
      * @returns A promise that resolves to the set service points
+     * @example
+     * const updatedServicePoints = await globalHeaderClient.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" }
+     *   ]
+     * });
      */
     setServicePoints: (args: Translatable<ServicePoints>) => Promise<Translatable<ServicePoints>>;
     /**
      * Reset the service points to the initial values from the configuration.
      * @returns A promise that resolves when the service points have been reset.
+     * @example
+     * const success = await globalHeaderClient.contact.resetServicePoints();
      */
     resetServicePoints: () => Promise<boolean>;
     /**
      * Open the contact panel.
      * @returns A promise that resolves to true if the contact panel was opened.
+     * @example
+     * const isOpen = await globalHeaderClient.contact.open();
      */
     open: () => Promise<boolean>;
     /**
      * Close the contact panel.
      * @returns A promise that resolves to true if the contact panel was closed.
+     * @example
+     * const isClosed = await globalHeaderClient.contact.close();
      */
     close: () => Promise<boolean>;
     /**
      * Toggle the contact panel.
      * @returns A promise that resolves to true if the contact panel is now open.
+     * @example
+     * const isToggled = await globalHeaderClient.contact.toggle();
      */
     toggle: () => Promise<boolean>;
     /**
      * Check if the contact panel is open.
      * @returns A promise that resolves to true if the contact panel is open.
+     * @example
+     * const isOpen = await globalHeaderClient.contact.isOpen();
      */
     isOpen: () => Promise<boolean>;
 }

package/docs/assets/highlight.css

@@ -27,6 +27,8 @@
     --dark-hl-12: #C586C0;
     --light-hl-13: #267F99;
     --dark-hl-13: #4EC9B0;
+    --light-hl-14: #098658;
+    --dark-hl-14: #B5CEA8;
     --light-code-background: #FFFFFF;
     --dark-code-background: #1E1E1E;
 }
@@ -46,6 +48,7 @@
     --hl-11: var(--light-hl-11);
     --hl-12: var(--light-hl-12);
     --hl-13: var(--light-hl-13);
+    --hl-14: var(--light-hl-14);
     --code-background: var(--light-code-background);
 } }
 
@@ -64,6 +67,7 @@
     --hl-11: var(--dark-hl-11);
     --hl-12: var(--dark-hl-12);
     --hl-13: var(--dark-hl-13);
+    --hl-14: var(--dark-hl-14);
     --code-background: var(--dark-code-background);
 } }
 
@@ -82,6 +86,7 @@
     --hl-11: var(--light-hl-11);
     --hl-12: var(--light-hl-12);
     --hl-13: var(--light-hl-13);
+    --hl-14: var(--light-hl-14);
     --code-background: var(--light-code-background);
 }
 
@@ -100,6 +105,7 @@
     --hl-11: var(--dark-hl-11);
     --hl-12: var(--dark-hl-12);
     --hl-13: var(--dark-hl-13);
+    --hl-14: var(--dark-hl-14);
     --code-background: var(--dark-code-background);
 }
 
@@ -117,4 +123,5 @@
 .hl-11 { color: var(--hl-11); }
 .hl-12 { color: var(--hl-12); }
 .hl-13 { color: var(--hl-13); }
+.hl-14 { color: var(--hl-14); }
 pre, code { background: var(--code-background); }

package/docs/functions/bootstrap.html

@@ -5,4 +5,4 @@
 </div></div></section><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="bootstrap" class="tsd-anchor"></a><span class="tsd-kind-call-signature">bootstrap</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/GlobalHeaderClient.html" class="tsd-signature-type tsd-kind-interface">GlobalHeaderClient</a><span class="tsd-signature-symbol">&gt;</span><a href="#bootstrap" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The entry URL which has a form like this:
 <code>https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/your-widget-id/entry</code></p>
 </div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Promise</span><span class="tsd-signature-symbol">&lt;</span><a href="../interfaces/GlobalHeaderClient.html" class="tsd-signature-type tsd-kind-interface">GlobalHeaderClient</a><span class="tsd-signature-symbol">&gt;</span></h4><p>The GlobalHeaderClient object.</p>
-<div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://bitbucket.org/vlaamseoverheid/vl-widgets/src/bc07449f7b640862a92318043b257e10e0bc8a9d/packages/global-header-types/src/bootstrap.ts#lines-21">global-header-types/src/bootstrap.ts:21</a></li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Global Header</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+<div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://bitbucket.org/vlaamseoverheid/vl-widgets/src/49037f41489a2e8c74cc8d7cdeaedc409bd90176/packages/global-header-types/src/bootstrap.ts#lines-21">global-header-types/src/bootstrap.ts:21</a></li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">Global Header</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

package/docs/index.html

@@ -146,6 +146,142 @@ Action Required:</p>
 <pre><code class="typescript"><span class="hl-12">import</span><span class="hl-2"> { </span><span class="hl-7">GlobalHeaderClient</span><span class="hl-2">, </span><span class="hl-7">MainLink</span><span class="hl-2"> } </span><span class="hl-12">from</span><span class="hl-2"> </span><span class="hl-11">&#39;@govflanders/vl-widget-global-header-types&#39;</span><span class="hl-2">;</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">client</span><span class="hl-2">: </span><span class="hl-13">GlobalHeaderClient</span><span class="hl-2"> = </span><span class="hl-7">window</span><span class="hl-2">.</span><span class="hl-7">globalHeaderClient</span><span class="hl-2">;</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">contactLink</span><span class="hl-2">: </span><span class="hl-13">MainLink</span><span class="hl-2"> = {</span><br/><span class="hl-2">  </span><span class="hl-7">label:</span><span class="hl-2"> </span><span class="hl-11">&#39;Contact&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">  </span><span class="hl-7">href:</span><span class="hl-2"> </span><span class="hl-11">&#39;/contact&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-9">const</span><span class="hl-2"> </span><span class="hl-10">feedbackLink</span><span class="hl-2">: </span><span class="hl-13">MainLink</span><span class="hl-2"> = {</span><br/><span class="hl-2">  </span><span class="hl-7">label:</span><span class="hl-2"> </span><span class="hl-11">&#39;Feedback&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">  </span><span class="hl-7">href:</span><span class="hl-2"> </span><span class="hl-11">&#39;https://example.com/feedback&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">  </span><span class="hl-7">isExternal:</span><span class="hl-2"> </span><span class="hl-9">true</span><span class="hl-2">,</span><br/><span class="hl-2">  </span><span class="hl-7">target:</span><span class="hl-2"> </span><span class="hl-11">&#39;_blank&#39;</span><span class="hl-2">,</span><br/><span class="hl-2">};</span><br/><br/><span class="hl-7">client</span><span class="hl-2">.</span><span class="hl-7">accessMenu</span><span class="hl-2">.</span><span class="hl-8">setMainLinks</span><span class="hl-2">([</span><br/><span class="hl-2">  </span><span class="hl-7">contactLink</span><span class="hl-2">,</span><br/><span class="hl-2">  </span><span class="hl-7">feedbackLink</span><span class="hl-2">,</span><br/><span class="hl-2">]);</span>
 </code><button type="button">Copy</button></pre>
 
+<a id="content-security-policy-csp" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Content Security Policy (CSP)<a href="#content-security-policy-csp" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To ensure the secure integration of the <strong>Global Header Widget</strong>, you need to configure your Content Security Policy (CSP) with the following directives:</p>
+<a id="production-environment-csp-configuration" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Production Environment CSP Configuration<a href="#production-environment-csp-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The minimum required CSP directives for using the global-header in a production environment are:</p>
+<table>
+<thead>
+<tr>
+<th>Directive</th>
+<th>Value</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>https://widgets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>wss://chat.contactcenter.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>https://chat.contactcenter.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>https://contactapi.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>font-src</code></td>
+<td><code>https://ui.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>font-src</code></td>
+<td><code>https://assets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>font-src</code></td>
+<td><code>https://widgets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>img-src</code></td>
+<td><code>data:</code></td>
+</tr>
+<tr>
+<td><code>img-src</code></td>
+<td><code>https://assets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>img-src</code></td>
+<td><code>https://widgets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>script-src</code></td>
+<td><code>https://widgets.vlaanderen.be</code></td>
+</tr>
+</tbody>
+</table>
+<a id="tni-environment-csp-configuration" class="tsd-anchor"></a><h3 class="tsd-anchor-link">TNI Environment CSP Configuration<a href="#tni-environment-csp-configuration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The minimum required CSP directives for using the global-header in a TNI environment are:</p>
+<table>
+<thead>
+<tr>
+<th>Directive</th>
+<th>Value</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>https://tni.widgets.dev-vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>wss://tni.contactapi.uat-vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>https://chat.contactcenter.dev-vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>https://tni.contactapi.uat-vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>font-src</code></td>
+<td><code>https://ui.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>font-src</code></td>
+<td><code>https://assets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>font-src</code></td>
+<td><code>https://tni.widgets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>img-src</code></td>
+<td><code>data:</code></td>
+</tr>
+<tr>
+<td><code>img-src</code></td>
+<td><code>https://assets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>img-src</code></td>
+<td><code>https://tni.widgets.vlaanderen.be</code></td>
+</tr>
+<tr>
+<td><code>script-src</code></td>
+<td><code>https://tni.widgets.vlaanderen.be</code></td>
+</tr>
+</tbody>
+</table>
+<a id="additional-csp-for-screensharing" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Additional CSP for Screensharing<a href="#additional-csp-for-screensharing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>If you're using the screensharing extension in the contact menu, include the following additional directives:</p>
+<table>
+<thead>
+<tr>
+<th>Directive</th>
+<th>Value (Production &amp; TNI)</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>cobrowse.io</code></td>
+</tr>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>*.cobrowse.io</code></td>
+</tr>
+<tr>
+<td><code>connect-src</code></td>
+<td><code>wss://*.cobrowse.io</code></td>
+</tr>
+</tbody>
+</table>
+<a id="further-information" class="tsd-anchor"></a><h3 class="tsd-anchor-link">Further Information<a href="#further-information" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>For more detailed information about the cobrowse CSP settings, please refer to the <a href="https://docs.cobrowse.io/sdk-installation/web#content-security-policies-csps" target="_blank" class="external">Cobrowse SDK Installation Guide</a>.</p>
+<p>Ensure that your CSP settings are correctly configured to avoid any issues with the widget's functionality and security. If you have any questions or need further assistance, please refer to the <a href="#contact-information">Contact Information</a> section.</p>
 <a id="contact-information" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Contact Information<a href="#contact-information" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>If you need assistance or have any questions regarding the <strong>Global Header Widget</strong>, feel free to reach out to us:</p>
 <ul>
 <li><strong>Support Portal</strong>: <a href="https://vlaamseoverheid.atlassian.net/wiki/spaces/IKPubliek/pages/2339897467/Widget-platform" target="_blank" class="external">Widget platform</a></li>
@@ -168,4 +304,4 @@ Action Required:</p>
 <li>Flanders Widget API Usage</li>
 <li>V4 to V5 Migration Guide</li>
 </ul>
-</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#introduction"><span>Introduction</span></a><a href="#adding-a-flanders-global-header-to-your-website"><span>Adding a <wbr/>Flanders <wbr/>Global <wbr/>Header to <wbr/>Your <wbr/>Website</span></a><ul><li><a href="#using-the-embed-script-automatic-mounting"><span>Using the <wbr/>Embed <wbr/>Script (<wbr/>Automatic <wbr/>Mounting)</span></a></li><li><a href="#using-the-entry-script-manual-mounting"><span>Using the <wbr/>Entry <wbr/>Script (<wbr/>Manual <wbr/>Mounting)</span></a></li><li><a href="#summary"><span>Summary</span></a></li></ul><a href="#using-the-windowglobalheaderclient-api"><span>Using the window.global<wbr/>Header<wbr/>Client API</span></a><a href="#migration-guide-upgrading-from-v4-to-v5"><span>Migration guide: <wbr/>Upgrading from v4 to v5</span></a><ul><li><a href="#remove-client-library-script-links"><span>Remove client library script links</span></a></li><li><a href="#eliminate-installable-packages"><span>Eliminate installable packages</span></a></li><li><a href="#update-embed-script-links"><span>Update <wbr/>Embed script links</span></a></li><li><a href="#update-api-usage"><span>Update API usage</span></a></li><li><ul><li><a href="#changes-in-session-management"><span>Changes in <wbr/>Session <wbr/>Management</span></a></li><li><a href="#changes-in-the-profile-method"><span>Changes in the <wbr/>Profile <wbr/>Method</span></a></li></ul></li><li><a href="#accessing-windowglobalheaderclient"><span>Accessing window.global<wbr/>Header<wbr/>Client</span></a></li><li><a href="#verify-styling-and-rendering"><span>Verify <wbr/>Styling and <wbr/>Rendering</span></a></li></ul><a href="#language-switching"><span>Language <wbr/>Switching</span></a><a href="#browser-support"><span>Browser <wbr/>Support</span></a><a href="#typescript-support"><span>Typescript <wbr/>Support</span></a><ul><li><a href="#installation"><span>Installation</span></a></li><li><a href="#usage-example"><span>Usage example</span></a></li></ul><a href="#contact-information"><span>Contact <wbr/>Information</span></a><a href="#search-keywords"><span>Search <wbr/>Keywords</span></a></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">Global Header</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#introduction"><span>Introduction</span></a><a href="#adding-a-flanders-global-header-to-your-website"><span>Adding a <wbr/>Flanders <wbr/>Global <wbr/>Header to <wbr/>Your <wbr/>Website</span></a><ul><li><a href="#using-the-embed-script-automatic-mounting"><span>Using the <wbr/>Embed <wbr/>Script (<wbr/>Automatic <wbr/>Mounting)</span></a></li><li><a href="#using-the-entry-script-manual-mounting"><span>Using the <wbr/>Entry <wbr/>Script (<wbr/>Manual <wbr/>Mounting)</span></a></li><li><a href="#summary"><span>Summary</span></a></li></ul><a href="#using-the-windowglobalheaderclient-api"><span>Using the window.global<wbr/>Header<wbr/>Client API</span></a><a href="#migration-guide-upgrading-from-v4-to-v5"><span>Migration guide: <wbr/>Upgrading from v4 to v5</span></a><ul><li><a href="#remove-client-library-script-links"><span>Remove client library script links</span></a></li><li><a href="#eliminate-installable-packages"><span>Eliminate installable packages</span></a></li><li><a href="#update-embed-script-links"><span>Update <wbr/>Embed script links</span></a></li><li><a href="#update-api-usage"><span>Update API usage</span></a></li><li><ul><li><a href="#changes-in-session-management"><span>Changes in <wbr/>Session <wbr/>Management</span></a></li><li><a href="#changes-in-the-profile-method"><span>Changes in the <wbr/>Profile <wbr/>Method</span></a></li></ul></li><li><a href="#accessing-windowglobalheaderclient"><span>Accessing window.global<wbr/>Header<wbr/>Client</span></a></li><li><a href="#verify-styling-and-rendering"><span>Verify <wbr/>Styling and <wbr/>Rendering</span></a></li></ul><a href="#language-switching"><span>Language <wbr/>Switching</span></a><a href="#browser-support"><span>Browser <wbr/>Support</span></a><a href="#typescript-support"><span>Typescript <wbr/>Support</span></a><ul><li><a href="#installation"><span>Installation</span></a></li><li><a href="#usage-example"><span>Usage example</span></a></li></ul><a href="#content-security-policy-csp"><span>Content <wbr/>Security <wbr/>Policy (CSP)</span></a><ul><li><a href="#production-environment-csp-configuration"><span>Production <wbr/>Environment CSP <wbr/>Configuration</span></a></li><li><a href="#tni-environment-csp-configuration"><span>TNI <wbr/>Environment CSP <wbr/>Configuration</span></a></li><li><a href="#additional-csp-for-screensharing"><span>Additional CSP for <wbr/>Screensharing</span></a></li><li><a href="#further-information"><span>Further <wbr/>Information</span></a></li></ul><a href="#contact-information"><span>Contact <wbr/>Information</span></a><a href="#search-keywords"><span>Search <wbr/>Keywords</span></a></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">Global Header</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>