Tollbridge Paywall Documentation

Plug & play paywall component for your website

Laravel Integration

Composer Install

composer require tollbridge/laravel-socialite

Environment Variables

TOLLBRIDGE_APP_ID=example.tollbridge.co
TOLLBRIDGE_CLIENT_ID=93ea8dfe-41c9-4618-8fb4-a276e87e073b
TOLLBRIDGE_CLIENT_SECRET=R7almCWY5UKZp7E4H7yxW7xTh0je4dprSdkUOV5d

WordPress Plugin

Installation

Download this project as a ZIP file. Within the Wordpress plugins section, upload the plugin, then activate it from the list of plugins.

Activation

A Tollbridge.co account is required. You'll need the App ID, Client ID and Client Secret from the Tollbridge Integrations section.

Integrations

Once the plugin has been activated, the "Account Settings" panel is available via the "Tollbridge" admin menu. Enter the information from the Tollbridge Integrations section and hit Save. The plugin will attempt to validate your credentials, and will let you know if there's any issue with them. The "Callback URL" shown on this page needs to be entered into the Tollbridge backend, in the Integrations section.

Account Settings


Paywall Configuration

The general configuration of the paywall takes place inside the Tollbridge backend (layout options, number of articles before paywall is shown, etc). Within Wordpress, you are able to configure which subscription plans should have access to which articles.

Configuration

The "Change paywall access over time" allows you to be flexible with paywall rules over time. If you wish to have all recent content freely available, but have it moved to a paid archive after 90 days, this would be done by setting the options shown in the screenshot above.


Configuration options can be set globally, then overridden on an article-by-article basis. At the bottom of the article editor screen, a set of options matching the global configuration options is available. This allows you to make exceptions for particular articles, e.g. have a fully-paywalled site but make a particular article free to access.

Article


FAQ

Can I have some articles behind the paywall and some free to access?

Absolutely! There are two ways to achieve this, depending on how many articles you wish to make free:

  • set the global paywall rules to restrict access, then on the articles you want free, override the paywall settings on those articles.
  • set no global paywall rules (making the full site free to access), then set the paywall restrictions on articles you wish to limit.

What about time-based access, e.g. "paywalled for a week, then free to access"?

This can be managed in the global settings, selecting the "Change paywall access over time" section, and selecting the number of days after which access should change. This setting can also be set on a per-article level.

For more help, refer to the integration documentation.

Javascript Client Integration

Include the following within the <head> section of your app:

<meta name="tollbridge" content="1,2">

Add the following at the top of the <body> section:

<script type="text/javascript" src="https://example.tollbridge.co/js/tollbridge.js"></script>

<tollbridge-config 
    app-id="example.tollbridge.co" 
    client-id="your-client-id" 
    callback-url="https://example.com/tollbridge-callback">
</tollbridge-config>

On the tollbridge admin section, you can customize the view to be Full Screen Overlay, Slideup from bottom or Inline overlay. This component will block the entire page displaying the registration widget on the selected position.

Paywall Eligibility

To determine the paywall eligibility, add the following header tag to any page you want to hide behind the paywall:

<head>
  <meta name="paywall-eligibility" content="1,2,3">
</head>

Include a comma separated list of the plans that will grant the user access to see the content.

Paywall Events

Listen to triggered events from the SDK. You can use these events to integrate them with an analytics provider or customize the user experience based on them.

  • TollbridgeSiteLoaded: This occurs when the site configuration has been loaded.
  • TollbridgeUserLogin: This occurs when a user logs in using the Tollbridge JS-SDK.
  • TollbridgeUserLogout: This occurs when a user logs out using the Tollbridge JS-SDK.
  • TollbridgePaywallMatch: This occurs when it's possible to display the meter-paywall. It's calculated based on the free articles limit specified for the website, and the users' visits to that particular website. It returns an object that contains this data: count_of_articles_read, count_of_articles_left and count_of_articles_limit.
  • TollbridgePaywallTriggered: This occurs the moment after which a paywall dialog is rendered.
<script>
    
    document.addEventListener("TollbridgeSiteLoaded", function (e) {
        console.log("TollbridgeSiteLoaded");
    });
  
    document.addEventListener("TollbridgeUserLogin", function (e) {
        console.log("TollbridgeUserLogin");
    });

    document.addEventListener("TollbridgeUserLogout", function (e) {
        console.log("TollbridgeUserLogout");
    });

    document.addEventListener("TollbridgePaywallMatch", function (e) {
        console.log("TollbridgePaywallMatch", e?.detail);
    });

    document.addEventListener("TollbridgePaywallTriggered", function (e) {
        console.log("TollbridgePaywallTriggered");
    });
    
</script>

Dispatch events for Tollbridge:

  • TollbridgeAddView: You can trigger this event if you want to add a leaky view, for example if you are loading articles with an infinite scroll.
<script>

    document.dispatchEvent(
            new CustomEvent("TollbridgeAddView", {detail: "https://example.com/article"});
    )

</script>

Buttons

Class names are used to identify buttons that will be used to trigger specific flows. All our class names are prefixed with "tollbridge" to ensure no conflict arises between your class names and ones used to trigger our flows. You can add those class names to multiple buttons on the same page, and they would all trigger the same flows.

Login Button

The login button triggers the login flow to authenticate a user.

<button class="tollbridge-login-button">Login</button>
Subscribe Button

The subscribe button triggers the subscription flow to create a subscription.

<button class="tollbridge-login-subscribe">Subscribe</button>

A Publisher Plus product developed by Square1 ©2022