Last modified November 24, 2022 by Shelly Wolfe

In-app messages

Create, customize, and deliver a localized, A/B tested in-app message to one or all of your platforms in a single campaign. Now includes support for multi-page messages, custom text styles, and animated GIF images!

Swrve’s streamlined campaign workflow gives you several options to create and manage your in-app message campaigns. It supports creating in-app messages using a combination of images and text, as well as the ability to personalize text and call-to-actions.


Prerequisites

Platform-specific delivery

To deliver platform-specific in-app messages, your development team must integrate the latest Swrve SDK. For more details, see the relevant integration guide.

  • Android – supports Android, Android TV, Amazon, Amazon Fire TV, and Huawei
  • iOS – supports iOS and tvOS
  • Unity
  • Roku
  • SmartTV – supports Tizen and webOS

SDK version support for new in-app features

The following table details the SDK version levels required for various features of in-app messages. If you include these features in your campaign content, the campaign does not display on devices running older versions of the supported SDKs, or on any devices running the Cordova, Roku, or Smart TV SDKs.

Feature Description iOS Android Unity React Native
Log supplementary data Capture supplementary data about the interaction by sending an event or updating a user property when the user engages with the campaign. 8.4.0 10.7.0  Coming soon 4.0.0
Message center Localize and A/B test your message center details and set a priority for your campaigns directly in the in-app message campaign builder. 8.1.0+ 10.2.0+ 9.0.0+ 4.0.0+
Animated images (GIF) Include animated content as your background and button images using GIF as the media (or MIME) type. 8.0.0 10.1.0 N/A 3.3.0
Pages Create multi-page campaigns that users navigate in either a linear manner through swiping or a non-linear flow with button clicks. 7.5.0 9.4.0 8.4.0 3.2.0
Alt text* Add alternative text to images and single-line text buttons for accessibility purposes. 7.5.0 9.4.0 N/A 3.2.0
Multi-line text box styling Apply custom or saved styles to multi-line text. 7.4.0 9.2.0 8.3.0 3.1.0
Message personalization Personalize button text, image URLs, and custom engagement actions. 7.0.0 8.0.0 8.0.0 2.0.0

*If you include alt text in your campaign content, the campaign still displays on devices running older versions of the supported SDKs and on any devices running the Cordova, Roku, or SmartTV SDKs, but the alt text is ignored.


Create a new campaign

The first steps for setting up an in-app message are the same as other channels, with a few extra actions.

  1. To create a new campaign from your Campaigns center, select Create campaign.
  2. On the Choose your marketing channel screen, select In-app message.
    channel selector
  3. To deliver in-app message campaigns to a specific platform (for example, if your campaign’s content is not relevant to all platforms), select the specific Platform from the options. The default is All platforms.
    Note: Platform delivery only applies if your app supports multiple platforms.
  4. To deliver in-app message campaigns to a specific device type (for example, if the content structure is different between TV and mobile), select a Device type from the options of Mobile and TV. The default is All device types.
    Note: Device type delivery only applies if your app supports multiple device types.
  5. To continue to the Campaign overview screen, select Continue.
  6. Enter the Campaign name, Description, and Tags, then select Save to go to the campaign builder.

The blocks on the campaign screen guide you through building your campaign. While there is no specific order to how you build your campaign, you must complete Content and Schedule before you can test and activate your campaign.

In-app message campaign builder

To update your platform and device type selections while your campaign is in Draft, select Channel. In some instances, changing the platform and device type might reset your campaign content, as the selection determines which templates are available to use.

The rest of this article mainly focuses on how to add campaign content and personalize single-line text and custom actions. To learn how to create your target audience, set your campaign display triggers, and schedule your campaign, see the following:


Building an in-app message

To add or edit your in-app message content from the campaign build screen, on the Content block, select add + or edit . There are two main parts to adding your content—selecting your message template and then adding the appropriate content. The following sections cover these steps in more detail.


Message templates

The message template dictates the type of content you can include in your campaign. By default, Swrve supplies three templates for each orientation. If you require additional templates, contact your CSM at support@swrve.com.

The default templates are:

  • No Buttons – Contains only background content and an associated action (for example, dismiss, deeplink).
  • One Button – Contains background media, a single on-screen button, and the associated actions for both.
  • Two Buttons – Contains background media, two on-screen buttons, and the associated actions for each.

