Setting Up Your App Header

Putting your brand on every screen

The App Header is the part of your app that is viewed on every card view of your journey. Customizing your App Header is a way for you to brand your entire experience. In this lesson we will walk through configuring an app header.

Initial State of App Header

The Default App State has a pretty empty App Header. If you create a new app and click on your app header in the App Builder<<TODO: Link>> you will see an app header with a Logo Image and an empty container. 

Adding A Logo Image

To add an image to the App Header lets go to the Media Library and add a new image asset. For our example we will add the Airkit Logo.

Adding the Image to App Header

When we go back to the App Builder and click on the App Header, we can select the image element. Clicking on the Plus icon on the right hand side of the Expression Editor for URL in the Assets section we will see the name of our logo that we just uploaded.

You’ll notice that once we select the image it appears in the stage. The image that we are using is wider than it is tall. Because of the constraints set on the image element, our image is being scaled down to a square size.

To fix this we will modify the image’s width constraint. Click on the Style tab in the inspector and scroll down to Dimensions section. Click on the “Reset to Default” option. Our image is now expanding to take the entire width of the App Header.

This is great, but as you can see the image is snow stretched. To fix that, click on the App Header in the tree. In the Style tab in the inspector, select the Horizontal layout option.

This is telling the App Header container to layout the Container and the Image side by side. The App Header logo image will now take up the space needed to render the image, and the additional container will expand to fill the rest of the space.

Adding a Contact Us Button

Click the plus button on the App Header to insert a button. Set up the Title of the button to be “Contact Us”. Your App Header should now contain the logo image, a container and the button. Delete the Container because no longer need it.

As you can see the button is now right next to the image. Lets to to the App Header and modify the layout options a bit more. Change the Item Spacing to “Space Between” and the Alignment to “Center”. 

Now the Button and the image are centered in the container. We can add a little bit of right margin to the button to finish off the styling.

We now have our styled App Header. For information on how to set up the actions on the Contact Us Button, see our section on Action Builder.