Documentation

SDK Reference

Everything you need to integrate AdFlow SDK into any website or JavaScript framework.

Installation

Add the SDK script once to your HTML <head>. It loads asynchronously and has zero impact on page performance.

index.htmlhtml

<!-- Option A: CDN (recommended) -->
<script src="https://vulnera.online/sdk.js" async></script>

<!-- Option B: npm -->
npm install @adpulse/sdk

Advanced SDK (Beta)

The /beta/sdk-anim.js script is a specialized, feature-rich SDK version optimized for advanced configurations, high-impact micro-animations, and curved shape customizations.

When to Use

Use the Beta SDK when you need layouts with custom polygons (data-curve-path), adjustable visual dimensions, or advanced interactive scroll animations. It is ideal for modern marketing pages, product hero slots, and graphic layouts where standard rectangular containers feel too rigid.

How to Use

1. Load the advanced script from the beta directory instead of the standard SDK:
<script src="https://vulnera.online/beta/sdk-anim.js" async></script>2. Define your placement wrapper elements using the class name adpulse-beta-anim (instead of the standard adpulse-ad):
<div class="adpulse-beta-anim" data-ad-id="ad_9x3kz" data-publisher-key="ap_live_pk_..."></div>

Basic Usage

Place an .adpulse-ad div anywhere on your page. Configure details easily with data-* parameters.

index.htmlhtml

<!-- Minimal inline ad -->
<div class="adpulse-ad" data-ad-id="ad_9x3kz" data-publisher-key="ap_live_pk_..."></div>

<!-- Full configuration -->
<div class="adpulse-ad" data-ad-id="ad_9x3kz" data-publisher-key="ap_live_pk_..." data-position="inline" data-animation="fadeUp" data-theme="dark" data-template="classic" data-accent="#22c55e" data-background="#12103a" data-text-color="#ffffff" data-cta-style="filled" data-card-size="standard" data-delay="300" data-cta="Get Started Free" data-closeable="true" data-show-icon="true" data-show-badge="true" data-show-description="false" data-lazy="true" data-radius="12"
></div>

Custom Templates

Each ad placement can render a predefined style template. The AdFlow SDK loads your saved campaign style preferences automatically, and individual placements can override specific template fields with custom data attributes.

Classic

Balanced default card with icon, headline, supporting text, and button.

Minimal

Quiet text-first card for blogs, docs, and content-heavy pages.

Media

Visual card with an image area for product shots, banners, or brand art.

Spotlight

High-emphasis card for launches, offers, and floating promotions.

Custom Code

Completely custom HTML/React component snippet with Tailwind or Bootstrap support.

template-overrides.htmlhtml

<!-- Saved template is used automatically -->
<div class="adpulse-ad" data-ad-id="ad_9x3kz" data-publisher-key="ap_live_pk_..."></div>

<!-- Optional per-page override -->
<div class="adpulse-ad" data-ad-id="ad_9x3kz" data-publisher-key="ap_live_pk_..." data-template="media" data-image="https://example.com/product-shot.jpg" data-background="#10172a" data-accent="#38bdf8" data-cta-style="outline"
></div>

Parameters Reference

