A header refers to the section at the top of a heyflow or webpage in general. It contains information that is consistent across all or most pages of a website.
The header is separate from the main content area and the footer, and it often includes elements such as:
Logo: The company logo is often placed in the header, serving as a visual representation of the brand.
Avatar: To make your flow more personal, include our avatar block with an image of e.g. a contact person
Call-To-Action Buttons (CTA): Buttons that encourage users to take specific actions.
Progress bar: To show the user the progress of the flow, you can also include a progress bar in the header.
Navigation Buttons: Define and configure navigation buttons to guide users through the flow pages and enhance the user's journey.
❗ Important: Used in the header, the progress bar will count all pages, so maybe you prefer to add an individual progress bar to each of your pages especially when using conditional logic.
Let's see how you can add a header to your heyflow!
Adding the Header to a page
1. Navigate to the page on which you would like to add a header.
2. Click Show header on top of the page.
Editing the Header
Just as you can customize any page, you can also customize the header – however, with a different selection of blocks. E.g., the Avatar block is unique to the header. Simply drag and drop your preferred building block into the header on one of your pages, and it updates the header for all pages automatically.
Designing the Header
There are multiple ways to adjust the header, even more than described above. Head to the Design on the right, and you can see the option of the header. You can dive deeper into all spheres of design & look.
You can adjust different parameters, such as the header border or a shadow. One important option is the Scroll behavior. You can choose whether you want the header to be sticky or flexible. Therefore, select between Fixed and Scroll, to apply the desired behavior of the header to the flow.
