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.|
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.
- 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.
- 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.
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.
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.
- 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.
- Specify the title and the text for the modal.
- Specify the color for the title and the text.
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.
- 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.
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.
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 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.
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.