Skip to content



Tulo Paywall - Javascript v1.3

Target audience: Developers, Stakeholders

Including the javascript

For the Tulo Paywall to function as it should, you will need to include our JS on your site. Choose the correct file, depending on what environment and version you are working in.

Environment URL

Embedding your Tulo Paywall

The Paywall Javascript is available in multiple versions. To avoid introducing breaking changes and browser caching issues, new features in the Paywall Javascript will be introduced as new versions. You can read more about all available versions here.

We strongly recommend you use the same version for both the CSS and JavaScript files to guarantee everything works as intended. For example, if you use v1.3 of our JavaScript, you should also be using v1.3 of our CSS. The changes that have been introduced in a version (as compared to it's predecessor) are available at the bottom of the page of each version.

Define the HTML container for your Paywall

To embed your Tulo Paywall, you will first need to define an HTML container where the paywall should live. This container can be anywhere on your site, though we recommend you give it plenty of space.

<div id="tulo-paywall">
    <template id="paywall-loader-template">
        <div class='lds-dual-ring'></div><p><i>Loading ..</i></p>
    <div id="paywall-container"></div>

Initializing the Paywall Javascript

With the HTML container in place, you must initialize the Javascript. This will take care of embedding your paywall into the container:

<script type="text/javascript">
    new TuloPaywall().Init({
        url: "",
        jwtToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
        debug: false
Paywall.Init example

When initializing the Tulo Paywall script, an url and jwtToken must be provided. For information on all available attributes see the version-specific documentation.

Tulo Paywall URL

Choose the correct url, depending on what environment you are working in.

Environment URL

Text resources

There are several overridable text resources. Here you'll find which they are and when and where they occur. These resources can overridden using the resources property.

Property Type Default value Description
errorHeader string An error has occurred The header shown when an error occurs
errorDescription string Something unexpected happened. Please try again later, and if the problem persists, contact support. The description shown when an error occurs

Error handling

If an error within the Tulo Paywall occurs, an onError function will be triggered. By default, this means that an error will be shown to the end-user, and you will receive debug information (granted the debug flag is set to true) in the browser console.

If you would like to override this behavior, you can simply define an onError function when initializing the paywall. Furthermore, the function should accept one argument, in the form of the exception that was thrown. The exception that is thrown will always contain the following information:

Property Type Description
name string Will always be set to "PaywallError"
code string The error code that was thrown
field string The field relating to the error that was thrown
pwCorrelationId string The correlation ID of the error. If you contact our support regarding a Tulo Paywall error, this ID should always be included in the support request.
toString function Returns a stringified version of the error.

The default error that is shown to the end user will always look like the following, though the text resources are customizable via the resources property.

Tulo Paywall Error

Attributes available on initialization

Below is a list of attributes available for use when initializing the Paywall Javascript v 1.3.

Attribute Type Description Required Available as resource in Paywall template
url string Tulo Paywall URL Yes No
jwtToken string Generated server side in Step 4 Yes No
containerId string The ID of the HTML container where the Paywall should be initialized. Will default to paywall-container. No No
debug boolean Set to true for additional information when troubleshooting No No
accountOrigin string Read more about Account origin No No
trafficSource string Read more about Traffic source No No
merchantReference string Read more about Merchant reference No No
returnUrl string Read more about Return url Yes Yes, [RETURN_URL]
backUrl string Can be used as an alternative link back to the website from Tulo Shop, not to be mistaken for the returnUrl. No No
loginUrl string Can be used to display a link for the customer to log in. No Yes, [LOGIN_URL]
shopUrl string Can be used for displaying a custom link to the Tulo Shop. For example to all available offers. No Yes, [SHOP_URL]
ticketLoginUrl string Used to login the user after purchase. No Yes, [TICKET_LOGIN_URL]
utmSource string GA support No No
utmMedium string GA support No No
utmCampaign string GA support No No
utmContent string GA support No No
resources object Overridable text resources. You'll find the available resources and default values here. No No
engageTracking object Engage BI tracking meta data No No
string If the Tulo Paywall is initiated from an article add the articleId to this parameter. No No
array Categories e.g. ["cat 1", "cat 2"] No No
array Sections e.g. ["sec 1", "sec 2"] No No
onError function Callback if a Tulo Paywall error occurs. Will override default onError behavior. Read more here. No No
customVariables object Custom variables to be used in the Paywall template upon rendering, a set of keys and values No Yes, each supplied key is available
string Value for the custom variable
Valid characters for key: [a-zA-Z-_]
Size range for key: ..100
Forbidden characters for value: <>{}\ &lt; &gt;
Size range for value: ..1024
No Yes, the key name is capitalized and referenced in the template by adding brackets around the name

Changes from version 1.2

Support for custom container

You can now specify where you would like the Paywall to be initialized. Note that the "tulo-container" and associated spinner is still separate from the actual drop-in container.

If no container id is specified, we will default to paywall-container.