Documentation

SDK Reference

Everything you need to integrate AdPulse 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

Basic Usage

Place an .adpulse-ad div anywhere in your page. Configure with data-* attributes.

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 can save its own card template from the advertiser builder. The SDK uses that saved design automatically, and individual placements can override template fields with optional 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.

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-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

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
import AdPulse from '@adpulse/sdk';

const sdk = new AdPulse({ publisherKey: 'ap_live_sk_...' });

// Render a single ad
sdk.render('#my-ad-slot', {
  adId: 'ad_9x3kz',
  position: 'float',
  animation: 'slideLeft',
  accentColor: '#38bdf8',
});

// Listen to events
sdk.on('impression', (data) => console.log('Ad viewed:', data));
sdk.on('click', (data) => console.log('Ad clicked:', data));
sdk.on('dismiss', (data) => console.log('Ad dismissed:', 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 } from '@adpulse/react';

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

      {/* Drop anywhere in JSX */}
      <AdSlot
        adId="ad_9x3kz"
        position="inline"
        animation="fadeUp"
        accentColor="#22c55e"
        closeable
      />

      <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 →