Plug & play paywall component for your website
composer require tollbridge/laravel-socialite
TOLLBRIDGE_APP_ID=example.tollbridge.co
TOLLBRIDGE_CLIENT_ID=93ea8dfe-41c9-4618-8fb4-a276e87e073b
TOLLBRIDGE_CLIENT_SECRET=R7almCWY5UKZp7E4H7yxW7xTh0je4dprSdkUOV5d
Download this project as a ZIP file. Within the Wordpress plugins section, upload the plugin, then activate it from the list of plugins.
A Tollbridge.co account is required. You'll need the App ID, Client ID and Client Secret from the Tollbridge Integrations section.
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.
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.
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.
Absolutely! There are two ways to achieve this, depending on how many articles you wish to make free:
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.
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.
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.
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.
<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:
<script>
document.dispatchEvent(
new CustomEvent("TollbridgeAddView", {detail: "https://example.com/article"});
)
</script>
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.
The login button triggers the login flow to authenticate a user.
<button class="tollbridge-login-button">Login</button>
The subscribe button triggers the subscription flow to create a subscription.
<button class="tollbridge-login-subscribe">Subscribe</button>