How to create a Customizable Paywall and deploy it in your app

🚧

Customizable Paywall is currently in Beta

Customizable is currently in beta and iOS only: please use Glassfy SDK 1.4.0 beta 0.

The Glassfy Customizable Paywall is a very powerful way to build and configure a paywall to meet your specific needs for maximum impact, with very little effort.

In this article you will learn :

  1. What is a Customizable Paywall
  2. How to Create a Customizable Paywall
  3. How to configure the Customizable Paywall in Glassfy Dashboard
  4. Display the paywall in your iOS application

What is a Customizable Paywall

The Glassfy Customizable Paywall is built using commonly known technologies such as HTML, JS and CSS which enable a very powerful way to build and deploy paywalls.

Glassfy provides a JS file that has to be included in the paywall and that will allow the automatic management of the paywall element such as the button names connected with SKUs, standard messages and view management.

If you are familiar with HTML and JS you can build a paywall in minutes: let's see how!

How to create a Customizable Paywall

Create an HTML page and in the HEAD add the following code

<script 
    src="https://cdn.jsdelivr.net/npm/[email protected]" 
    integrity="sha384-1Iw1uFjvUrQCgaNLguymtXdkWBHJyw/r4pJSbouNno9a/9BvrwHNtY0VX6LEFnb5"
    crossorigin="anonymous">
</script>

Add a close button at the top of the page by using the special HTML modifier data-gy-close

<button data-gy-close>CLOSE</button>

This will add a button that will close the paywall when tapped

Add a purchase SKU button by using the data-gy-purchase and the SKU reference gy.sku.1 (the first SKU in the list created in the dashboard).

<button data-gy-purchase="gy.sku.1">
  <span data-gy-var="gy.sku.3.description">
  </span> 
  <span data-gy-var="gy.sku.3.price">
  </span>
  /
  <span data-gy-var="gy.sku.3.period">
  </span>
</button>

With the above code the button text is composed by the description, the original price / the original period for example

Premium Subscription $9.99 / month

You can use the following data attributes to display information in your paywall

Data attributeUseExample
data-gy-linkOpen a link and call a callback in the JS code<a data-gy-link="https://example.com">
data-gy-restorecreate a restore purchase button<button data-gy-restore>Restore</button>
data-gy-purchasecreate a sku purchase button<button data-gy-purchase="gy.sku.1">
data-gy-vardisplay a variable (see table below for possible variables)<span data-gy-var="gy.sku.3.description">
data-gy-closeclose button<button data-gy-close>CLOSE</button>

Here is a list of data variables that can be used with data-gy-var (N is the position in of the SKU as defined in the Dashboar)

VariableDescription
gy.msg.daylocalised “day” message
gy.msg.weeklocalised “week” message
gy.msg.yearlocalised “year” message
gy.sku.N.titleSKU title
gy.sku.N.descriptionSKU description
gy.sku.N.original_priceSKU original price not including promotion or intro
gy.sku.N.original_durationSKU original duration not including promotion or intro
gy.sku.N.original_periodSKU original period not including promotion or intro
gy.sku.N.original_dailySKU original daily price not including promotion or intro
gy.sku.N.original_weeklySKU original weekly price not including promotion or intro
gy.sku.N.original_monthlySKU original monthly price not including promotion or intro
gy.sku.N.original_yearlySKU original yearly price not including promotion or intro
gy.sku.N.intro_priceSKU intro price
gy.sku.N.intro_durationSKU intro duration
gy.sku.N.intro_periodSKU intro period
gy.sku.N.intro_dailySKU intro daily price
gy.sku.N.intro_weeklySKU intro weekly price
gy.sku.N.intro_yearlySKU intro yearly price
gy.sku.N.intro_discountSKU intro discount price
gy.sku.N.promo_priceSKU promo price
gy.sku.N.promo_durationSKU promo duration
gy.sku.N.promo_periodSKU promo period
gy.sku.N.promo_dailySKU promo daily price
gy.sku.N.promo_weeklySKU promo weekly price
gy.sku.N.promo_yearlySKU promo yearly price
gy.sku.N.promo_discountSKY promo discount
gy.sku.N.priceSKU price including the intro or promo
gy.sku.N.durationSKU duration including the intro or promo
gy.sku.N.periodSKU period including the intro or promo
gy.sku.N.discountSKU discount vs the original price
gy.sku.N.dailySKU daily price including the intro or promo
gy.sku.N.weeklySKU weekly price including the intro or promo
gy.sku.N.yearlySKU yearly price including the intro or promo

Insert all images as Base64 in the HTML file (you can use a service like Image to base64 converter) to create the image tags.

Now you can setup the paywall in the Glassfy Dashboard

How to configure the Customizable Paywall in Glassfy Dashboard

In the Dashboard go to Paywall settings and create a new Customizable paywall

You need to drag the HTML file created at the previous step in the rectangle above and select the SKUs that will be used by the paywall. The SKUs will be referenced in the code by number with 1 being the highest in the list.

Now you can assign that paywall to a remote configuration that in this example we will call my_customizable_pw_config

Display the paywall in your iOS application

In order to use customizable paywalls in your application you should use Glassfy iOS SDK 1.3.4 or later.

Glassfy.paywall(id: "my_customizable_pw_config") { [weak self] p, err in
    guard let p = p else {
        // handle error
        return;
    }
    self?.presentPaywall(viewController: p.paywallViewController)
}