Add AppAdSwap to a plain HTML 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 a plain HTML site, the card is a div where you want it and one script tag anywhere on the same page. There is no build step and nothing to install.

Put the slot where the card should go

Open the page's HTML file and paste the div at the spot where the card should appear: at the end of a post, in a sidebar, above the footer. The card fills whatever space the div sits in, so its width comes from the element around it. Put it inside a column that is 300 pixels wide and the card is 300 pixels wide.

<aside class="sidebar">
  <div data-appadswap="SITE_ID" data-format="card"></div>
</aside>

Add the script once per page

The script can go in the <head> or just before </body>. Because it has async, it doesn't hold up the rest of the page, so the position makes no difference to how fast your page loads.

<script src="https://appadswap.com/w.js" async></script>

If you have a shared footer or layout file that every page includes, put the script there and you're done for the whole site. If every page is a separate file, add the script to each page that has a slot.

Match your page's look

The card takes its colours and font from the slot. You can set them once in your dashboard, or per slot with attributes on the div:

<div data-appadswap="SITE_ID" data-format="card" data-theme="match" data-font="inherit"></div>

data-theme="match" takes your page's text colour and leaves the background see-through. Colours that would make the card hard to read are refused, and the card always says Sponsored.

Check it works

  1. Open the page in a browser, not as a file from your disk: the script is loaded over the web, so a file:// address can behave differently. A local development server is fine.
  2. Open the Sites page in your dashboard. It checks for the widget by itself and flips from unverified to live.
  3. If the card doesn't show, open your browser's developer tools and look at the Network tab for w.js. A blocked or failed request there points at a typo in the address or an extension blocking it.

Common mistakes

  • The data-appadswap value is still SITE_ID. Copy the snippet from your dashboard, which has your real ID in it.
  • The slot is inside an element with overflow: hidden and no height, so the card is cut off. Give the container room.
  • The script is on the page, but there is no slot. Without a slot the card has nowhere to appear unless you use the corner format.

Next: see the other install guides, or add your app.

Other platforms.

Installed?Add your app.

Add your appAll install guides