Add AppAdSwap to a Framer site

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>

On Framer, the quickest install is the corner card: one script tag in the site's Custom Code, with no slot to place on the canvas. A card inside your layout needs a slot element, which Custom Code can't provide, so it takes an extra step.

Add the corner card

  1. Open your project and go to Site Settings.
  2. Scroll to Custom Code. Framer offers positions at the start and end of the head and of the body.
  3. Choose the end of the body and paste a script tag that carries your site ID and the corner format on the tag itself:
<script src="https://appadswap.com/w.js" data-appadswap="SITE_ID" data-format="corner" async></script>

Code added in Site Settings is added to every page of the published site. The corner card appears a few seconds after the page loads, in the corner of the screen, and the visitor can hide it.

Limit it to one page

If you only want it on a landing page or a thank-you page, use that page's own settings instead of Site Settings: open the page's settings and add the same tag to its Custom Code section.

Putting the card inside your layout

The in-page card needs an element on the page to fill, a div with data-appadswap on it. Custom Code only injects at the start or end of the head or body, so it can't put an element in the middle of a page. Two routes, neither of which we've tested on Framer:

  • Use the corner format above. It works without a slot.
  • Add the snippet (slot and script together) to an Embed element on the canvas. How Framer sizes an embed and whether the script runs inside it is something to check on a test page first.

Check it works

Framer doesn't load Custom Code in the canvas preview, so the card won't appear while you're editing. Publish the site, then open the live address in a browser. If nothing shows, open the browser's developer tools and look for w.js in the Network tab. The Sites page in your dashboard flips from unverified to live on its own once the widget has loaded.

If it doesn't work

  • You're looking at the canvas or the editor preview. Publish and check the live site.
  • The script is in Custom Code, but not at the end of the body. Move it there. The head works for the script too, but the end of the body is the usual place for a script that isn't needed to draw the page.
  • The site ID is wrong. Copy the tag from the Sites page, which has the real ID.
  • You registered a different domain. The widget has to load on the address registered in your dashboard.

Source

Framer's own page on Custom Code. Next: other install guides, or add your app.

Other platforms.

Installed?Add your app.

Add your appAll install guides