Webflow

Integrate ad blocker detection into your Webflow design project to monitor visitor ad blocker usage and protect your site's monetization strategy

Installation

Target file: Project Settings → Custom Code → Footer Code

Quick Integration

Add the following script tag to your HTML. Replace the data-key value with your actual API key.

Script Tag
<script src="https://cdn.antiblocker.io/ab.js" data-style="minimal" data-key="abk_****"></script>

Complete Example

Here's a complete example showing where to place the script in your Project Settings → Custom Code → Footer Code file:

Project Settings → Custom Code → Footer Code
<script src="https://cdn.antiblocker.io/ab.js" data-style="minimal" data-key="abk_****"></script>

Configuration

Script Attributes

data-keyYour unique AntiBlocker API key (required)
data-styleDisplay style - choose one of 6 variants: "classic", "dark", "educational", "friendly", "minimal", or "urgent"

Implementation Notes

  • Open your Webflow project and access Project Settings
  • Click on the 'Custom Code' tab in the settings panel
  • Locate the 'Footer Code' section
  • Paste the integration script in the footer code area
  • The script will automatically be applied site-wide

Best Practices

Performance

Place script before closing </body> tag. The script loads asynchronously and doesn't block page rendering.

Testing

Test integration in staging environment before deploying to production. Verify script loads correctly.

API Key

Obtain your unique API key from the AntiBlocker dashboard. Never share your key publicly.

Monitoring

Track detection rates and user responses through the AntiBlocker analytics dashboard.