To select your message template:

  1. From the Campaigns builder, select the Content block.
  2. In the Choose a template dialog, select the template orientation. The options are Portrait, Landscape, or Both.
  3. The available templates depend on your device type and platform selections. Select the template you want to use, whether for a single page or multi-page message, and then select Continue to proceed to the content editor.
    The Choose a template window has three large buttons at the top that let you select the template orientation - portrait, landscape, or both. Below that are two tabs that display all the templates available for your app, whether single page, or multipage. At the bottom of the window, there is a grey Cancel button and a green Continue button that is available after you select your template.

To change your template, on the Content screen, select Change template. Changing your template resets any previously added content.

If you are interested in displaying different artwork on tablets versus phones (for example, iPad versus iPhone), contact your CSM who will update your profile with additional templates for targeting specific devices.

Message content

The sections that display in the Content editor depend on the template you select. Your in-app message campaign is made up of a background and one or more types of content. While the message template must always include background media, the number of buttons and button content type is configurable.

Background

Every template requires background content. Swrve supports using both static and animated images (GIFs) as the media type.

Media type: Image

To help you use a single piece of artwork across all platforms and devices, the Background Image section displays two dimensions: the recommended size of the image you want to upload and the safe zone resolution. Swrve automatically resizes uploaded images for all devices. For more information about image guidelines, including sample images you can download for reference, see In-app messaging best practices.

There are two options for adding a background image:

  • Upload a static image file.
  • Enter the image URL and, if required, include user properties to personalize the content.

Option 1: Upload an image file

  1. To add an image for your message background, drag the image you want to use to the Upload file area or select choose file to upload a local file.
    The background image tab has two options for adding an image: one to upload an image and another to enter the URL
  2. Check the device preview to ensure the uploaded image adheres to the resolution requirements and that all important aspects of the image fit within the safe zone dimensions. A warning displays if the uploaded image resolution doesn’t match the template’s recommended resolution.
    A warning message displays because the image resolution is smaller than the recommended size. Below the uploader, two position boxes let you set the X and Y coordinates.

Option 2: Enter image URL

  1. To add an image URL, select URL and enter the relevant link.
  2. Once you’ve entered your image URL, select Add URL.

Media type: Animated image (GIF)

Add a video or animated image using GIF format, with the MIME type of image/gif and hosted on an HTTPS server. Swrve automatically downloads the content to your users’ devices and if the asset fails to download, the fallback image is used instead. If no fallback image is available, the in-app message is not displayed.

To optimize performance, we recommend keeping the file size to less than 2MB. Similarly, avoid using multiple GIFs in the same message or across multiple pages

The Background GIF tab displays a box labelled URL, where you enter the GIF URL. You also have the option to include dynamic size properties or custom properties.

To use a GIF as your background:

  1. Select GIF and in the URL box, enter the relevant link.
  2. Once you’ve entered your image URL, select Add URL.

Dynamic URL properties

If your image URL supports height and width parameters, to insert image size properties in place of the respective URL references, select Insert image size property. Select the relevant width or height property and then select Insert.

The insert image size property icon is a blue ruler with an arrow pointing up and down. Select it to insert dynamic image height and width properties.

Alternatively, if you manage your image URL outside of Swrve, include the image size properties using the following syntax: ${container_height} and ${container_width}

For example: https://37ggntsu.mi-msg.com/p/rp/d281e6e5d92eab36.png?height=${container_height}&width=${container_width}

Optional image size, position, and fallback

Once you add an image or GIF URL, you have the option to manually set the size, position, or fallback image.

Manually set the width and height or X and Y position with the boxes provided. Below them is the Fallback image link, where you can upload a fallback image.

  • Size – Enter the container width and height values for your image to fit inside. The Swrve SDKs scale down images with height and width values exceeding the container’s height and width, so the downloaded image fits within the image container you defined when creating the campaign. While not required, to help reduce the size of the images downloaded and stored on lower resolution devices, use dynamic URL properties to optimize images with dynamic size fields (see above).
  • Position – Manually edit the image position by either moving the image in the device preview or by entering the number of pixels by which you want to move the image in the X and Y boxes. For example, if you enter 5 in the X box and 10 in the Y box, the image moves 5 pixels to the right and 10 pixels down from the center.
  • Image fallback – To specify a fallback image if the image cannot be downloaded from the URL, select Fallback image and upload an image file. Swrve automatically resizes fallback images for all devices, so they don’t need to match the size of the image URL container.

