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
To add the header, follow these steps in edit mode:
Navigate to the page on which you would like to add a header.
Click Show header on top of the page.
This will add the header to the page.
Removing the Header from a page
To remove the header, follow these steps in edit mode:
Select the header in your flow.
Then click on Layers on the left side.
Next to “Header”, click the three dots and select “Hide header”.
This will remove the header from 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.
