In-App Messages are a great way to extend the capabilities of your mobile app and further delight and engage users through relevant content. 

The Blueshift In-App studio provides an easy-to-use interface for creating engaging in-app content. Once an in-app message has been created, it can be used in the campaign journey editor along with content for other channels like email, push, SMS, cloud apps etc. to execute a multi-channel engagement strategy. 

Note: You will need the latest Blueshift SDK (click here for iOS, and click here for Android) in order to leverage this feature in your app. 

The In-App studio has 4 menu options:

  1. General
  2. Template
  3. Recommendations
  4. External fetch



Here you define the name of the template and configure where in the app you’d like the message to show up. You can also organize your template using tags (optional). 



For your in-app message, you have the option to choose from 4 different template types:


  1. Slide In:  Slide In in templates are small banners that slide across the top or bottom of the screen. They can contain an image or a badge.  These are ideal for showing a short promotional message (e.g. a promo code).
  2. Modal: Modal templates pop-up in the center of the screen. They can contain one or two buttons with custom actions.  These are ideal for getting consent from the user for high value actions (e.g. opting in for push notifications).
  3. Custom HTML: Custom Html templates are useful for pixel perfect rendering of your message. These messages can occupy the whole screen or a part of it. As you update the content in a template, a preview of the message will be shown on the left.

  4. Visual Editor: The visual editor can be used for building custom full screen messages.

 As you update the content in a template, a preview of the message will be shown on the left.


Slide In 

The slide in template allows you to construct a banner style in app message. You can configure the banner’s position and slide in direction. You also have the choice of adding an image or a custom badge which will appear on the left side of the slide in message. In addition, you can specify an offset for the message.

Based on the position of the slide in message, you can choose its offset. For example, if you specify the bottom position for the slide-in message, you can specify the left, right, and bottom margins. The number of pixels that you specify in these fields determines the offset of the message from the margins of the device's display.


To use a badge instead of an image, select the badge option. You can pick one of the preconfigured badge icons or input a unicode from the 600+ icons in the library. 



The modal template contains a title, message, and up to two buttons. Use the action fields to configure the on click actions for each button. In addition, you can specify the height and width of the message box that appears. You can also specify a background image for the modals instead of a solid background. Ensure that you use the sizing options to adjust the image so that it fits the message window.  




Visual templates allow you to visually construct a custom full screen in-app message. Use the content tab in the editor to drag in different types of content block, such as text,  images, and buttons. You can also customize the height and width of the template.


Custom HTML

Create your own custom message template (for example a carousel of product recommendations) using HTML and customize its height and width.



You can choose to personalize the in-app message for the user by including a recommendation algorithm (optional). You can include recommendation data in any of the text fields using Liquid. You can preview the recommendation content on the left pane by selecting a preview user.


You can also see predictive scores and affinities that are associated with a customer's profile. You can use such values to include or exclude recommendations from the in-app message that your customers receive. Predictive attributes are available under user_metrics.


Liquid Examples

 Use liquid values in a slide-in banner.


Preview of slide-in banner with liquid content.


External Fetch

In-App Studio has built-in support for external fetch. You can include one or more external fetch creatives, each of which calls a unique API endpoint. You can then use the content returned by your API endpoint(s) in your in-app messages using Liquid.


For more info about how external fetch works, please refer to this doc.

Clicks and dismiss actions

You can use the blueshift://dismiss URL to define a custom dismiss action for an in-app message. A user click action to dismiss the message is tracked separately from other click actions.

The following default dismiss actions rendered by the SDK are also tracked as dismiss actions:

  • Clicking the default close button on modals, HTML, and Visual Editor Templates.
  • Swiping to dismiss slide-in banners.
  • Tapping outside to dismiss slide-in banners.
  • Clicking back button to dismiss message (for Android devices).
  • When URL = empty/NULL.

Note: If an action is not defined as a dismiss action, the user click for that action is tracked as a click in the Campaign Metrics.

Image Size

In Blueshift Mobile SDKs, we use images in both push and in-app messages on various templates. The SDK is responsible for downloading and displaying the image. To make this a good experience for your customer, we recommend that you use optimized images. The rule of thumb is to keep the image size as low as possible without compromising the clarity. Anything less than 100 KBs is highly recommended. 

You can take a look at the following recommendations that could improve the user experience when image based templates are displayed using Blueshift's mobile SDKs.

Slide In

We use images in slide-in messages to display icons. Use small square icon images to have a better experience on both Android and iOS.


In modal, we use the images in two places.

  1. As the banner image
  2. As the background image



In-app Notification type

Aspect Ratio(W:H)

Recommended resolution

Recommended size

Image formats


Banner image



Less than 512KB



Background image



Less than 512KB



Banner image



Less than 512KB



Background image



Less than 512KB


Banner Image

Banner image is the image displayed above the text fields. This has an aspect ratio of 2:1 for both Android and iOS.

android_in_app.png    iOS_in_app.png

                 Android                                          iOS

Background Image

Background image is used as a background for the entire modal view. The aspect ratio depends on the template size that you specify while creating the modal for both Android and iOS. The image also needs to be optimized to have minimal file size with good resolution to have a great experience. 

bg_image_android.png    bg_image_ios.png

                Android                                        iOS

To compress images without losing their quality, you can use services like

To see examples of ideal images, check this link:


The image must be optimized to render quickly in a webview. The size depends on the size of template & the image view used.

Was this article helpful?
0 out of 0 found this helpful



Please sign in to leave a comment.