Install Client-Side SDK
Complete guide to installing and integrating paywalls into your website or Chrome extension.
Before Installation: Make sure you have created a paywall and configured it according to your needs.
Installation Methods
Paywalls can be installed in two different environments, each with its own specific requirements and setup process:
Website / Telegram App / SPA Installation
For websites and single-page applications, the installation process is straightforward and requires minimal setup.
Step 1: Get Installation Script
Navigate to your paywall settings and click the Install button to get the installation script.
Step 2: Add Script to Your Website
Place the paywall script as close to the beginning of your HTML page as possible. Ideally, include it within the <head></head> or at the beginning of the <body></body> tags.
<script>
// Your generated paywall script will be provided here
// Copy the exact script from your paywall dashboard
</script>Important: Always use the exact script provided in your paywall dashboard. The script is unique to your paywall and contains necessary configuration.
Step 3: Test Installation
After adding the script, test your paywall installation:
- Load your website in a browser
- Open browser console (F12 → Console tab)
- Check for errors - there should be no paywall-related errors
- Trigger paywall using your configured conditions
Chrome Extension Installation
Installing paywalls in Chrome extensions requires additional configuration for proper communication between the extension and the paywall service.
Extension Mode Required: Make sure your paywall is configured in Chrome Extension Mode in the paywall settings. Website mode will not work properly in extensions.
Step 1: Download Paywall Script
- Navigate to your paywall dashboard
- Click the Install button
- Switch to “Chrome extension” tab
- Download the script file (e.g.,
wall.1.0.0.js) - Place the file in the root directory of your extension (next to
manifest.json)
Step 2: Add Script to Extension Page
Add the following script to your main HTML file (usually index.html or app.html) within the <head> or <body> tags:
<script src="./wall.1.0.0.js"></script>Step 3: Configure manifest.json
Update your manifest.json file to include the necessary permissions and external connectivity.
Step 4: Configure background.js
Create or update your background.js file with the specified code to handle communication with the paywall service.
Step 5: (Optional) Restrict to New Users Only
If you want to show the paywall only to new users (those who installed the extension after paywall implementation), follow these additional steps:
undefined
Add to background.js:
chrome.runtime.onInstalled.addListener(function (details) {
if (details.reason === 'install') {
const installDate = new Date().toISOString();
chrome.storage.sync.set({ installDate });
}
});Next Steps
After installing client-side SDK: