The app header sits at the top of your application and is viewable on each page. Adding a customized app header is a way to brand your entire experience. You can also provide help resources to your customers by adding an assistance button to the app header.
Uploading images for the app header and assistance button
First, upload the images that will be later used as the header and assistant of the application. Go to Media Library and click on Upload.
After dragging and dropping -or uploading from your computer- the images, you will see them listed on the Stage sector.
Adding the app header
In the Tree section of Activity Builder, go to the Advanced tab and click on Layouts. Click on the '+' sign next to the Container in Mobile and add a new Container. Rename it to “App Header”.
Click on the '+' sign next to the “App Header” Container and select Image as a Media control. Then change the name to “Header image”. Drag and drop “App Header” to be above “Main Content” in the tree. That way the App Header is above the content of the application.
In the Inspector section, go to Control Properties and use the split control to select the image you need from the Asset dropdown. This way, the image will show up in the Stage.
In the Inspector section, select a Variant type and set the Dimensions to 50% width to leave space for the assistant. This will ensure the content inside the container to sit side by side.
Adding the assistance button
The assistant will be a clickable logo of an agent. Therefore, a Button Cell and an Image controls will be added to the “App Header” Container.
Click on the '+' sign next to the “App Header” Container and select Button Cell as a Button control. A Button Cell container acts like a normal container but it has a click action for users to interact with the app.
Rename the button to “Assistance button” and click on the '+' sign next to it to add Image as a Media control.
From the Button Cell, in Control Properties, select the image of the assistant. This way, the image will show up in Stage over the button. Rename the Image control to “Assistance image” and in the Inspector section, distribute the Button Cell to the right and set the dimensions to 50%.
You've now finished configuring the look and feel of your app header. Clicking on your Web Pages will show you how the app header and assistance button display in relation to the rest of your content.
Configuring the assistance button
While you can configure the assistant to perform any Airkit action, a typical workflow is to have an “Assistance” Web Flow that provides resources to users.
First, in Activity Builder, create a new Web Flow with a “Needs Assistance” Web Page. This Web Page can include, for example, FAQs.
Go back to the “Assistance button” and in the Inspector section, go to the Actions tab. Then, click on the '+' sign and add an Open Modal action.
Then select the “Needs Assistance” Web Flow.
This way, when users click on the assistance button in the header, the Needs Assistance Web Page will open as a modal.
- To learn more about the basics of App Building, head over to Building your First App in Airkit
- To dive deeper into Web Flows, go to Web Flows
- To learn more about Controls, read Web Controls
- To check how you can keep styling your app, go to Styling with Themes