Loading Ads

Once the Adster SDK is successfully loaded and initialised, you're ready to render ads on your site using Placement IDs. These are defined during the Creating Your Adster Account → Configure Placement IDs step.

---

How to Load Ads

Place a div element in your layout, page, or component wherever you want the ad to appear. Use the corresponding Placement ID as the id attribute. The style can be customised based on your layout needs — the examples below include minimal styles to ensure visibility, but you can apply your own classes or styles as required.

---

Framework-Specific Examples

🟢 Vanilla JavaScript / HTML

<div id="YOUR_PLACEMENT_ID" style="min-width: 250px; min-height: 50px;"></div>

⚛️ React.js (CRA / Vite)

<div id="YOUR_PLACEMENT_ID" style={{ minWidth: '250px', minHeight: '50px' }} />

⚙️ Next.js (Pages Router)

Example usage inside any page component:

export default function YourComponent() {
  return (
    <div>
      <div id="YOUR_PLACEMENT_ID" style={{ minWidth: '250px', minHeight: '50px' }} />
    </div>
  );
}

🧩 Next.js (App Router)

Example usage inside any route component:

export default function YourComponent() {
  return (
    <div>
      <div id="YOUR_PLACEMENT_ID" style={{ minWidth: '250px', minHeight: '50px' }} />
    </div>
  );
}

YOUR_PLACEMENT_ID is one of the placement ids set up during Creating Your Adster Account → Configure Placement IDs step.

---

As long as the SDK is initialised, any matching Placement ID on the page will be recognised and filled automatically.

Need to define more ad slots or manage existing ones? Visit the Adster dashboard or refer to your onboarding instructions.