Introduction

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.

Availability

Only devices running at least version 5.0.0 of the FollowAnalytics SDK will be able to receive in-app templates messages

In-App Templates

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:

Here is a list of examples where your communication would be improved by in-app templates:

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.

General Guidelines

Types of templates and how to create them

In-app templates are designed the same way you create a website, with HTML, CSS and Javascript. And like responsive websites, they can adapt their layout to the specificities of each device, to ensure a proper display of your message.

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 :

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:

Template design

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
window
padding Defines the padding on top and bottom of the the in-app message / /
unit px "px"
top Positive number 0
bottom Positive number 0
timeout timeout: the timeout after which the inapp will be automatically closed Positive number or “none” “none”
animation / /
entry Defines the entry animation of the message container / /
effect Effects, defined based on the list of available effect fromBottom, fromTop, fromLeft, fromRight, fadeIn fadeIn
exit Defines the exit animation of the message container / /
effect Effect, defined based on the list of available effect fromBottom, fromTop, fromLeft, fromRight, fadeOut fadeOut
close_button / /
appear_timeout 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.

File hierarchy

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

A template can trigger actions within the mobile app and on the device, using the JavaScript interface injected when it is displayed.

First, you can dismiss the message from within the template code. To do so, use the FollowAnalytics.CurrentCampaign.close(); function.

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://support@followanalytics.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 FollowAnalytics.registerForPush();.

You can also log attributes and events, as well as retrieve in-app and push messages from the message archive of the SDK. See the javascript interface file for details.

HTML capabilities

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

Images

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.

Videos

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.

Formats

In-App Templates support all formats supported by mobile browsers. Please check this documentation to get a list of supported formats.

Package size

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:

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).

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!