FollowAnalytics offers an in-app template feature allowing to design rich messages and deliver them to users in a company mobile app, based on segmentation and triggering.
This document describes what the templates are, as well as why and how you use them. It lists the requirements, limitations and good practices for designing and testing them.
Only devices running at least version 5.0.0 of the FollowAnalytics SDK will be able to receive in-app templates messages
Definition and purpose of in-app templates
An in-app template is a web page designed and packaged to be displayed in a mobile app as a FollowAnalytics mobile campaign.
The templates can be displayed in full screen. Like any web page, they can contain text, images, videos and animations.
By designing rich in-app messages, a company can ensure that the look and feel and content of their messages match their brand identity and that the message is compelling. In-app templates sent through FollowAnalytics can become a key part of the user experience in the mobile app, as they will fit in the global effort of consistency in the service offered.
When do you need an in-app template
In-app templates can help you extend the interaction that your app builds between your users and your company. Building real-time or event-based messaging in an app is cumbersome and much easier to manage from a platform once the app is already live. The development team can focus on the core features and let the communication and onboarding side to the marketers and product managers.
Native in-app messaging through alert boxes is limited in the experience it provides:
- One format for all messages, in any app: not adapted to the visual identity of the app
- No interaction besides the buttons: no image, video or animation.
Here is a list of examples where your communication would be improved by in-app templates:
- Onboarding messages appearing over your UI when needed
- Explanation message to get users to opt-in to push notifications, before prompting them with the one-time authorization message provided by Apple
- Promotion of a new product or new service offered by your company, using images and videos
- Flashy discount message leading to the right product on the right page
- And much more!
In-app templates and successful customer engagement
Our Customer Success Team is dedicated to helping you succeed and can assist you in elaborating a message strategy that will yield engagement and conversion.
Engaging your users means providing them with reasons to use your app on a regular basis. By tailoring your messages to the right audiences, and ensuring they are delivered in the moment, when they are needed the most, you will enhance the impact and meaning of your app for your users.
Reach out to your Customer Success Manager for a workshop on how to leverage In-app Template precisely for your app and brand.
Types of templates and how to create them
For now, only a fullscreen format is offered. Popups, banners and more will be available soon.
Once finalized, a template is a zip file containing the page and its assets.
Before creating your In-App Templates, please ensure that you downloaded a template base from the developers portal. It contains the minimum boilerplate code provided by FA to allow In-App Templates communication with the FollowAnalytics SDK (FA does will not provide support for templates made from scratch).
The developer portal provides multiple examples to cover many of your cases :
- Common templates that cover a wide range of layout / cases, and allow a fast In-App Template creation. Most of the time, you will only need to replace text and / or pictures. This option is mostly for users with a small Front End coding experience.
- Minimum templates for fully customized message. As you will need to implement all the code from scratch to develop your In-App Template, a skilled Front End developer is highly recommended to ensure the page is responsive and efficient.
How they are displayed
In-App templates are like micro websites displayed in your application. This is made possible by the FollowAnalytics SDK, which creates a frame (webview) inside your application where the In-App message will be displayed. The display will be triggered according to the options set up while creating a campaign in the FollowAnalytics product: scheduled, on a specific user action, or programmatically as a transactional campaign.
Multiple device support and best practices for mobile web
Your message can end-up being displayed in many various formats. You have to build a responsive page, that can fit on small to extra large screens, and which adapts to portrait and landscape orientations (unless the app only allows one of both).
Your customers have a wide variety of devices, and those devices also have differents levels of HTML support. This might cause display issues (bad layout, errors, blocked content). You can prevent these problems by following cross-browser development best practices.
Besides technical compatibility and responsiveness, your page should follow the basic best practices for mobile user experience, as outlined here.
The templates provided by FollowAnalytics are designed with all these constraints in mind, so you won’t have to worry about it if you only update their content or design. FollowAnalytics will provide full support for these templates if you encounter issues on some devices. Should you start from scratch, please remember to test both in emulators in browsers like Chrome and on actual devices.
The following resources provide additional information about web technologies on mobile devices:
Mozilla Foundation : Mobile Web general guides, cross-browser development, optimization...
Caniuse : An essential tool for cross-browser validity checking.
How to define the format - format specifics
The definition.json file contains all the information needed to describe the container of the notification : how long it be displayed, what is the delay for close button display, etc.
Here is the list of all the parameters that can be defined inside definition.json
|definition.json / sdk_options data||Description||Possible values||Default Value|
||Defines the padding on top and bottom of the the in-app message||/||/|
||timeout: the timeout after which the inapp will be automatically closed||Positive number or “none”||“none”|
||Defines the entry animation of the message container||/||/|
||Effects, defined based on the list of available effect||fromBottom, fromTop, fromLeft, fromRight, fadeIn||fadeIn|
||Defines the exit animation of the message container||/||/|
||Effect, defined based on the list of available effect||fromBottom, fromTop, fromLeft, fromRight, fadeOut||fadeOut|
||The time it takes to display the close button. Specified in seconds it defaults to 0.||Positive number||0|
Definition.json examples are provided in the example zip files.
A template is a zip file that you will upload to FA servers through the campaign creation interface. The API will parse your package in order to validate the code and check for errors or missing file. The following structure is the minimum required by the server, so that it can properly parse and analyze your files.
Apart from the index.html that contains your InApp content and layout, there are 2 files provided by FollowAnalytics.
The definition.json which contains the parameters used by FA to build your InApp template on the mobile SDK. It contains many properties, such as layout type, positioning values, colors, and so on.
A json schema is provided here, so that you can check its validity with a json schema validator tool.
The second file (
fa-sdk.js) will emulate an interface with the FollowAnalytics mobile SDK while testing on browsers, so that you can log events, register for notifications, and more, from your template. This file will be automatically deleted once the template campaign is launched, as it won’t be used anymore. For a list of options, see section In-App Template capabilities.
How to handle the formats with the SDK
You need to use at least version 5.0 of the FollowAnalytics SDK to display in-app templates.
Like other campaigns, mobile developers can define screens where the messages should not be displayed (media player, splash screen, etc.)
In-App Template capabilities
Your templates can interact with the phone and the app to provide a comprehensive experience.
Interactions with host app and other apps
First, you can dismiss the message from within the template code. To do so, use the
FollowAnalytics.deepLinking(value, key); function allows to trigger a deep-link or any other action in your app code by passing a key and a value.
Finally, deep-links to other apps, including system apps, can be added to HTML links directly in your template. This means that you can link to
tel://+15141234567 to initiate a phone call or
mailto://email@example.com to open a mail composer.
Interaction with the SDK
From a template, you can register for push notifications, so that you can build a compelling message before asking for permission. Use
As any other HTML page, your template can have multiple pages, forms, API calls, animation and more. Please be sure to test this on several devices to ensure compatiblity.
Assets and technical requirements
For your images to be properly rendered, make sure they match the resolution of your targeted devices. Mobile devices have a high density of pixels that sometimes enable a 1080p definition or higher on small screens.
A good rule of thumb is to provide a file that is twice the width and twice the height of the frame you define for it in your template. This corresponds to the
@2x notation that Apple uses when developing on mobile.
There is no specific recommendation for compatibility with landscape and portrait orientations: This depends on how you position images through your code. Estimate the size your image can occupy and follow the guideline given above for high resolution devices.
Remote video vs local video and template
Despite the video file can be part of the package.zip, we strongly recommend to play your video from a remote resource, because the bigger the package is, the longer it takes to download, so that you can potentially miss a user trigger to deliver your message to the customer.
In-App Templates support all formats supported by mobile browsers. Please check this documentation to get a list of supported formats.
While working with In-App Template, you will have to deal with files sizes and try to optimize as much as possible for several reasons:
- content availability: if your package is too large, and the customer triggers an event which should open your InApp Template, your package might not be downloaded soon enough. Your customer can also have a small bandwidth, which can be problematic for downloading large files.
- your customer mobile subscription plan is limited: using big package can severely burn data plans. You should consider these limitations when creating an InApp Template.
Cross domain resources
You may need to download external resources or call remote services (API) in your In-App Template. As support for non-HTTPS on mobile operating systems will end soon, you should point to HTTPS resources any time you can.
Test and delivery to end users
Testing your template
As you develop your template, you can emulate mobile devices in browsers like Chrome to check how the content adapts to size constraints.
Once you have packaged your template, you can validate it by creating a new campaign on the FollowAnalytics interface (no need to save this campaign, this is only to validate your file).
- Create a campaign of type In-App and layout Template.
- Go to the Message step and upload your zip file.
- If there is problem with your files, the interface will inform you of what is wrong or missing. Fix the issues and upload again until the file is accepted.
- Once uploaded, your template will be displayed in the preview. This is a first level of validation.
- If the preview seems right, you can then use the In Device Preview feature of the Message step to send the file to one of your devices and validate that it appears and interacts with your app as expected.
Delivery to users
To deliver your message, create a campaign which has an in-app component of type Template. Once you get to the Message step, upload your zip, and optionally send it to your device for review using the In Device Preview feature. Configure your campaign as usual, defining the delivery mode and audience. Then launch it!