In-App Studio

Overview

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

 

General

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). 

template.png

Template

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


in-app-templates.png

  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. ModalModal 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 HTMLCustom 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 EditorThe 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. 



Slide-in_Full_Screen.png

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 fontawesome.com library. 



Slide-In_Zoom_In.png

Modal

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.  


in-app_modals.png

 

Visual

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_height_width_visual_editor.png

Custom HTML

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



custom_html_custom_height_width.png

Recommendations

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.


Recommendation.png

Liquid Examples

 Use liquid values in a slide-in banner.

Reco_Liquid.png

Preview of slide-in banner with liquid content.

Reco_Preview.png

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.

Ext_Fetch.png

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

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.

Modal

In modal, we use the images in two places.

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

 

OS

In-app Notification type

Aspect Ratio(W:H)

Recommended resolution

Recommended size

Image formats

Android 

Banner image

2:1

512x256

Less than 512KB

PNG, JPG

Android

Background image

1:1

512x512

Less than 512KB

PNG, JPG

iOS

Banner image

2:1

512x256

Less than 512KB

PNG, JPG

iOS

Background image

1:1

512x512

Less than 512KB

PNG, JPG


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 https://tinyjpg.com/.

To see examples of ideal images, check this link: https://picsum.photos/400/200.

HTML

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