Setting up the SDK

With your custom Adster SDK URL and configured Placement IDs, you're now ready to integrate the SDK into your website.

This section explains how to:

Load the Adster Web SDK into the browser
Initialise it to activate ad rendering

You can find more details about how to obtain your SDK URL in the Creating Your Adster Account → Domain & App Setup section.

⚠️ Both steps are required. If either is skipped, ads will not be shown.

Setting up Pattern

For all stacks, the recommended integration pattern is:

Load the SDK (via <script> or dynamic injection)
Once loaded, immediately initialise using AdsterSDK().init()

This should happen in the same file, typically a layout, entry, or wrapper component.

Framework-Specific Instructions

Use the tabs below to view the setup steps for your tech stack:

Where to place it:

Inside a shared HTML template (e.g. header.html, footer.html) or directly before </body> on each page.

<!-- Step 1: Load the SDK -->
<script src="YOUR_ADSTER_SDK_URL"></script>

<!-- Step 2: Initialize the SDK -->
<script>
  document.addEventListener("DOMContentLoaded", async () => {
    try {
      const sdk = new AdsterSDK();
      await sdk.init();
    } catch (err) {
    }
  });
</script>

Where to place it:

In your top-level component file (e.g. App.jsx) using useEffect()

useEffect(() => {
  // Step 1: Load the SDK
  const script = document.createElement('script');
  script.src = "YOUR_ADSTER_SDK_URL";
  script.async = true;

  // Step 2: Initialize the SDK (after script loads)
  script.onload = async () => {
    try {
      const sdk = new window.AdsterSDK();
      await sdk.init();
    } catch (err) {
    }
  };

  script.onerror = () => {
  };

  document.body.appendChild(script);
}, []);

Where to place it:

Inside pages/_app.js, using the next/script component

import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        // Step 1: Load the SDK
        src="YOUR_ADSTER_SDK_URL"
        strategy="beforeInteractive"
        
        // Step 2: Initialize the SDK (after script loads)
        onLoad={async () => {
          try {
            const sdk = new window.AdsterSDK();
            await sdk.init();
          } catch (err) {
          }
        }}
        onError={() => {
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Where to place it:

In app/layout.js. Mark the file with 'use client' to access window.

'use client';
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          // Step 1: Load the SDK
          src="YOUR_ADSTER_SDK_URL"
          strategy="beforeInteractive"
          
          // Step 2: Initialize the SDK (after script loads)
          onLoad={async () => {
            try {
              const sdk = new window.AdsterSDK();
              await sdk.init();
            } catch (err) {
            }
          }}
          onError={() => {
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

YOUR_ADSTER_SDK_URL is the url you obtained during the Step 2: Domain & App Setup step.

Once loaded and initialised, the SDK will begin listening for ad container div and load ads accordingly.

PreviousCreating Your Adster Account

NextLoading Ads

Last updated 1 year ago