Paywall 2.0

DocsDeveloper › Paywall 2.0

Last updated: 24 Sep 2018 / 3:45 PM / GMT

The Paywall 2.0 is our latest content monetization application. It has multiple changes and improvements. The new embed code can be found at the same place of the first paywall application, in the single asset section. There are two different tabs where the embed code generator can be switched between both Paywall versions.

In addition, here are the paths of both paywall locations, staging and production:
https://assets.inplayer.com/paywall/staging/paywall.min.js
https://assets.inplayer.com/paywall/latest/paywall.min.js

Standard embed code

The Paywall 2.0 embed code is sightly different from the previous one. The first part of the embed code now is only one minified JS file, since the CSS is added inside:

<script type='text/javascript' src='https://assets.inplayer.com/paywall/staging/paywall.min.js'></script>

The second part of the embed code, the asset embed, has the following format:

<div id="inplayer-ASSET_ID"></div>
<script type="text/javascript">
var paywall = new InplayerPaywall(MERCHANT_UUID, [{ id: ASSET_ID}]);
</script>

OVP custom embed code

In case the asset is of OVP asset type, the embed code can be constructed given the original VIDEO ID from the external OVP source. The format for external asset ID embed is the following:

<div id="inplayer-OVP_VIDEO_ID"></div>
<script type="text/javascript">
var paywall = new InplayerPaywall(MERCHANT_UUID,
     [
      {
         external: {
            type: 'OVP_NAME',
            id: OVP_VIDEO_ID,
         },
      },
     ]
)
</script>

Multiple assets embed code

The Paywall 2.0 support multiple assets embed code. In case multiple assets are needed, they just need to be included in the JavaScript code as an array. The position of the html elements where the assets will be rendered is not important. In addition there is full html example of multiple assets embed code in action.

<script type='text/javascript' src='https://assets.inplayer.com/paywall/staging/paywall.min.js'></script>

<div id="inplayer-ASSET_1_ID"></div>
<div id="inplayer-ASSET_2_ID"></div>
<div id="inplayer-ASSET_3_ID"></div>

<script type="text/javascript">
var paywall = new InplayerPaywall(MERCHANT_UUID, [{id: ASSET_1_ID}, {id: ASSET_2_ID}, {id: ASSET_3_ID}]);
</script>

Embed code options

The additional options in the embed code can be set up for two different cases. Asset options, which can be set up per asset, and global paywall options, which affect all assets. The asset embed code options should be passed in addition to the asset id:

<div id="inplayer-ASSET_ID"></div>
<script type="text/javascript">
var paywall = new InplayerPaywall(MERCHANT_UUID,
     [
      {
        id: ASSET_ID,
        noPreview: true,
        brandingId: "111222", 
      }
     ]
)
</script>

If the options are used as in the example from above, they will affect only the asset. In case there are multiple assets and global paywall options are needed for every asset in the embed code, the options should be passed outside of the assets list:

<div id="inplayer-ASSET_ID"></div>
<script type="text/javascript">
var paywall = new InplayerPaywall(MERCHANT_UUID,
     [
      {
         id: ASSET_ID
      },
     ],
     {
       language: 'EN',
       hideUserMenu: true, 
       hideLogo: true,
       hideProtectedBy: true
     }
)
</script>

Here is the full list of embed code options, global ones and single asset options:

Standalone functionalities

The InPlayer Paywall supports standalone embed code functionalities for several purposes: login/logout button, my account button, purchase history button, etc.

Although you may use the paywall JavaScipt methods to invoke some functionality or certain paywall screen, there is an implementation with adding HTML classes to elements. Here is the list of HTML classes that can be used to create each standalone functionality.

HTML class Description
inplayer-paywall-login Invokes the login screen of the paywall
inplayer-paywall-logout Invokes the logout action
inplayer-paywall-account Invokes the my account screen of the logged account
inplayer-paywall-purchases Invokes the purchase history screen of the logged account

Embed specific prices

There is a usual need of content owners to be able to sell only specific price point of certain asset on some action button. In case there is a need to present two different pricing options on two different HTML blocks and buttons for the same asset(for example when its needed to clearly show different options of Subscription vs PPV with custom details of the packages, and which features the viewers will get after purchasing each price option), here is the way to do it:

We will take a scenario with one asset, that inherit two different prices for a package.
The first step would be adding embed code that will create the Paywall object for the asset.

<div id="inplayer-ASSET_ID"></div>
<script type="text/javascript">
var paywall = new InplayerPaywall(MERCHANT_UUID,
     [
      {
        id: ASSET_ID,
        noInject: true,
        noPreview: true,
      }
     ]
)
</script>

As you can notice it is a standard asset embed code with two additional parameters: noInject and noPreview. The noInject parameter will stop the paywall from injecting a video after a successful purchase. Since the point is to create custom pricing options screen the content injection is not needed. The second parameter noPreview will remove the standard preview template for the asset.

Now after the Paywall object is created we may use it with additional methods. The next thing that needs to be done is two call-to-action buttons for each price option.

document.getElementById(ACTION_BUTTON_PRICE_1).addEventListener("click", () => { paywall.showPaywall(ASSET_ID, null, ACCESS_FEE_ID)});

With this code the method showPaywall functionality is connected to your action button for one price. It will invoke the paywall flow but with pre-selected price as the ACCESS_FEE_ID parameter. The pricing screen will be circled since there is a specific price option selected already on that action. Because there is noInject option in the code where the Paywall object is created, after a successful purchase the paywall modal will be closed and nothing else will happen.

For the second price the same showPaywall code is needed, but with different ACCESS_FEE_ID

We use cookies to analyse our traffic. We also share information about your use of our site with our analytics partners. See details