In-Page Configuration

Introduction to In-Page Configuration

The easiest way to get started is by using Connector Admin Interface. See chapter Connector Admin Interface for more details.

In-Page Configuration offers a more fine-grained control and additional features. It can be used in combination with Connector Admin Interface to fit the specific needs of your integration.

See the Configuration Feature Matrix for an overview of the features each way of configuration offers.

Note

To be able to use all In-page Configuration Properties, make sure to use the latest Connector Script release (see URLs of Connector Script).

While most In-Page Configuration Properties can be used to configure both forms of Connector Script, the syntax differs between Connector Script Classic and Connector Script For Video Players.

In-Page Configuration Syntax Of Connector Script Classic

When using Connector Script Classic, In-Page Configuration Properties are defined by adding <meta> elements to the <head> section of a page.

Examples

Example 1:

As an example, here’s the source code of a simplified article page that integrates Connector Script Classic and defines two In-Page Configuration Properties:

<html>
    <head>
        <title>This is a Connector enabled article with In-Page Configuration</title>
        <!-- LaterPay Connector In-Page Configuration -->
        <meta property="laterpay:connector:article_id" content="my_custom_article_id">
        <meta property="laterpay:connector:appearance:purchase_overlay:variant" content="raw-white">
        <!-- LaterPay Connector Script -->
        <script src="[Connector Script URL goes here]"></script>
    </head>
    <body>
        <!-- Page content... -->
    </body>
</html>

In the example above, note that:

  • All <meta> tags which define In-Page Configuration Properties are placed before the <script> element that includes Connector Script.
  • “[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.

Example 2:

Some In-Page Configuration Properties can have multiple values (for example Article ID). To define those multi-value properties, simply add more <meta> elements with the same key.

The following example shows the HTML source code of a simplified article page that integrates Connector Script Classic and defines two values for the In-Page Configuration Property Article ID:

<html>
    <head>
        <title>This is a Connector enabled article with In-Page Configuration</title>
        <!-- LaterPay Connector In-Page Configuration -->
        <meta property="laterpay:connector:article_id" content="sports_bundle">
        <meta property="laterpay:connector:article_id" content="news_bundle">
        <meta property="laterpay:connector:appearance:purchase_overlay:variant" content="raw-white">
        <!-- LaterPay Connector Script -->
        <script src="[Connector Script URL goes here]"></script>
    </head>
    <body>
        <!-- Page content... -->
    </body>
</html>

Note

When using Connector Script Classic, the names of In-Page Configuration Properties are written in lower_case_underscore_style.

In-Page Configuration Syntax Of Connector Script For Video Players

When using Connector Script For Video Players, In-Page Configuration Properties are defined directly in the player configuration in the namespace laterpayConnector.

Examples

Example 1:

The following example shows the HTML source code of a minimalistic page that integrates JW Player and Connector Script For Video and defines two In-Page Configuration Properties:

<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',
                laterpayConnector: {
                  articleId: 'my_custom_article_id',
                  video: {
                    mode: 'skip-ad-pre-roll'
                  }
                }
            })
        </script>
    </body>
</html>

In the example above, note that:

  • 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.
  • “[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.

Example 2:

Some In-Page Configuration Properties can have multiple values (for example Article ID). To define those multi-value properties, simply pass them as an array.

The following example shows the HTML source code of a minimalistic page that integrates JW Player and Connector Script For Video and defines defines two values for the In-Page Configuration Property Article ID:

<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',
                laterpayConnector: {
                  articleId: ['my_custom_article_id', 'news_bundle'],
                }
            })
        </script>
    </body>
</html>

Note

When using Connector Script For Video Players, the names of In-Page Configuration Properties are written in camelCase.