In-App message design

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

If you have selected the option to display the message in the mobile inbox, you can update the mobile inbox details from the Inbox tab.

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.

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.

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.

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.

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.

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.

Content

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

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.

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.

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.

Custom HTML in-app notification in iOS

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

 

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.

Add mobile inbox message details

If you have selected the option to display the message in the mobile inbox, go to the Content > Inbox tab.

Add the title for the message, a short description, and an image. In the preview tab, you can see how the message will appear to a customer in their inbox. You can also include deep links in the short description. Although there is no character limit for the message title or short description, we recommend that the message size be such that the customer should not have to scroll to read the message.

Note: Customers will see the messages in their inbox until the message expires.

Request for push permissions using in-app messages

To get explicit consent from users to receive push notifications from your app before you send push notifications to them, you can launch the Blueshift SDK’s push permission request workflow by using the blueshift://req-push-permission deep link in your in-app message.

Note: To use this deep link, your app must use Blueshift's iOS SDK version 2.2.6 and above or Blueshift's Android SDK version 3.3.0 and above.

In your in-app template, set the context for sending the push notifications.

• For the “Allow” button, use the URL blueshift://req-push-permission to launch the Blueshift SDK’s push permission request workflow.
• For the “Deny” button, use the URL blueshift://dismiss. This will help you to track the number of users who opted out of receiving push notifications.

When a user clicks on an in-app notification button to "Allow" push notifications, a push permission dialog is displayed and the user can grant the permission. If the user had already granted push permission, the dialog is not displayed.

If the user clicks on an in-app notification button to "Deny" push notifications permission or if push notifications are disabled, then a dialog is displayed with a message asking the user to go to the app settings to enable push notifications.