Design your In-app content design-content
You can edit the In-app content to configure experience options:
-
In a Campaign, from the Action menu, to configure the message content click the Edit content button.
-
In a Journey, from the advanced menu of your In-app Action, you can start designing your content with the Edit content button.
The Advanced formatting toggle activates additional options to customize the experience.
Once your In-app message is created, and its content defined and personalized, you can review and activate it. Notifications will then be sent according to the campaign schedule. Learn more in this page.
Message layout message-layout
From the Message Layout section, select one of the four different layout options to choose from depending on your messaging needs.
-
Fullscreen: This type of layout covers the entire screen of your audience devices.
It supports media (image, video), text and button components.
-
Modal: This layout appears in a large alert-style window, your application is still visible in the background.
It supports media (image, video), text and button components.
-
Banner: This type of layout appears as a native OS alert message.
You can only add a Header and a Body to your message.
-
Custom: The custom message mode allows you to directly import and edit one of your pre-configured HTML messages.
-
Select Compose to enter or paste your raw HTML code.
Use the left pane to leverage Journey Optimizer personalization capabilities. For more on this, refer to this section.
-
Select Import to import the HTML or .zip file containing your HTML content.
-
Content tab content-tab
From the Content tab, you can define and personalize the content of the notification and the style of the Close button. You can also add a media to your In-app notification, and add action buttons from this tab.
Close button close-button
Choose the Style of your Close button.
Available styles are:
- Simple
- Circle
- Custom image from a Media URL or your Assets.
Media add-media
The Media field allows you to add media to your In-app message to create a compelling experience for end user.
Type-in your Media URL or click the Select Assets icon to directly add assets stored in your Assets library to your In-app message. Learn more about asset management.
You can also add an Alternative text for screen reading applications.
Content title-body
To compose your message, enter the content in the Header and Body fields.
Use the Personalization icon to add personalization. Learn more about personalization in Adobe Journey Optimizer Expression Editor in this section.
If the Advanced formatting mode is switched on, you can choose for your Header and Body:
- the Font
- the Pt size
- the Font Color
- the Alignment
Buttons add-buttons
Add buttons for users to interact with your In-app message.
To personalize your button:
-
Edit the Button #1 text (primary) field. You can also use the Personalization icon to define content and personalization data.
-
Choose your Interact event which defines your button’s action after users interacted with it.
-
Enter your web URL or deeplink in the Target field.
-
To add multiple buttons, click Add button.
If the Advanced formatting mode is switched on, you can choose for your Buttons:
- the Font
- the Pt size
- the Font Color
- the Alignment
- the Button style
- the Radius
- the Button color
Settings tab settings-tab
From the Settings tab, you can define the message layout and preview your In-app message. You can also access advanced formatting options.
Preview preview-tab
The App Preview allows you to add a background behind your In-app message:
-
A media from an URL link.
-
An asset from your Assets library.
-
A background color.
Layout layout-options
The Background image field allows you to add a background to your In-app message:
-
A media from an URL link.
-
A background color.
Message message-tab
The UI takeover option, enabled by default, allows you to darken the background behind your In-app message to emphasize the focus on your content.
If the Advanced formatting mode is switched on, you can further personalize your message with the following options:
-
Customize gestures: allows you to customize what the user swipe interaction is. If dismiss is selected, you can add a custom interact event and/or target destination.
-
Customize UI takeover: allows you to select a color to display in the background and its opacity.
-
Customize size: allows you to adjust your In-app notification’s width and height.
-
Customize position: allows you to customize the position of your In-app messages on your users’ screen. You can change the Vertical and Horizontal alignments.
-
Customize animation: allows you to customize your Display and Dismiss animations, e.g. if you In-app notification appears from the left or top of your user’s device.
-
Message round corner: allows you to add round corner to your In-app notification by changing the Corner radius.
Related topics:
How-to video video
The video below shows how to author and test your In-app messages.