Attribute	Type	Required	Default	Description
`data-ad-id`	string	Yes	-	Copy this from Dashboard > Publisher Keys or Tracked Ads after binding an ad
`data-publisher-key`	string	Yes	-	Your bound publisher key for this website and ad
`data-position`	string	No	inline	inline \| sidebar \| float \| banner \| overlay
`data-animation`	string	No	fadeUp	fadeUp \| fadeIn \| slideRight \| slideLeft \| bounceSoft \| none
`data-theme`	string	No	dark	dark \| light \| auto (follows system preference)
`data-template`	string	No	saved ad setting	classic \| minimal \| media \| spotlight
`data-accent`	color	No	#22c55e	CSS color for buttons and highlights. Accepts hex, rgb, hsl.
`data-background`	color	No	saved ad setting	Card background color. Hex colors are recommended.
`data-text-color`	color	No	#ffffff	Primary text color for the ad card.
`data-cta-style`	string	No	filled	filled \| outline \| link
`data-card-size`	string	No	standard	compact \| standard \| large
`data-image`	string	No	-	Image URL used by the media template.
`data-show-icon`	boolean	No	true	Show or hide the icon area.
`data-show-badge`	boolean	No	true	Show or hide the badge text.
`data-show-description`	boolean	No	false	Show or hide the longer description on roomy templates.
`data-delay`	number	No	0	Milliseconds before rendering the card after page load
`data-cta`	string	No	Learn More	Custom call-to-action button label
`data-cta-icon`	string	No	-	Custom icon (emoji/text character or image URL) inside the CTA button
`data-closeable`	boolean	No	false	Show an X button letting users dismiss the ad
`data-lazy`	boolean	No	true	Only render when card enters the viewport (IntersectionObserver)
`data-radius`	number	No	12	Card border radius in pixels
`data-card-width`	string	No	-	Custom card width override (e.g. '400px', '100%')
`data-card-height`	string	No	-	Custom card height override (e.g. '300px', '100%')
`data-card-padding`	string	No	-	Custom card padding override (e.g. '20px', '12px 24px')
`data-curve-path`	string	No	-	CSS polygon path for the curved image (e.g. 'polygon(0 0, 100% 0%, 100% 100%, 39% 100%)')
`data-curve-width`	string	No	200px	Custom width for the curved visual slot
`data-curve-height`	string	No	100%	Custom height for the curved visual slot
`data-image-width`	string	No	400px	Custom width for the image inside the curved slot
`data-image-height`	string	No	100%	Custom height for the image inside the curved slot

JavaScript API

For more control, use the programmatic JavaScript API. Import the SDK as an ES module and manage ads in code.

app.jsjavascript

// Programmatic initialization (Vanilla JS / TS module)
import { initAdPulse } from '@adpulse/sdk';

// Initialize and inject the SDK script
initAdPulse({ apiBase: 'https://vulnera.online' });

// Use DOM APIs once loaded
window.AdPulse.on('impression', (data) => console.log('Ad viewed:', data));
window.AdPulse.on('click', (data) => console.log('Ad clicked:', data));

React / Next.js

Use the official React wrapper for seamless JSX integration. Fully typed with TypeScript.

BlogPost.tsxtsx

// React / Next.js component
import { AdSlot, AdSlotBeta } from '@adpulse/sdk';

export default function BlogPost() {
  return (
    <article>
      <h1>Your Article</h1>
      <p>First paragraph...</p>

      {/* Standard Integration with custom overrides */}
      <AdSlot
        adId="ad_9x3kz"
        publisherKey="ap_live_pk_..."
        position="inline"
        animation="fadeUp"
        accent="#22c55e"
        closeable
        cardWidth="100%"
        cardPadding="20px"
        ctaIcon="🚀"
      />

      {/* Advanced Curved Visuals (loads /beta/sdk-anim.js) */}
      <AdSlotBeta
        adId="ad_9x3kz"
        publisherKey="ap_live_pk_..."
        position="inline"
        template="media"
        curve
        curvePath="polygon(0 0, 100% 0%, 100% 100%, 39% 100%)"
        curveWidth="200px"
        cardHeight="220px"
      />

      <p>Second paragraph...</p>
    </article>
  );
}

Events

Event	Payload	Description
`impression`	`{ adId, timestamp }`	Fired when the ad enters the viewport
`click`	`{ adId, href, timestamp }`	Fired when the CTA button is clicked
`dismiss`	`{ adId, timestamp }`	Fired when user closes the ad
`render`	`{ adId, position }`	Fired when the card finishes rendering
`error`	`{ adId, error }`	Fired if the ad fails to load

Ready to start?

Try the live preview builder to generate your embed code instantly.

Open Preview Builder →