Advanced Journeys Configuration

Journeys Image Recommendations

Journeys are hugely successful at bringing mobile web users into your apps. But to be most effective, the Journey needs to look great and fit well on the page. The difficulty here is that Journeys can come in a wide variety of shapes and sizes but this guide should help you make some sizing decisions for a few of the most requested Journeys Templates.

Full Page Image

The Full Page Journey is a bit tricky because the template itself is responsive to the dimensions of the phone. To account for these potentially changing dimensions, some bleed must be built into the images in use.

Background position

center

Background size

cover

Dimensions

512x1024px

Main content area

414x736px

Partial Page Image

The Partial Page Journey can be a little easier to account for because the template itself is responsive to the dimensions of only the width if desired or as a percentage of the view height. To account for these potentially changing dimensions, some bleed must be built into the images in use.

Fixed Height

Background position

Center

Background size

Cover

Example Dimensions

512x321px

Main Content Area

350x321px

Variable Height (33% View Height) - Top

Background Position

Top Center

Background Size

Cover

Example Dimensions

512x321px

Main Content Area

414x250px

Variable Height (33% View Height) - Bottom

Background Position

Bottom Center

Background Size

Cover

Example Dimensions

512x321px

Main Content Area

414x250px

App Icon Image

Recommended sizing: 180x180px

Dynamic Journeys Layout Customization

We now support the use case where you can customize the appearance of a Journey depending on which link referred the web session. So, you can create a Branch link with a set of defined keys and values that will change properties such as the title or images when the user is referred to your website from this link.

Link Data Key Value Example Value
$journeys_button_get_has_app The call to action button when the app is currently installed "Open App"
$journeys_button_get_no_app The call to action button when the app is not currently installed "Install App"
$journeys_title The title or main text of your Journey "Download Appsolutely today"
$journeys_description This is the description or subtitle in the frame "This app is disrupting apps"
$journeys_icon_image_url The app icon displayed in the layout "https://mysite.com/image.png"

Note that not all template support all override keys. For example, the floating button does not support title, description or icon image url (floating buttons will support the custom liquid tags detailed below though). If a template is to be rendered and the key you've specified does not exist, we'll simply ignore it while rendering the template.

Custom tags for dynamic Journeys layout customization

In addition to using pre-defined keys (e.g. $journeys_title) to dynamically customize the appearance/content of a Journey, you can use custom liquid tags. Custom tags can be inserted in both the View Editor and the CSS Editor when you’re setting up a Journeys template. Then, you can use setBranchViewData() to dynamically provide values for these tags. You can also embed those values statically on a page with Branch Meta Tags.

Note that if you include custom liquid tags in your templates and also set a value for a pre-defined key (e.g. $journeys_title) in setBranchViewData(), the value of the pre-defined key will take precedence.

The format for a custom liquid tag is as follows. Note that a default value must be specified for every custom tag you include:

{{ key_name | default_value }}

For example, if you were adding a custom liquid tag in CSS to dynamically control the font size of one of your Journeys’ title, you might use a tag like the one below:

{{ fontSize | 12px }}

image

And if you were adding a custom liquid tag in your template text, you might use a tag like the one below:

{{ adjective | best }}

image

Then, to dynamically update values for the “fontSize” and “adjective” variables, you would set values for those variables using setBranchViewData():

branch.setBranchViewData({
    data: {
        'fontSize': '20px',
        'adjective': 'most entertaining',
    }
});

Or, you can set the values by embedding Branch Meta Tags on the page:

<meta name="branch:deeplink:fontSize" content="20px" />
<meta name="branch:deeplink:adjective" content="most entertaining" />

Updated 25 days ago


Advanced Journeys Configuration


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.