Paywall 1.0

DocsDeveloper › Paywall 1.0

Last updated: 15 Aug 2018 / 3:36 PM / GMT

The InPlayer Paywall application is fast and easy way of selling your content online.  For each digital asset that you create in the InPlayer platform, you are granted with corresponding embed code that will create the whole end-user experience once placed on some website. The Paywall app is only web-based solution. For more complex integrations or cross-platform solutions refer to our REST API or JS SDK guides. You can easily find the embed code of any asset  in the InPlayer Dashboard in the single asset section, as its shown in the screenshot.

Standard embed code

The Paywall embed code includes two parts. The InPlayer Paywall application scripts:

<script type='text/javascript' src='https://assets.inplayer.com/injector/staging/injector.js'></script>
<link rel='stylesheet' href='https://assets.inplayer.com/injector/staging/css/app.min.css' type='text/css' media='all'>

And the Asset embed code where the video should be embeded:

<div id="inplayer-42095"></div>
<script type="text/javascript">
inplayer.inject('42095', '528b1b80-5868-4abc-a9b6-4d3455d719c8');
</script>

The Asset embed code is constructed from two parts as well. HTML code, that will create a DIV element with the Asset ID passed as the element ID in the following format: “inplayer-ASSET_ID”. In the previous example the asset id is 42095.

The second part of the Asset embed code is JavaScript code that should invoke the inject method of our JavaScript APP. That method will create the complete UI flow of a premium content. If no active account is logged in the browser the Inject method will render a preview template of the embedded Asset with a purchase button that will invoke widget overlay functionality for registering/login account, price selector and payment details page. After the visitor creates account, completes the flow and makes successful payment, the InPlayer application will replace the preview template with the Premium Asset(mostly video players) .

The InPlayer inject method receives 3 parameters, although in the standard embed code there is no 3rd parameter.

inplayer.inject(ASSET_ID, MERCHANT_UUID, OPTIONS);

The first parameter is ASSET_ID, the same value from the DIV element ID of the HTML part of the embed code. The second parameter is MERCHANT_UUID, the unique identifier of the Merchant Account. The third, optional parameter can be Array of many additional options that are described in the following section.

Embed code Options

All embed code Options should be passed as Array in the last parameter of the embed code. Here is an example of an embed code containing all possible options:

