Add AppAdSwap to Webflow with custom code

By Luis Krin · Updated · All install guides

The snippet

Every platform needs the same two things: a slot where the card shows, and the script. Replace SITE_ID with your site's ID. The Sites page in your dashboard shows this snippet with the ID already filled in.

HTML
<div data-appadswap="SITE_ID" data-format="card"></div>
<script src="https://appadswap.com/w.js" async></script>

In Webflow, the slot goes in an Embed element and the script goes in the custom code field that loads before the closing </body> tag. Custom code only runs on a published site, and publishing custom code needs a paid Site plan.

Before you start

Webflow's custom code fields are part of site and page settings, and a site on a free plan can't publish custom code. Sources describing the exact plan tier disagree, so check Webflow's pricing page for the current answer rather than relying on this one. Each custom code field also has a size limit, 10,000 characters according to Webflow's help; the AppAdSwap script tag is far below that.

Step 1: add the slot

  1. In the Designer, open the Add panel and drag an Embed element to where the card should go: below a blog post's rich text, in a sidebar, above the footer.
  2. Paste the slot in the embed's code editor and save:
<div data-appadswap="SITE_ID" data-format="card"></div>

The card fills the width of the container the Embed sits in, so put it inside a div block with the width you want.

Step 2: add the script

You can add it to the whole site or to one page.

  • Whole site: open Site settings → Custom code, and paste the script into the Footer code box. Webflow places it before the closing </body> tag on every page.
  • One page: open that page's Page settings, scroll to Custom code, and paste it into the Before </body> tag field.
<script src="https://appadswap.com/w.js" async></script>

On a Collection template page, such as your blog post template, the slot goes on the template and every post gets it. Use the site-wide footer code so the script is on all of them.

Step 3: publish and check

Save, then publish the site. Custom code doesn't run in the Designer, so open the live address, not the Designer preview. The Sites page in your dashboard flips from unverified to live on its own after the widget has loaded once.

If it doesn't work

  • The Embed shows as an empty box in the Designer. That's expected: the script isn't loaded there. Check the published page.
  • The card appears but is cut off. The Embed's parent has a fixed height or overflow: hidden. Give the container room.
  • Nothing happens on the published page. Confirm the custom code is in the Footer code of the site, or the page's Before </body> field, not the Head field you didn't mean to use, and that you published after saving.
  • You're on a staging address (webflow.io) but registered your own domain. The widget has to load on the address you registered in your dashboard, so check that first.

Source

Webflow's custom code in head and body tags help page. Next: other install guides, or add your app.

Other platforms.

Installed?Add your app.

Add your appAll install guides