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.
❗ Important: Used in the header, the progress bar will count all screens, so maybe you prefer to add an individual progress bar to each of your screens especially when using conditional logic.
Let's see how you can add a header to your heyflow!
Editing the header
Just as you can customize any screen, you can also customize the master template (see image below) – however, with a different selection of blocks. E.g., the Avatar block is unique to the header screen. Simply drag and drop your preferred building block onto the content panel as usual.
Adding the header to a screen
1. Navigate to the screen on which you would like to add a header.
2. Click Add header on top of the content panel (see image below).
Designing the header
There are multiple ways to adjust the header, even more than described above. It is important that you are in Expert mode to see the option of the header in the Design tab. Check out our plans to see if expert mode is part of your plan.
Now, head to the Design tab, 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, choose between Fixed and Scroll, to apply the desired behavior of the header to the flow.