Alternative text

To add static or dynamic content that’s read aloud when a user selects the background image or an image button (that is, if the user has enabled accessibility settings on their device), enter the text in the Alt text box.

The Alt text box displays under the image uploader and position boxes and contains the text as user has entered to describe the image they uploaded above.

Unity apps do not support text-to-speech or equivalent accessibility functions.

Background action

To include an engagement action for the background image, select an action from the Action list. No action is selected by default. However, Swrve requires that at least the background or one button has an action, even if that action is Dismiss. The available actions are:

  • Dismiss – Dismisses the message.
  • Deeplink – Directs the user to a particular custom location; for example, you might configure the action to direct a user to a specific website or section of your app. Coordinate with your development team to determine your app’s deeplink URL scheme.
  • Copy to clipboard – Copies the action content to the user’s device clipboard. For example, you might provide a coupon code that the user can copy and apply later when making a purchase.
  • Request Permission (iOS only) – Prompts the user to authorize permission for the selected capability and then triggers the related system permission prompt. The available permissions are push notifications, location, camera, photos, and contacts.
The Request Permission action only applies to iOS apps, so the action type is only available when the campaign’s target device type and platform are set to Mobile and Apple.

Additional data

In addition to selecting an action, use the following options to log supplementary data when the user engages with the campaign:

  • Send custom event – Triggers a custom event for the user. Include up to five payload key/values, personalizable with realtime user properties. For example, you might send an in-app message that includes a question with each button providing a possible answer tracked as a unique event or payload value.
  • Update user profile – Updates the value of a user property. For example, you might assign a unique user property value to each button, then target users based on their selection.

Under the On click Action selector there's two toggle buttons for sending a custom event or updating a user property when the user clicks the button


Buttons and text

Depending on the template you selected, include additional content with your message, such as buttons or text. To add buttons or text to your message, select + Add content and then select the content type.

Text

Add one or more lines of static or dynamic text that displays inside a text box and use the options available to set the text style and overflow behavior. There are two options for configuring the text styling for a text element:

  • Apply a saved text style (for information on creating saved text styles, see Intro to in-app messages). After you select a saved text style, you have the option to also configure the horizontal alignment of the text and the text box’s padding.
  • Create a new custom text style: Set the text style to Custom text style, then set the styling for the text and text box by selecting the:
    • Font family, style, size, color, and opacity
    • Background color and opacity (optional)
    • Line height
    • Horizontal alignment
    • Padding

Paste text into text element's text field, then set text element's font, font size, font color, background text color, and padding.

Note: To support full accessibility on a variety of devices, text box elements do not contain an action. Therefore, ensure your content includes an additional image button or text button if you want to include a call-to-action element in your message.

Image button

Upload an image file as the button or select URL to enter a personalized image link using realtime user properties.

Add content, set content type to button, and upload button image

Text button

Enter static or dynamic text that displays inside a button container.

Input single line text and set container size using height and width fields

For users who have accessibility settings enabled on their device, the device reads the button text value as the alt text. If you want to include custom alt text, select Add custom alt text and enter the text in the Alt text box.

Engagement action

To include an engagement action for text and image buttons, select an action from the Action list. If you did not select an action for your background image, then you must specify an action for at least one of your buttons.


Pages

Design multi-step flows for users within a single in-app message campaign with our in-app Pages. Use Pages to execute a wide variety of use cases, including:

  • Onboarding – Educate new users about the key features of your app.
  • Promotions – Highlight multiple relevant products that users can easily browse through.
  • Requesting device permissions – Inform customers of the multiple benefits of device permissions before asking them to opt-in.

Create a multi-page campaign

