Gatsby

Integration guide for Gatsby static site generator and React framework

Installation

Target file: gatsby-ssr.js

Quick Integration

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

Script Tag

<script
      key="Antiblocker"
      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 gatsby-ssr.js file:

gatsby-ssr.js

import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="Antiblocker"
      src="https://cdn.antiblocker.io/ab.js"
      data-style="minimal"
      data-key="abk_****"
    />
  ])
}

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

Create gatsby-ssr.js in the project root if it doesn't exist
Use the onRenderBody API to inject the script into all pages
The script will be included during both build and runtime
Works with Gatsby's static generation and client-side hydration

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.