No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

@swisspost/internet-header

npm version

The header for client-facing applications.

Request a configuration

The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header.
If you're working on a new project, you probably need a new configuration. Please contact the Post Portal Team.

Step 1

Integration of header only: contact dm-tec@post.ch directly

Integration of header and KLP: contact KLP first for integration

Step 2

Provide these informations to DM Tec:

Not every Online Service has configurations for all environments. For example, "TOPOS" only has int02 configured and cannot use int01 as value for environment. If you are not sure what's configured for your project, please reach out to the post-portal team as well.

Internet-header package provide two versions:

  • Lazy-loaded (default): it allows better performance by dynamically load the component when used, so it reduces bundle size, startup time and first paint.
  • Bare component: if you already manage the lazy-loading or don't need it for any reason, you can use the component without any overhead.
Install with a bundler

All the popular frameworks come with some form of bundler. This makes it easy to use npm packages like the Internet Header as you can import, bundle and deliver the header with your own code.

When working with Angular or any other framework, the easiest installation method is via npm.

npm install @swisspost/internet-header
<!-- index.html -->
<body>
  <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
  ...
</body>
Lazy-Loaded
Bare Component
// main.ts / index.js / ...
import { defineCustomElements } from '@swisspost/internet-header/loader';

defineCustomElements();
// main.ts / index.js / ...
import '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.esm';
Include from a CDN

If you are not using any bundler or don't want to install from npm, you can load the internet-header from your favourite CDN.
Make sure to replace {version} with the version you want to use or remove @{version} to use the latest version.

Available CDNs:

Lazy-Loaded
Bare Component
<!DOCTYPE html>
<html>
  <body>
    <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
    <script type="module">
      import { defineCustomElements } from '{cdnUrl}@{version}/loader/index.es2017.js';

      defineCustomElements();
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <script
      async
      type="module"
      src="{cdnUrl}@{version}/dist/swisspost-internet-header/swisspost-internet-header.esm.js"
    ></script>
  </head>
  <body>
    <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
  </body>
</html>

For Angular user, please have a look at How to integrate Web Components inside Angular

The internet header package provides a stylesheet aimed at facilitating the use of key CSS variables beyond the header itself. This stylesheet allows you to access CSS variables to implement styling relative to the header as needed, but it is completely optional.

Sass Import
@use "@swisspost/internet-header/dist/siwsspost-internet-header/siwsspost-internet-header.css";
HTML Import
<link rel="stylesheet" href="@swisspost/internet-header/dist/siwsspost-internet-header/siwsspost-internet-header.css"/>

This guide aims to give a broad overview of how a migration can be performed. Different projects have different levels of integration with the header, and therefore require more steps to migrate.

The "new" Internet Header Web Component aims to encapsulate as much as possible whereas the old header had a big influence on the page — limiting design decisions and flexibility of the markup structure. The Web Component Header consists of one script and three standard Web Components that can be freely placed on the page. It's even possible to render those elements with Angular (or any other framework) to easier pass settings into the component.

The new header is built to work with the existing Sitecore configuration already existing for your project to make the migration as smooth as possible.

If you need support during your migration, don't hesitate to contact the Design System Team on GitHub.

In your index.html, you should find three scripts associated with the old header. One to load static assets, one to configure it and one to load it.

  • You can remove the configuration and the loader scripts, but remember your serviceid.
  • Try to remove the staticassets script to check if you still need it
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
    />
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
    />

    <!-- Custom CSS -->

    <!-- static assets -->
    <script
      src="https://www.post.ch/api/staticasset?serviceId=webstamp&file=head.js&environment=prod"
      type="text/javascript"
    ></script>
  </head>

  <body>
    <div id="os_content">
      <!-- Content from the current page of the online service -->
    </div>

    <!-- configuration -->
    <script id="os_config" type="application/json">
      {
        "os_config": {
          "currentLang": "de",
          "currentUrl": "https://service.post.ch/onlinedienst/deep-url"
        }
      }
    </script>

    <!-- loader -->
    <script
      src="https://www.post.ch/api/headerjs?serviceid=webstamp&includejquery=true&environment=prod"
      type="text/javascript"
    ></script>
  </body>
</html>

The old header was responsible for wrapping your main code (here #os_content) with custom <div>s. The new header does not provide those wrappers. Instead, every page has control over the main markup structure. A possible replacement of the above code could be:

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
    />
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
    />

    <!-- Custom CSS -->
  </head>

  <body>
    <main id="os_content" class="container">
      <!-- Content from the current page of the online service -->
    </main>
  </body>
</html>
  • Likely you'll need the class container around your main content to align it properly in the center.
  • For bonus points on semantic markup, use the <main> tag around the main page content
  • Check if you need the staticasset stylesheets linked in the header

If you need to do any other changes, please make a post to the Design System Teams Channel in order to inform the devs to update this guide and provide useful information for other developers.

The new Header does not ship jQuery anymore. While jQuery v3.6 is an internal dependency for the Login Widget, every project is now responsible for loading and updating jQuery individually. If you are depending on an older (<3.5) version of jQuery, please update. There is a long list of known jQuery vulnerabilities.

Please refer to the Internet Header installation instructions for an installation guide.

After installation, you're ready to add the new tags to your markup:

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post.css&environment=prod"
    />
    <link
      rel="stylesheet"
      href="https://www.post.ch/api/staticasset?serviceId=webstamp&file=post-modules.css&environment=prod"
    />

    <!-- Eigene CSS Verknüpfungen -->
  </head>

  <body>
    <!-- The header needs to be directly in the body tag for stickiness functionality to work -->
    <swisspost-internet-header project="your-service-id"></swisspost-internet-header>

    <aside class="my-huge-r container">
      <swisspost-internet-breadcrumbs></swisspost-internet-breadcrumbs>
    </aside>

    <main id="os_content" class="container">
      <!-- Content from the current page of the online service  -->
    </main>

    <swisspost-internet-footer></swisspost-internet-footer>
  </body>
</html>

Place the new elements as described (and needed) as shown above. The breadcrumbs need a container wrapper to align themselves with the content of your page, the header and the footer already provide a container. If you don't have breadcrumbs, you can just delete the <aside> and the <swisspost-internet-breadcrumbs>.

If you need to change settings during runtime, you can get a reference to the header by querying:

const header = document.querySelector<HTMLSwisspostInternetHeaderElement>(
  'swisspost-internet-header',
);

// Toggle search
header.search = false;

// Set new custom config
header.customConfig = {
  /* ... */
};

At the Internet Header configuration page you can find a list of possible options.