inplayer.inject(assetID, merchantUUID, {
    global: {
        hideUserMenu: true, 
        freeAccess: 555 
    },
    noPreview: true, 
    noContent: true, 
    language: {
        initial: "en" 
    },
    oauthAppKey: "b60220e1d5dd0226c73634f667a69b4c", 
    registerFirst: true, 
    ssoDomain: "https://subdomainname.accounts.staging-v2.inplayer.com", 
    brandingId: 455, 
    codeAccess: { 
        inputs: [{ 
            name: "access_code", 
            placeholder: "Please enter your access code", 
            dataPlaceholder: "access_code" 
        }, {
            name: "first_name",
            placeholder: "Your first name here"
        }, {
            name: "last_name",
            placeholder: "Your last name here",
        }],
        codePattern: "{{first_name}}-{{last_name}}-{{access_code}}" 
    },
    player_scripts: { 
        brightcove: [
            "//some.url.of.some.script//script.js",
            "//some.url.of.some.stylesheet//style.css"
        ],
        jwplayer: [
            "https://my.custom.script/jwplayer.js"
        ]
    },
    player_params: { 
        brightcove: {
            some_custom_option: 555,
            some_value_to_override: "1234567890"
        }
    },
    // event callbacks
    onAny: function(data){
    // do something with data  
    },
    onInit: function(data){
    // do something with data
    },
    onAccess: function(data){
    // do something with data
    },
    onLogin: function(data){
    // do something with data
    },
    onRegister: function(data){
    // do something with data
    },
    onInject: function(data){
    // do something with data
    },
    onPayment: function(data){
    // do something with data
    },
    onLogout: function(data){
    // do something with data
    },
    onLanguage: function(data){ 
    // do something with data
    }
}

There are two types of embed code options. Optional settings and events. With the optional settings you can add, remove or change certain functionalities of the paywall. With the optional events, you can have additional functionality that can be triggered after some action in the paywall.

Optional Settings

Setting Type Description
noPreview Boolean Hides the preview template, in case custom preview is needed.
global object Set global settings. Additional settings in the global object are: hideUserMenu – true or false, freeAccess – access_fee_id for auto access grant in case the asset has no price and the viewer needs to get free access after register
noContent boolean If this setting is set ti true, it will stop the paywall from injecting(creating content) after successful payment. Rather onInject event handler will be fired in case there is need of different behavior of content presenting. For example to redirect to premium section.
language object Setting for changing the initial language of the paywall. In the object you can pass additional key parameter ‘initial’ with value of the language code: initial: ‘en’. Additionally, outside of the embed code, you can use the inplayer.setLanguage('english'); method to sync your website language button with the paywall language.
oauthAppKey string Pass the AppKey of one Oauth application in case Oauth is used in the paywall
registerFirst boolean If set to true the register/signup screen will be the default initial screen when the paywall pops up (false by default)
ssoDomain string In case SSO feature is used, the domain of the current website needs to be passed in the embed code.
brandingId integer The bradningId setting will use specific branding of one merchant. If the bradning themes feature is used, you have to include the ID of the corresponding branding theme in the embed code
codeAccess object Option to define the access code pattern for Assets that are accessed via entering access code instead of issuing payment
player_scripts object Dynamic placeholder for overwriting player scripts. Optional, when you want to use an alternative version of some player’s script (useful for cases when the default scripts used by the paywall are out-dated).
player_params object Dynamic placeholder for overwriting player parameters and options. Usefull if you want to access player controls over InPlayer embed code like autoplay, skins, video quality settings etc.

Optional Events

The Paywall application is capable of firing multiple events based on certain action. You can use the Paywall events to have additional custom functionalities that will be executed only after the event type. Here is a list of all supported Event types.

Event When it’s triggered
onInit Whenever the page is loaded and the InPlayer embed code is initiated
onAccess Checks if user has access to the asset
onLogin User logs in, this is also triggered after successful registration
onRegister New user registers
onPayment Successful payment made
onInject Asset injection is initiated
onLogout User logs out
onAny Any of the above activity

Here are few examples and guides for solving different problems with events:
How to manage Facebook pixel conversions with InPlayer Paywall Events
How to use Google Analytics with InPlayer Paywall Events

In the following section you can find some examples of how to solve different scenarios with the paywall options.

How to use custom preview

In the following example we will use the noPreview option in the Paywall to remove the default preview template. Then we will create our own call to action button that will invoke the paywall experience.

Once you include our CSS and JS scrips in your website, the first part of the embed code would be a div element for the place where you will create your preview content. After successful payment the paywall will embed the premium video overwriting the custom preview content.

<div id="inplayer-ASSET_ID"></div>

Next part of the embed code is to create call-to-action button that will invoke the paywall for the desired premium ASSET. In this example the action button is the html button element but that functionality can be added on any other element. It just need to use a class in the following format: inplayer-paywall-ASSET_ID

<div id="inplayer-ASSET_ID">
<button class="inplayer-paywall-ASSET_ID" >purchase video</button>
</div>

The reason why the button should be placed inside the preview content DIV is that the button should disappear when premium content is loaded. You shouldn’t be able to click the purchase button for assets that you already have purchased. Because the Paywall overwrites everything inside the preview DIV, once successful payment is made the button will disappear.

The next thing is the JavaScript code that will add the functionalities of these html elements. Its normal embed code with the noPreview setting included.

<div id="inplayer-ASSET_ID"></div>
<script type="text/javascript">
inplayer.inject(ASSET_ID, MERCHANT_UUID, {
 noPreview: true, 
 onLogout: function(data){
  location.reload();
 }
});
</script>

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