Paywall Customisation

DocsExtras › Paywall Customisation

Last updated: 14 Feb 2020 / 9:37 AM / GMT

In this article, we will look at how to do some of the most commonly used paywall customisations by using code. A complete documentation of all the custom paywall codes can be found here.

A good amount of basic customisation can be done straight from the InPlayer Dashboard, but that is only a fragment of what can be accomplished by using the various codes we have available. With them, the customisation possibilities are nearly endless.

Below, you will find ready-made codes you can use on your page to customise the paywall in a few basic ways. Just modify the codes according to the few notes contained within them, and copy them to your webpage. Make sure to put the <head> codes into the <head> of your webpage, and the <body> codes into the <body> of your webpage, in the place where you want the asset to appear.

Asset layout

This is how your InPlayer asset will look like by default:

The colours, preview image, and text style can be changed in the Asset and/or Branding section of the InPlayer Dashboard, but the overall template of the asset will remain the same.

However, if you don’t like this look, here are some alternative asset styles, where the asset elements have been rearranged. You can, of course, further modify the code to your liking.

Style 1

Title and description to the left, BUY button in the middle of the preview image.
This is also a responsive layout that will change if displayed on a screen smaller than a pre-determined size (see code for details).

Get code.

Style 2

Title and description at the top, BUY button in the middle of the preview image.

Get code.

Style 3

No title and description, BUY button in the middle of the preview image.

Get code.

Custom asset appearance

In case you don’t want to use the default asset style at all, you can attach the paywall to a custom image on your page.
Get code.

Dark theme

The default theme of the paywall has a light colour palette:

If you prefer to have a darker theme, you can modify the paywall to look like this:

Note that just like in the case of the regular theme, the accent and button colours (red in the above screenshot) will be taken from the branding theme you’ve set in the InPlayer Dashboard.

Get code.

Purchase buttons

By default, once a customer clicks on an asset and purchases their pass, the content behind the asset will be displayed in the place where the asset used to be.

However, sometimes you might want to have a button that will only serve as a way for the customers to purchase their passes and will not display any content after the purchase. This can be very useful if you have a dedicated pricing page on your site, where your customers can purchase their pass, but afterwards have to go to another page to actually watch the content.

Here is an example of how this button could look like:

Similar to using custom assets, you could either use an image, or an HTML object as the purchase button.

Get code for using an image.

Get code for using an HTML object.

Standalone Customer Account Management buttons

Normally, your customers would log into their accounts by clicking on one of your assets.

Then, to manage their account, they would click on the icon that appears on the bottom right corner of the page.

If you want to streamline the navigation, you could add a dedicated Login/Logout/My Account buttons to your site’s existing navigation bar.

Get code. Note that you will have to adjust the CSS style of the buttons so it blends with your site’s style.

Standalone Login and Register buttons

By default, when a customer clicks on an asset, the LOGIN form will be the first screen they see. If they need to make an account, they can click the SIGN UP tab on the screen.

However, you can have the Login and Register forms as actual buttons on your webpage.

Get code. Note that you will have to adjust the CSS style of the buttons so it blends with your site’s style.

Default paywall language

The default language of the paywall is English.

However, if you wish to set up another default language, you can do so by simply adding the following code in the asset embed code:

{language: ‘XX’},

Note that XX should be changed with the two-letter code for the language you wish to use.

Here is a list of the supported languages and their codes:

Language Code
Arabic AR
Danish DK
Dutch NL
English EN
French FR
German DE
Italian IT
Portuguese PT
Russian RU
Spanish ES
Swedish SE

Where to put the code.

Remove InPlayer branding

As an addition to removing the InPlayer asset banner in the Branding settings, you can also remove the InPlayer branding from the bottom of the asset preview and paywall screens.

Get code.

That concludes this article.

Remember that there are many other ways of customising the paywall using code which you can find in our documentation here.

If you have any questions, don’t hesitate to contact us on

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