The In-app message content is defined in the Templates 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.|
Use the Slide In template to construct a banner style in-app message. You can configure the following items for a slide-in banner message.
- Specify the text message for the banner.
- Configure the banner’s position on the screen.
- 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.
- 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.
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 following items for a model message.
- Specify the title for the modal.
- Specify the text, the text color and background color.
- Add buttons as required. You can select from the following options:
- Two Buttons Horizontal
- Two Buttons Vertical
- One Button
- 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.
- 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.
Create your own custom message template (for example a carousel of product recommendations) using HTML and customize its height and width.
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.
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.
The following image recommendations could help to improve user experience when image based templates are displayed using Blueshift's mobile SDKs.
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.
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|
The image must be optimized to render quickly in a webview. The size depends on the size of template & the image view used.
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.
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.