Salesforce Docs Portal

Create a Mobile In-App Message

Create and send a banner, modal, full-screen or push primer message to engage users while they're using your mobile app. The message contains body text and can optionally include a title, an image, buttons, and additional text.

Required Editions

View supported editions.

User Permissions Needed
To create or edit content: Marketing Cloud Manager permission set AND any CMS workspace contributor role
To publish content: Marketing Cloud Manager permission set AND a CMS workspace contributor role of content admin or content manager

An in-app message is a banner, modal, full-screen, or push primer message. A banner message appears at the top or bottom of the user's screen, a modal message partially covers the screen, and a full-screen message completely covers the screen. A push primer message prompts users to turn on push notifications.

Metrics gathered from in-app messages such as in-app sends and in-app displays appear in the Campaign Performance and Marketing Performance Intelligence dashboards.

Recommended Image Dimensions for In-App Messages
In-App Layout Aspect Ratio
Banner 1:1
Modal 16:9, 9:16, 1:1, 3:2, 2:3, 4:3, 3:4, 5:1
Full Screen 16:9, 9:16, 1:1, 3:2, 2:3, 4:3, 3:4, 5:1
Push Primer 16:9, 9:16, 1:1, 3:2, 2:3, 4:3, 3:4, 5:1

Add Content to a Message

  1. On the Content tab, click Add, and then select Content.
  2. From the list of content types, select In-App Message.
  3. Click Create.
  4. Select the orientation for the message.
  5. On the property panel, for Message Type, select Banner, Modal, Full Screen, or Push Primer.
  6. From the Image Layout dropdown, select the aspect ratio for the image in the message. Select No Image if the message doesn't have an image.
  7. On the Content tab, in the Title section, enter the message title. To personalize the title, click Add Merge Field.

    • To insert a value from the recipient’s unified profile, select Unified Individual.

    • To select event data, such as a subscription confirmation or a product from a confirmed order, click Select Event.

    • To select from a curated list of values, such as products purchased, select Data Graph Attribute.

    • If saved expressions are available, select a saved expression, which includes pre-saved criteria for selecting a data graph attribute.

  8. To add text to the message, expand the Text section, and then enter the text. To personalize the message, click Add Merge Field. The options available are the same as those for the title.
  9. To add an image to the message, expand the Media section, and then configure the image.
    You can add a PNG, JPG, or JPEG file.
    1. For Image, select the location where the image is stored.
      If you select a file from CMS or a trusted URL, the image appears in the message preview. You can add a trusted URL in Setup.
    2. For Alt Image, enter the name of an alternative image from the SDK bundle. This image is displayed if the original image fails to load.
    3. For Alt Text, enter the text to show if the original image fails to load and the alternative image isn't found.
  10. To add buttons to the message, expand the Actions section, and then configure your buttons.
    1. Click Add Button.
    2. For Label, enter the text that appears on the button.
    3. For Action, select the action that occurs when a user taps the button. Dismiss Message closes the message, Go to Web URL opens a web page URL, Open Page in App opens a page in your app, Open Device Settings opens the user’s device settings, and Open Location Settings opens the user’s location settings. For a push primer message, Turn On Push Notifications prompts users to enable push notifications.
    4. If you selected the Go to Web URL action, enter the destination URL for a web page.
    5. If you selected the Open Page in App action, enter the destination URLs for Android and iOS.
    6. Repeat these steps for each button you want to include. A message can include up to two buttons.
  11. To add more text to a modal, full-screen, or push primer message, expand the Additional Text section, and then configure the text. This text appears after the main message.
    1. For Display Text, enter the additional text for the message. Optionally, enclose some or all the text in double angle brackets to link it to a specific URL.
    2. Enter the URL for the linked text.

To make an in-app message available to include in a flow, publish it. You can’t activate a flow that contains an in-app message until the message is published.

Customize Layout and Style

You can also control the position, layout, and style of each message on the Style tab.

