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:

  1. Add a single <script> tag to the <head> section of all the pages of your website where you want to use Connector
  2. 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:

These are the main features of Connector Script:

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 and Flowplayer.

  • Only one player instance per page is supported currently.
  • 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  

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, 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

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 tease​r 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,​ ​viewer​s ​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.