<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=442498563201411&amp;ev=PageView&amp;noscript=1">

Setting up Your First LaterPay Connector Template

Topics: Connector · Articles
Experience Level: Beginner
June 24, 2020 · 7 min read






LaterPay's Connector Script is one of our most popular and powerful integration methods. In this article we are going to walk through setting up a Connector Template for the first time. In its simplest terms, a Template is a feature that allows you to specify which portions of your site to put behind a paywall.


You can set up one Template, if you would like one, standard paywall across your entire site, or multiple Templates, if you would like multiple paywalls (ie: one for news, another for sports, etc.)


Below is the template screen which we will be referencing throughout this guide:



There are several components on this screen which we will go through one-by-one:


Name: This is the internal name that you would like to use to help you and your team know which particular paywall this Template defines.


Template ID: This is for the LaterPay team in case we need to offer support; you can disregard this field.


Content to Sell: This section is where you will define exactly what content you would like to go behind the paywall. We will go into this in more detail below.


Content to display under overlay (Excerpt): This is optional but is available if you would like to specify a specific piece of content that should NOT be hidden behind the paywall.


"Content to Sell" Tips & Tricks

The "Content to Sell" section is one of the most important areas to define when you are setting up your paywall so we will go through a few common set ups below:


TIP: This area expects a "CSS class selector" for example .article-content ; you must include the "." in front. If you are not familiar with CSS classes, you can check out this helpful introductory article.



Option 1: Custom CSS Selector

Although LaterPay does offer a recommended CSS selector, you are welcome to use your own, custom CSS class; it is your own site after all!


Use this when: You already have your site set up with your premium content in its own CSS class or you do not want to use option 2. Common examples include: .premium  .paid  .article  .story


Example code:

<div class="premium">
Content to protect behind paywall

Content to Sell: .premium



Option 2:  Always after a Certain Paragraph

If you don't already have a CSS class set up, one simple solution is to have the paywall always display after a certain paragraph, for example, always after the first paragraph.


Use this when: You do not already have you site set up with your premium content in its own CSS class and you are comfortable with always displaying the first paragraph for free and hiding the rest of your content.


Example code:

<p>Free content</p>
<p>Content to protect behind paywall</p>
<p>Content to protect behind paywall</p>

Content to Sell: p:nth-child(n+2)


Option 3: LaterPay Default 

By default, if you don’t specify a CSS selector, connector will use: [data-lp-show-on-access]


Use this when: None of the options above will work for your setup.


Example code:

<div data-lp-show-on-access>
Content to protect behind paywall

Content to Sell: can be left blank




Tip: For options 1 & 3, you can also protect images by adding the css selector to an <img> tag. So for example, if you only want to put an image behind the paywall, but keep all text accessible, simply copy the CSS class from your "Content to Sell" field minus the "." into the image tag.

Content to Sell: .paid

Example Code: <img src=”foo.jpg” class="paid">



For more information on Connector Templates, visit our Developer documentation.