BUZER
Skip to main content
Integration time3 minutes

How to Add Ads to Svelte with Buzer (2026 Guide)

Svelte compiles your components into efficient vanilla JavaScript with no runtime overhead. Buzer is a perfect match for Svelte's philosophy of minimal footprint — the ad script is under 5KB and uses native DOM APIs. Add ads to your Svelte or SvelteKit app in about 3 minutes.

Step-by-Step Integration

1

Sign up for Buzer

Create your publisher account at buzer.xyz. Authenticate with Face ID or Touch ID. No crypto setup needed.

2

Add the Buzer script

For SvelteKit, add the script in your app.html file. For standalone Svelte (Vite), add it to index.html.

html
<!-- SvelteKit: src/app.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  %sveltekit.head%
</head>
<body data-sveltekit-prerender-data>
  <div style="display: contents">%sveltekit.body%</div>
  <script async src="https://cdn.buzer.xyz/x402-ad.js"></script>
</body>
</html>
3

Create a BuzerAd component

Create a Svelte component for ad placements. The onMount lifecycle function ensures the ad loads after the DOM is ready.

html
<!-- src/lib/components/BuzerAd.svelte -->
<script lang="ts">
  import { onMount } from 'svelte';

  export let size = '300x250';

  let adElement: HTMLDivElement;

  onMount(() => {
    if (window.buzer && adElement) {
      window.buzer.refresh(adElement);
    }
  });
</script>

<div
  bind:this={adElement}
  data-buzer-ad
  data-size={size}
  style="display: flex; justify-content: center;"
/>
4

Use the component in your pages

Import BuzerAd in any Svelte page or layout. For SvelteKit, use it in +page.svelte files.

html
<!-- src/routes/blog/[slug]/+page.svelte -->
<script lang="ts">
  import BuzerAd from '$lib/components/BuzerAd.svelte';
  export let data;
</script>

<article>
  <h1>{data.title}</h1>
  <BuzerAd size="728x90" />
  <div class="prose">
    {@html data.content}
  </div>
  <BuzerAd size="300x250" />
</article>

Svelte + Buzer: Minimal by Design

Svelte developers choose the framework because it eliminates unnecessary runtime overhead. Buzer follows the same principle — a tiny script that uses native DOM APIs without bundling a heavy framework runtime.

The Buzer script at under 5KB gzipped is smaller than most Svelte component libraries. It loads asynchronously and never blocks your app's initial render or hydration.

With 85% revenue share, Buzer also eliminates unnecessary middleman overhead in your ad revenue. You earn more per impression than with any other major ad network.

SvelteKit SSR and Prerendering

SvelteKit supports server-side rendering and static prerendering out of the box. The Buzer ad containers are included in the server-rendered HTML, and the Buzer script fills them after client-side hydration.

For prerendered pages (adapter-static), the ad containers are baked into the HTML at build time. When a visitor loads the page, the Buzer script detects the containers and serves ads immediately.

SvelteKit's client-side navigation triggers component mount/unmount cycles. The BuzerAd component's onMount function ensures ads refresh correctly on every page navigation.

Frequently Asked Questions

Does Buzer work with SvelteKit adapter-static?+
Yes. Since the Buzer script runs client-side, it works with any SvelteKit adapter including adapter-static, adapter-node, adapter-vercel, and adapter-cloudflare. The ad containers are included in the generated HTML.
Will Buzer affect my Svelte app's bundle size?+
No. The Buzer script loads externally via a script tag and is not included in your Svelte bundle. The BuzerAd component itself is about 15 lines of code — negligible impact on your bundle.
Can I use Buzer with Svelte 5 runes?+
Yes. The BuzerAd component uses standard Svelte patterns (bind:this, onMount) that are compatible with Svelte 5. If using runes, you can replace the export let size with a $props() declaration.

Related Resources

Add Ads to Vue.js

Monetize your Vue.js app with Buzer ads. Earn 85% revenue share with daily USDC payments. Composable-based integration for Vue 3 and Nuxt.

Add Ads to Astro

Monetize your Astro site with Buzer ads. 85% revenue share, daily USDC payments. Works with Astro islands architecture and any UI framework.

Add Ads to React

Monetize your React app with Buzer ads. Earn 85% revenue share with instant USDC payments. Simple component-based integration for any React project.

Start earning 85% revenue share

Join Buzer and keep more of what you earn. No minimum traffic requirements. Instant payments in USDC.

Start EarningAdvertise With Us