For color options, choose one from the dropdown or enter a hex code. For font options, use your brand’s font to match the app’s style. The selected font displays on users’ devices if it’s bundled in the app, else the system font is used.

  1. To customize the message layout, expand Settings, and then configure the layout.
    1. For a banner message, choose whether you want the message to appear at the top or bottom of the screen. For a modal, full-screen, or push primer message, choose whether you want the image or title at the top of the message.
    2. Select the color and opacity for the message's overlay and background.
    3. Select the corner radius for the message.
    4. The dismiss icon is enabled by default. To exclude the icon, deselect this option.
      For modal, full-screen, and push primer messages, the dismiss icon can only be removed if you’ve added a dismiss button. Banner messages can be swiped away.
    5. Choose whether you want a border, a shadow, or animation for the message. If you select any of these options, configure their style settings.
  2. To customize the message title, expand Title, and then configure the settings.
    1. Select the font details for the title.
    2. Select the title alignment.
    3. Choose whether you want padding around the title and configure its style settings.
  3. To customize the message text, expand Message, and then configure the settings.
    1. Select the font details for the message.
    2. Select the message text alignment.
    3. Choose whether you want padding around the message and configure its style settings.
  4. To customize the image, expand Media, and then configure the settings.
    1. For a modal, full-screen, or push primer message, choose whether you want an edge-to-edge image that spans the entire width of the message or an inset image that appears within a defined margin.
    2. For a modal, full-screen, or push primer message, if you selected an inset image, choose an inset size to define the margin around the image.
    3. Select the corner radius for the image.
    4. Choose whether you want padding, a border, or a shadow around the image. If you select any of these options, configure their style settings.
  5. To customize the buttons, expand Actions and select a vertical or horizontal layout for the buttons in a push primer message. Then, configure the settings for each button.
    1. Select the font details for the button text.
    2. Select the button color.
    3. Select the corner radius for the button.
    4. Select the button text alignment.
    5. Choose whether you want padding, a border, or a shadow around the button. If you select any of these options, configure their style settings.
      For a push primer message, if the buttons are stacked vertically and you select left or right padding for both of them, the system uses the larger padding value for the buttons. If the buttons are stacked horizontally and you select top or bottom padding for both of them, the system uses the larger padding value for the buttons.
  6. To customize the additional text, expand Additional Text, and then configure the settings.
    1. Select the font details for the message.
    2. Select the color for the linked text.
    3. Choose whether you want padding for the additional text and configure its style settings.
    4. Select the additional text alignment.
  7. Save your work.

Preview an In-App Message Variation

Use a sample recipient to verify an in-app message variation’s content, personalization, language, links, buttons, and layout before sending it. You can preview an in-app message in any status. Save your changes so that the preview includes your latest edits.

  1. Publish at least one segment.
  2. In the message editor, click Preview.
  3. For Preview Source, select Segment (Unified Individual), and select a published segment and a sample recipient.
  4. To provide preview data, complete the field that appears for your message.
    Field Action
    Content Variables Enter the values to use in the preview.
    • To edit the values as JSON, click View JSON.
    • To return to the standard fields, click View Editor.
    Apex Input Edit the JSON to provide values for the Apex inputs used in the message.
    Event Enter values for the event data used in the message.
  5. To preview the message in another language, select a language.
  6. Click Preview.

To preview another variation, change the sample recipient and values.

Test an In-App Message Before Publishing

Send an in-app message to up to five test recipients to verify its merge fields, media, links, buttons, and layout.

  1. Make sure that a sender app is available in Salesforce Setup.
  2. In the preview window, go to the Test tab.
  3. Select the sender app to send the message from.
  4. Enter up to five individual IDs, separated by commas.
  5. Click Send.
  6. For each recipient, verify that the message appears as expected and test the links, buttons, and close action.
  7. When the message is ready to use in a campaign, click Publish Now or click Schedule Publish.