Creating an App Header Creating an App Header

Creating an App Header

Eric Soelzer Eric Soelzer

Overview

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.

0.addmedia.png

After dragging and dropping -or uploading from your computer- the images, you will see them listed on the Stage sector.

1.logosmedia.png

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”.

2.addcontainer.png

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.

3.addimage.png

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.

4.selectimageRED.png

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.

5.width.png

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.

6.buttoncell.png

Rename the button to “Assistance button” and click on the '+' sign next to it to add Image as a Media control.

mceclip0.png

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%.

8.widthtwo.png

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.

9.openmodal.png

Then select the “Needs Assistance” Web Flow.

10.selectwebflow.png

This way, when users click on the assistance button in the header, the Needs Assistance Web Page will open as a modal.

Further Reference

 

Was this article helpful?

0 out of 0 found this helpful