The In-app message content is defined in the Content tab in the In-app studio. As you update the content in a template, a preview of the message is displayed.

For your in-app message, you can select from the following 4 different template types.

Slide In These messages 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).
Modal Modal messages 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).
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. 
Visual Editor Use the visual editor to build rich custom full screen messages.

Slide In 

Use the Slide In template to construct a banner style in-app message. You can configure the layout, content, and other settings for a slide-in banner message.

inapp_slidein_minimized.png

Layout

  • Configure the banner’s position on the screen.
  • Specify whether the banner background should have rounded corners.
  • Based on the position of the message, you can specify its offset from the screen edges. 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.

inapp_slidein_layout.png

Content

  • Specify the text message for the banner.
  • Specify the text color and banner background color.
  • Specify any action that is to be taken when the user clicks the banner message.
  • Add an image or a custom badge. The image or badge will appear on the left side of the message. You can select one of the preconfigured badge icons or specify a unicode for one of the 600+ icons in the fontawesome.com library.

inapp_slidein_content.png

Other Settings

Specify whether the slide-in banner message should be obtrusive or unobtrusive.

  • If the message is obtrusive (default), users must first interact with the banner message (click or dismiss) before they can continue using the app.
  • If the message is unobtrusive, users can continue interacting with the app while the banner message is displayed.
    • To display unobtrusive messages on devices, your app must use Blueshift's iOS SDK version 2.1.0 and above or Blueshift's Android SDK version 3.2.8 and above.

inapp_slidein_othersettings.png

Modal

A modal message pops-up in the center of the screen. The modal template contains a title, message, and up to two buttons. You can configure the background, text, action buttons, and the close button for a model message.

inapp_modal_allsections.png

Background

  • Specify the height and width of the message box that appears. 
  • Specify whether the background should have rounded corners.
  • Specify the background color.
  • 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.

inapp_modal_background.png

Content

  • Specify the title and the text for the modal.
  • Specify the color for the title and the text.

inapp_modal_content.png

Close Button

Add a button to close the message.

  • You can select one of the preconfigured icons for the button or specify a unicode for one of the 600+ icons in the fontawesome.com library.
  • To display a close button on devices, your app must use Blueshift's iOS SDK version 2.1.18 and above or Blueshift's Android SDK version 3.2.8 and above.

inapp_modal_closebutton.png

Action Buttons

  • Add buttons as required. You can select from the following options:
    • Two Buttons Horizontal
    • Two Buttons Vertical
    • One Button
    • None
  • Configure the buttons as required by adding button text, text color, button color. 
  • Use the action fields to configure the on-click actions for each button.

inapp_modal_actionbuttons.png

Custom HTML

Create your own custom message template (for example a carousel of product recommendations) using HTML. You can specify the height and width of the message box that appears and whether the background should have rounded corners.

inapp_html.png

Visual Editor

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.

For more information, see Design In-app messages using Visual Editor.

Images in in-app messages

If you are using Blueshift Mobile SDKs, you can use images in in-app messages based on the template you select. The SDK is responsible for downloading and displaying the image. To ensure a good experience for your customers, 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. 

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.

The following image recommendations could help to improve user experience when image based templates are displayed using Blueshift's mobile SDKs.

Slide In

Images are used in slide-in messages to display icons. Use small square icon images for a better experience on both Android and iOS devices.

Modal

You can add a background image in modal templates. The 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 must also be optimized to have minimal file size with good resolution to have a great experience. 

Consider the following image recommendations for images in modal templates:

OS Aspect Ratio(W:H) Recommended resolution Recommended size Image formats
Android 1:1 512x512 Less than 512KB PNG, JPG
iOS 1:1 512x512 Less than 512KB PNG, JPG

 

inapp_backgroundimage.png

HTML

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

Define clicks and dismiss actions

You can use the URL blueshift://req-push-permission to launch the Blueshift SDK’s push permission request workflow.

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 the back button to dismiss the 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.

Include Deep Links

Blueshift Deep Links are http or https URLs that take users to a particular page in the app or launch a particular page in a browser. When you send a Blueshift deep link in an SMS or an email and a customer clicks the link, both iOS and Android can launch your app and open a particular page in the app that is mapped to the link.

For more information, see Deep Links for mobile apps.

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

Comments

0 comments

Please sign in to leave a comment.