To create a multi-page campaign, start by adding pages to your first message variant.

  1. Depending on the type of page flow you want to use, there are two options for adding a new page to your campaign:
    • To add an unlinked page, in the header section, select Pages.
      Content screen header with options to change the template or add pages, languages and variants.
    • To link a page to a specific button, select Create and link new page as the button Action. This option creates a new page and automatically links the button to that page.
      The button Action dropdown list. Create and link new page is the last item in the list.
  2. Choose a template for the new page. Only templates that are compatible with the variant’s original template are available for selection.
  3. Select the navigation type for your multi-page campaign:
    Set page navigation type and add pages.
  • Button click – Users click specific buttons to navigate between pages.
    Note: You must ensure every page is linked to at least one button from another page.
  • Swipe & button click – Users swipe right or left to navigate between pages. Additionally, you still have the option to configure button actions that direct users to specific pages (for example, a button on Page 1 could go to Page 3, skipping Page 2).
  • To add more pages, select add + next to the most recent page.

If you intend to localize or A/B test your campaign, we recommend creating all the pages before creating additional language and test variants. With this approach, pages are copied to the new variants, removing the need to add pages to each variant individually.

Swiping is not supported on TV devices or apps using Swrve’s Unity SDK. If your app uses the Unity SDK or if your campaign targets TV devices, set the page navigation type to Button click.

Change page template

You have the option to change the page template at both the variant and single-page level.

Change variant or page template.

  • To change the template of a specific page, select the content for that page and then select Change. As previously mentioned, only templates that are compatible with the variant’s original template are available.
  • To change the variant’s template, in the header section select Change template.
Changing the variant-level template removes all content, including all the pages you’ve configured for that variant.

Linear and non-linear sequences

Depending on the Navigation type you selected, you have the option to create linear and non-linear flows.

Linear sequence

Variants that have the navigation type set to Swipe & button click always follow a linear sequence. That is, users can navigate back and forth between the pages in the order in which the pages were created: Page 1 ←→   Page 2 ←→ Page 3 .

In-app messages with a linear only sequence of pages.

Non-linear sequence

You have full control over the order that customers navigate through pages if the variant’s navigation pane is set to Button click.

For example, your first page may have two buttons, where Button 1 directs the user to Page 2, and Button 2 directs the user to Page 3.

Campaigns with Button click navigation do not support swiping between pages. Therefore a linear sequence is not enforced and a user can follow different paths depending on the button they click.

In-app message campaign example with multiple pages in a non-linear sequence.


Preview message content

As you add your content, it displays in the device preview on the right side of the editor. To preview the content on a specific device or orientation, select an option from the device list and select the orientation icon. To include or hide the image safe zone in your preview (that is, the portion of the image that always displays after automatic resizing, regardless of the platform device), select the Safe Zones toggle.

Select the preview device from the devices list, and toggle the safe zone setting

The device preview and orientation automatically update to reflect the content you are currently editing. For example, if you upload an image for the landscape format, the device preview automatically changes to show the landscape orientation.

Landscape image uploaded and device preview orientation is updated from portrait to landscape, automatically


Personalized content and actions

Use Swrve’s real-time user properties to include dynamic, personalized content in your in-app message—for example, the customer’s favorite sports team, game character, or movie genre. Swrve supports personalization of the image URL and text values, deeplink and copy to clipboard actions, and message center details.Personalizing single line text with real time user property value. Setting personalization fallback value, which is displayed in the preview device

For more information on how to personalize your campaign content, see Campaign personalization.


Localize and A/B test your content

One of the most exciting features of our streamlined campaign flow is the ability to localize and A/B test your campaign content within a single, unified campaign. Use the Languages and Variant tabs to create localized versions of your content or create variations of your content to test for best conversion and engagement.

Add multiple languages or variants to your content

For more information on how to localize and A/B test your campaign content, see Localizing and A/B testing campaign content.


Message center

To display information about the in-app campaign in your app’s message center, set the parameter values returned by Swrve’s Message Center API. The available parameters are:

  • Subject – The message center’s subject.
  • Description – The message center’s description.
  • Thumbnail – Upload or provide the image URL to display in the message center (this corresponds to the image parameter in the Message Center API). If you provide an image URL, you also have the option to upload a fallback image.
  • Alt text – Optionally, provide an alt text value to be read aloud to end users, depending on the device accessibility settings.

For more information on using the Message Center API, see Swrve Message Center API.


Test your campaign

To test the in-app message campaign on a physical device, first ensure your device is set up on the QA devices screen. For more information, see Testing triggered campaigns.


Next steps