Overview

With In-App messaging, you can engage your app users in real-time, as they interact with your app. Whether it’s prompting someone to go back to an abandoned cart, or letting them know of a limited-time promotion, in-app messages come with a range of use cases that can drive increased app engagement, particularly when combined with email or mobile push as part of a multichannel marketing campaigns.

In addition, Optimove’s native Inbox feature enables you to store these in-app messages in an app inbox. These can be used based on real-time triggers, or scheduled, where rather than presenting a message within the app itself, you can instead add a message to their inbox. These are ideal for messages that you’d like your customer to be able to revisit again in the future, rather than a one-time momentary promotion.

How to Create an In-App Message Template

Before getting started, you need to give your template a name to identify the template when setting up an In-App campaign. 

In-App Message Template Content

First, you need to decide how to define the overall look and feel of the template for your in-app message.

Frame

The frame type controls the size and layout of the in-app message. 

First of all, you can choose between Full Screen, Inset, or Alert by selecting the choice from the panel on the right. 

You can also choose whether the components within your in-app message should be vertically aligned to the top, middle, or bottom and the position of the close button (top-right, top-left, or none at all if another close button is being added).

Colors

You can change the background color, or the foreground color used for text (this can be changed per individual sections too). Click on the color picker to choose your color settings. 

Background

For the background of your in-app message, you have three options:

1. Image
2. Video
3. Gradient

Image

To add a background image, click "Choose" to open your Media Library. Here, you can upload a new image, select an image you have previously uploaded, or search the Unsplash stock image library.

To upload a new image, click the upload button. Select the file from your computer and add any relevant tags to help you find the image later. Click "Upload" to add the image to your media library and use this as the background image for your template.

To use an image you have previously uploaded, simply select the image from your media library.

To use an image from the Unsplash stock image library, click the "Stock" tab and enter one or more keywords in the search box. Select your image from the results, add it to your media library, and use it as the background image for your template.

To clear the background image of your in-app template, click the bin icon.

Video

Alternatively, to add a background video, click "Choose" to open your Media Library. Here, you can upload a new video or select a video you have previously uploaded.

To upload a new video, click the upload button. Select the file from your computer and add any relevant tags to help you find the video later. Click "Upload" to add the video to your media library and use this as the background video for your template. 

To use a video you have previously uploaded, simply select the video from your media library.

To clear the background video of your in-app message, click the bin icon.

Gradient

You can also apply a gradient over the background color or image. Select the Top and Bottom colors for the gradient using the color picker. If you are applying the gradient over a background image, you may want to adjust the alpha of the colors to aid the readability of any content you add. Using the sliders, you can then adjust the blend of the gradient. 

Default Fonts

You can also set default global fonts that will be applied to your components as they are added to the in-app template. This includes the Font Color, the Text font, the Heading font, and the Subheading font. 

To change the Font Color, simply use the color picker. 

To update any of the default Fonts, select them from the dropdown.

Please note:

If you would like to use a font, but don’t see it in the dropdown, please reach out to your Customer Success Manager to see if it can be added. 

Adding Sections

Once you’ve defined the default settings for your in-app message, you can build up the content of your template by adding one or more sections. Sections can be Headings, Subheadings, Text, Images, Videos, or Buttons and will be added in order according to the vertical alignment of the Frame.

To add a section, click the "+" icon and select the type of section you want to add.

To remove a section, select it and then click the bin icon in the selection pane on the right-hand side.

When you’ve finished adding your sections, click Save and go ahead with setting up your next in-app campaign.

Headings, Subheadings, and Text

To add a Heading, Subheading, or Text to your in-app message, click the "+" icon, select the type of section you want to add, and type in the section box.

In the right-hand selection pane, you can change the order of the sections, the alignment, font, and font size using the appropriate controls. You can also add padding around the text by adjusting the spacing of sliders.

Images

To add an image, click the "+" icon and select the image, either by uploading a new image to your media library, using an existing image, or browsing the stock images from Unsplash.  

In the right-hand selection pane, you can change the order of the sections, change or replace the image, and add padding around the image by adjusting the spacing of the sliders.

Videos

To add a video, click the "+" icon and select the video, either by uploading a new video to your media library or by using an existing video.  

In the right-hand selection pane, you can change the order of the sections, change or replace the video, and add padding around the video by adjusting the spacing of sliders. You can also set the video to loop or autoplay when the customer opens the in-app message.

Buttons

To add a button, click the "+" icon and select the button.

In the right-hand selection pane, you can change many aspects of the button.

1. The order of the sections
2. The desired button action, like Close Button, Open URL, Deep Link  
3. The button style, including the shape, alignment, width, elevation, border color, and border size
4. The background, whether that’s a solid color or a gradient
5. The text alignment, color, size, and font
6. The padding around the button 

Settings

Lastly, you should define how your in-app message is presented to the customer, and whether they should be able to revisit the message as an Inbox message, or simply receive it in real-time once. 

Show Message

You can define when the customer will see your in-app message, either:

1. Next app open: The message will be shown the next time the app is opened

2. Immediately, if the app is open: To deliver a message to a user's device immediately, the system sends a silent push notification. This 'wakes up' the app and instructs it to display the in-app message in real-time.

   • Requirement: For this to work, the user must have opted in to push notifications, providing your app with a valid push token.

   • Fallback: If a user is not opted-in to push, this delivery method is not possible. In this case, the message will be queued and displayed the next time they open the app.

3. Push/Inbox only: The message will be shown only when the customer has tapped a mobile push or Inbox message

You can also set an expiry date, for example, 2 hours or 14 days, to define how long the in-app message should be available. 

Send a Push Notification

If you also want to send a push notification to users who have subscribed to push notifications that a new in-app message is available, click the 'Send a Push Notification' toggle and enter an appropriate title and subject.

Inbox

To easily turn your in-app message into an Inbox message, simply toggle the Inbox option to on.

From here, you can add a Title for your message (which will act as a Message Subject in your in-app inbox), add an image, and define how long the Inbox message should be visible. Options for the latter include Always, Between (between 2 dates/times), From (after a specific date/time), and To (until a specific date/time). 

Include JSON Data Payload

As with push notifications you can also pass through a JSON payload with in-app messages.

Simply click to toggle this option and insert the desired JSON to be sent with the message.