Connector Script¶

Connector Script is a lightweight JavaScript app that is embedded into your website and acts as gate keeper for your paid content or as a video player plugin.

Setting up an integration is easy:

Add a single <script> tag to the <head> section of all the pages of your website where you want to use Connector
Configure the pricing of your content in Connector Admin Interface or via In-Page Configuration

Since major version 3, Connector Script comes in two forms:

Connector Script Classic: Manages any paid content on a website, optimized for text and image based articles
Connector Script For Video Players: Dedicated plugins for JW Player and Flowplayer

These are the main features of Connector Script:

Load purchase options that have been configured in Connector Admin Interface or via In-Page Configuration
Hide paid content or stop video and render Purchase Overlay which lists purchase options, if the current user should not have access
Identify users and manage user tokens
Allow for skipping video ads (Connector Script For Video Players only)

Connector Script Classic¶

This is the generic JavaScript client for Connector. It is optimized for text and image based articles but can manage any paid content on a website. Up to major version 2, this was the only form of Connector Script

Integration¶

As an example, here’s the HTML source code of a very simple article page that integrates Connector Script Classic:

<html>
    <head>
        <title>This is a Connector enabled article</title>
        <script type="text/javascript" src="[Connector Script URL goes here]"></script>
    </head>
    <body>
        <div data-lp-show-on-access>
            This content will be hidden and the text will be scrambled.<br>
            Also, a blurred copy of this content will be displayed underneath
            the Purchase Overlay.
        </div>
    </body>
</html>

Note, that in the example above “[Connector Script URL goes here]” is a placeholder for the actual Connector Script URL. It depends on a variety of parameters which are determined by the particular integration. You can find the proper URL(s) in section URLs of Connector Script. More details about how and why URLs are put together like this are provided in chapter Regions, Environments and Locales.

Content Obfuscation¶

When Connector Script Classic has determinded that a user should not have access to an article, it changes three things on the current page:

The “Content to sell” is hidden and all contained text is scrambled
The Purchase Overlay is rendered as a replacement of the “Content to sell”
Blurred replacement content is rendered underneath the Purchase Overlay

By default, the replacement content is a copy of the scrambled “Content to sell”. Optionally, you can defined the “Content to display under overlay (Excerpt)” to select other element(s) on the page that should be used as the replacement content instead of the scrambled “Content to sell”.

To define the “Content to sell” and the “Content to display under overlay (Excerpt)” you can either create Templates in Connector Admin Interface or you can mark elements directly in the HTML source of a page using the following HTML data attributes:

Selector	HTML Data Attribute
Content to sell	`data-lp-show-on-access`
Content to display under overlay (Excerpt)	`data-lp-replacement-content`

Example 1: Defining “Content to sell” only

<div data-lp-show-on-access>
    This content will be hidden and the text will be scrambled.<br>
    Also, a blurred copy of this content will be displayed underneath the Purchase Overlay.
</div>

Example 2: Defining both “Content to sell” and “Content to display under overlay (Excerpt)”

<div data-lp-show-on-access>
    This content will be hidden and the text will be scrambled.
</div>
<div data-lp-replacement-content>
    A blurred copy of this content will be displayed underneath the Purchase Overlay.
</div>

Example 3: Selecting multiple elements

<div data-lp-show-on-access>
    "Sell content" element 1:<br>
    This content will be hidden and the text will be scrambled.
</div>
<div data-lp-show-on-access>
    "Sell content" element 2:<br>
    This content will also be hidden and the text will be scrambled.
</div>
<div data-lp-replacement-content>
    "Content to display under overlay (Excerpt)" element 1:<br>
    A blurred copy of this content will be displayed underneath the Purchase Overlay.
</div>
<div data-lp-replacement-content>
    "Content to display under overlay (Excerpt)" element 2:<br>
    A blurred copy of this content will also be displayed underneath the Purchase Overlay.
</div>

Connector Script For Video Players¶

Since major version 3, Connector Script also comes in the form of dedicated video player plugins for JW Player, Flowplayer and Video.js.

Note

When using mode “Sell Video” in combination with playlists, viewers can not purchase access to individual videos separately but only to the whole playlist. This is because configuration is applied on a per-player basis, not per-video.

Support matrix¶

Player Name	Player Version	Sell Video	Skip Ad Pre-Roll	Skip Ad Pre-Play
JW Player	>= 7	✅	✅	✅
Flowplayer	7	✅		✅
Video.js	7	✅
3Q		✅

Integration¶

As an example, here’s the HTML source code of a minimalistic page that integrates JW Player and Connector Script For Video:

<html>
    <head>
        <title>This is a Connector enabled video page</title>
        <script type="text/javascript" src="[JW Player URL goes here]"></script>
        <script type="text/javascript" src="[Connector Script URL goes here]"></script>
    </head>
    <body>
        <div id="video-container"></div>
        <script type="text/javascript">
            jwplayer('video-container').setup({
                file: 'video-file.mp4'
            })
        </script>
    </body>
</html>

Some things to note in the example above:

The <script> tag that loads Connector Script has to inserted into the <head> after the <script> tag that loads JW Player for the integration to work.
“[JW Player URL goes here]” is a placeholder for the actual JW Player URL. It depends on your particular integration.
“[Connector Script URL goes here]” is a placeholder for the actual Connector Script URL. It depends on a variety of parameters which are determined by the particular integration. You can find the proper URL(s) in section URLs of Connector Script. More details about how and why URLs are put together like this are provided in chapter Regions, Environments and Locales.

The example above can be applied to Flowplayer and Video.js, too. The only differences to a JW Player integration are:

The script URLs for the player and for Connector Script
The JavaScript code that initializes the player

Code examples for all supported players can be found in chapter In-Page Configuration Properties Specific To Connector Script For Video Players.

Modes¶

Connector Script For Video Players can operate in three distinct modes:

Mode: Sell Video¶

This mode allows you to sell access to a video. Optionally you can define the length of a teaser after which the video stops and the viewers are presented with the Purchase Overlay which lists purchase options.

Mode: Skip Ad Pre-Roll¶

In this mode, while an advertisement is playing, viewers can skip it at any moment and purchase the ad-free access they prefer.

By default, when the user has clicked the skip-ad button, this mode presents the Purchase Overlay which lists one or more purchase options. You can opt-in to a “OneClick” experience that redirects the viewers directly to the LaterPay purchase dialogs when they click on the skip-ad button.

Note, that only one purchase option can be offered when “OneClick” is enabled. If multiple purchase options are available, the first one is selected.

Mode: Skip Ad Pre-Play¶

In this mode, prior to the start of an advertisement, viewers are offered one or more purchase options. They can then choose to either purchase ad-free access or cancel the Purchase Overlay and watch the ads.

Configuration¶

Read more about the configuration of the video player plugins in chapter In-Page Configuration Properties Specific To Connector Script For Video Players.