HTML files

Richie Paywall consists of a set of HTML, CSS, JS and image files which are provided to the native apps using Richie asset pack distribution technology. The names of HTML files serve as entry points for the native apps into the paywall experience.

Each publisher may freely decide the content, style or functionality offered in each of these HTML files, as long as they serve the function expected by the native apps. Paywall may also contain additional HTML files which are not defined in the list below, as long as they use non-conflicting file names.

first-launch-welcome-screen.html

Optional. This file is displayed to the user at the application first launch. The file should include basic information about options available to the user, such as description of available subscriptions, a link to the sign-in page, a link to start an IAP purchase (for IAP-enabled apps) etc.

paywall.html

Required. This file is displayed on top of the article. The article beneath the overlay is partly visible on a tablet, and completely covered on a phone. Scrolling within the article is disabled. Swiping to the previous & next article is disabled. Paywall is displayed when any of the following conditions are met:

The app has metered access enabled and current user has no metered accesses left for the current period
The app doesn't have metered access enabled and current user does not have access to the article

This file should have similar content to the welcome page, including link to the sign in page.

sign-in.html

Required. This file is displayed when user needs to sign in into the app. Sign in flow can be started from various parts of the app:

Settings view: Sign in
maggio-callback:///sign-in callback
User trying to download an Editions issue while not having the access

This file should contain a login form where user can send e-mail & password to publisher's authentication backend (e.g. using XMLHttpRequest). After successful authentication, the sign-in page should pass email, publisher-specific user ID and user token to the native app using richie.paywall.didSignIn() JS API.

paymeter-overlay.html

Required for apps with metered access. This file is displayed on top of the article with transparent web view. Scrolling within the article is disabled. Swiping to the previous & next article is enabled. Paymeter overlay is displayed when all of the following conditions are met:

The app has metered access enabled (e.g. 2 free articles per week)
User swipes to an article with metered: true value
User does not have access to the article on the basis of current subscription
User has at least one unused metered access available

This file should contain a message to the user telling how many unused metered accesses user has for the current period, e.g. "You have 2 free stories left for this week". The file should also contain a link which allows user to consume one metered access and access the story. For information how to get current number of unused metered accesses and how to consume one metered access, see Richie Paywall JavaScript API.

paywall-overlay.html

Optional. This file is displayed on top of the article with transparent web view. Scrolling within the article is disabled. Swiping to the previous & next article is enabled. Paywall overlay is displayed when all of the following conditions are met:

User swipes to an article with metered: true paywall rule
User does not have access to the article on the basis of current subscription

This file should have similar content to the paywall.html page, including link to the sign in/registration/purchase page. If this file is not defined, paywall.html will be displayed.

Richie Paywall HTML files

HTML files

first-launch-welcome-screen.html

paywall.html

sign-in.html

paymeter-overlay.html

paywall-overlay.html

Required JavaScript imports

mraid.js

richiePaywall.js