Last modified March 1, 2022 by Shelly Wolfe

In-app messages

Our redesigned, streamlined campaign workflow is now available for 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.

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

In-app message personalization

Swrve supports personalizing button text, image URLs, and custom engagement actions in your in-app message campaigns as of the following SDK versions: iOS 7.0.0, Android 8.0.0, Unity 8.0.0, and React Native 2.0.0. If you include text buttons, image URLs, or personalized custom actions 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.

Multi-line text box styling

We’ve added support for multi-line text styling as of the following Swrve SDK versions: iOS 7.4.0, Android 9.2.0, Unity 8.3.0, and React Native 3.1.0. If you include a text box 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 SmartTV SDKs.

In-app pages

We’ve added support for multiple pages as of the following SDK versions: iOS 7.5.0, Android 9.4.0, Unity 8.4.0, and React Native 3.2.0. If you include multiple pages 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 SmartTV SDKs.

Alt text

We’ve added support for alternative text as of the following SDK versions: iOS 7.5.0, Android 9.4.0, React Native 3.2.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 an in-app message campaign

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

Set up your campaign

  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 what 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:


In-app message content

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.

Select 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 Landscape, Portrait, or Both.
  3. Select the message template. The available templates depend on your device type and platform selections.
    Choose template screen with options for selecting the template orientation, background and number of buttons
    By default, Swrve supplies three templates for each orientation:

    • No Buttons – Configure a single background image and its associated action (for example, dismiss, deeplink).
    • One Button – Configure a background image, a single on-screen button, and the associated actions for both.
    • Two Buttons – Configure a background image, two on-screen buttons, and the associated actions for each.

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 customer success manager who will update your profile with additional templates for targeting specific devices.

Add message content

The sections that display in the Content editor depend on the template you selected. Your in-app message campaign is made up of a background image and one or more types of content. While your campaign must always include a background image, you can choose the number of buttons and and content type of each of your buttons.

Background

Every template requires a background image. To help you use a single piece of artwork across all platforms and devices, the Background 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.
    Upload background image or select URL
  2. Check 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.
    background image resolution warning
  3. Optionally, edit the image position by either manually moving the image in the device preview or by entering the number of pixels by which you want to move the image in the Position 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.

Option 2: Enter image URL

  1. To add a dynamic image, select URL and enter the image link.
  2. 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.
    Add width and height parameters to image URL using the insert image size property button
  3. 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}
  4. Once you’ve entered your image URL, select Add URL.
  5. In the Size boxes, enter the container height and width values for your dynamic image to fit inside.
  6. Optionally, edit the image position by either manually moving the image in the device preview or by entering the number of pixels by which you want to move the image in the Position 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.
  7. 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.
The Swrve SDKs scale down images with height and width values exceeding the container’s height and width, so that the downloaded image fits within the image container you defined when creating the campaign. While not required, optimizing images using dynamic fields can help reduce the size of the images downloaded and stored on lower resolution devices.

Add alternative text

Add a static or dynamic alt text value to be read aloud when a user selects the background image (if the user has enabled VoiceOver (iOS) or TalkBack (Android) on their device).

Background image with alt text

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

Select the 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 the 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.

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

Add an alt text value to be read aloud when a user selects the image button (if the user has enabled VoiceOver (iOS) or TalkBack (Android) on their device).

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

The button text value is read aloud when a user selects the text button (if the user has enabled VoiceOver (iOS) or TalkBack (Android) on their device).

Element position

Optionally, edit the position of an element by either manually moving the content in the device preview or by entering the number of pixels by which you want to move the content in the Position boxes. For example, if you enter 5 in the X box and 10 in the Y box, the content moves 5 pixels to the right and 10 pixels down from the center.

Update button position using the X and Y fields or by dragging and dropping the button on the preview device

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 (New!)

Use Pages to design multi-step flows for users within a single in-app message campaign! Pages allow you 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.

Adding Pages

Create a multipage campaign by adding pages to your first variant.

  1. Add a new page to your campaign using one of the following methods:
    • Use the Pages(+) tab to add an unlinked page to your campaign.
    • Set one of your button actions to Create and link new page. This option creates the page and automatically links that button to that page.
  2. Choose a template for the new page. Only templates that are compatible with the variant’s original template are available for selection.
  3. Set the navigation type for your multipage campaign:
    • Button click – Users can only navigate between pages by clicking on buttons; you are responsible for ensuring that every page is connected to at least one button from another page.
    • Swipe & button click – Users can navigate between pages via swipe. Additionally, you can configure button actions to direct users to specific pages (for example, a button on Page 1 could open Page 3, skipping Page 2).
  4. Add subsequent pages selecting (+) from the pages menu. Set page navigation type and add pages.

If you intend to localize or A/B test your campaign, Swrve recommends 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

To change the template of a specific page, select Change. As previously mentioned, only templates that are compatible with the variant’s original template are available.

To change the variant’s template, select Change template. Note that this will remove all content, including all the pages you’ve configured for that variant.

Change variant or page template.

Linear & 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.

The campaigns with the Button click navigation type do not support swiping between pages. Therefore the linear sequence is unenforced and different paths can be created based on the button a user clicks.

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, as well as the deeplink and copy to clipboard actions.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.


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