React (Create React App / Vite)

Integration guide for React applications using Create React App or Vite

Installation

Target file: public/index.html

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 public/index.html file:

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.antiblocker.io/ab.js" data-style="minimal" data-key="abk_****"></script>
  </body>
</html>

Important Note

The script should be placed before the closing </body> tag to ensure it doesn't block page rendering

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

Add the script before the closing </body> tag in your index.html
For Create React App, the file is located in the public/ folder
For Vite, the file is usually index.html in the project root
The script loads asynchronously and won't block your React app initialization

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.