Astro Quickstart
Add Adkit to an Astro site using the vanilla JS SDK. If your project has React integration enabled, you can also use adkit-react inside React islands.
Prerequisites
An Astro project and an Adkit account. Sign up at adkit.dev to get your site ID.
1
Add the script to your layout
Open your base layout and add the Adkit script tag inside <head>. Most Astro projects have a single layout at src/layouts/Layout.astro.
src/layouts/Layout.astro
Astro script hoisting
Astro may process inline
<script> tags. Using a src attribute (as above) loads the script as-is without Astro's bundler touching it.2
Place a slot element
Add the slot div to any .astro file. The SDK discovers it on page load.
src/pages/index.astro
Price is in cents
data-adkit-price="2500" = $25/day.3
Verify it works
Run astro dev and open your page. You should see a slot such as the one below.
Using adkit-react in React islands
If your Astro project has the React integration enabled, you can use adkit-react inside React components instead.
Install the package:
Create a React component with the provider and slot:
src/components/SidebarAd.tsx
Use it as a client island in your Astro page:
src/pages/index.astro
Use
client:load or client:visible (for below-the-fold slots) to hydrate the component client-side. client:only="react" also works if you want to skip SSR entirely.