Webflow Quickstart
Add Adkit to your Webflow site using Project Settings and Embed elements. Custom code requires a Webflow paid plan (Basic or above).
Prerequisites
Add the script via Project Settings
In the Webflow Designer, open Project Settings → Custom Code → Footer Code. Paste the following:
Use Footer Code, not Head Code. Placing the script in the footer ensures it runs after your slot elements are in the DOM.
Publish required
Add a slot using an Embed element
In the page where you want the ad, open the Add Elements panel and add an Embed element (under Components). Double-click it to open the code editor, then paste:
Setting data-adkit-price in Webflow
data-* attributes. If you see the slot without a price, set it as a custom attribute instead:- Select the div inside the Embed block in the Designer
- Open the Settings panel (gear icon)
- Scroll to Custom Attributes
- Add
data-adkit-pricewith value2500
Set the slot width in the Designer
Adkit derives slot height automatically from the width and aspect ratio. Set the width of the Embed element to your desired size. Do not set a fixed height — let the aspect ratio control it.
| Aspect Ratio | Common Use | Suggested Width |
|---|---|---|
| banner | Leaderboard (header/footer) | 728px or 100% |
| 16:9 | Wide in-content placement | 100% |
| 4:3 | Sidebar placement | 300px |
| 1:1 | Square in-content | 300px |
| 9:16 | Vertical / story placement | 200px |
Publish and verify
Click Publish in the Webflow Designer. Open your published site in a private or incognito window.
Designer preview limitation