In Ghost, load the script through Code Injection and put the slot in an HTML card, or in your theme if you want a card at the end of every post. Ghost's own guidance is to put JavaScript in the site footer.
Step 1: load the script for the whole site
- In Ghost Admin, open Settings → Code injection.
- Paste the script into Site footer. Ghost injects that box before the closing
</body>tag on every page, after the theme's own scripts.
<script src="https://appadswap.com/w.js" async></script>
Site header code goes into the <head> instead. Ghost's tutorial recommends the footer for JavaScript so it loads properly, and that works here since the script is async.
Step 2: add a slot to a post
- Edit the post or page. Type
/and choose the HTML card. - Paste the slot:
<div data-appadswap="SITE_ID" data-format="card"></div>
The card will appear at that point in the post. The script from step 1 is already on the page, so the slot is all the HTML card needs.
A card at the end of every post
An HTML card is added by hand, post by post. For a card on every post, add the slot to your theme's post template, right after the post content:
{{content}}
<div data-appadswap="SITE_ID" data-format="card"></div>
That's the post.hbs file in a theme you maintain; after editing it, upload or deploy the theme the way you normally do. If you use a theme you don't control, an HTML card per post, or the corner format, is simpler than forking the theme.
Only on one post
Each post also has its own code injection, in the editor's settings sidebar. It works the same way as the site-wide boxes but applies to that post only. Paste the whole snippet (slot and script) there, or the corner version of the script tag, if you want the card on a single post.
Check it works
Open the published post, not the editor. The Sites page in your dashboard flips from unverified to live on its own once the widget has loaded on your site.
If it doesn't work
- The card isn't there for members-only posts. An HTML card in a gated post is shown only to visitors who can read the post, so check the post as a member, or put the card on a public page.
- A cached page. If you use a CDN or cache in front of Ghost, clear it after changing code injection.
- The script is in the header box and something else breaks. Move it to the footer box.
- The card is in the post but the script isn't loading. Check that Code injection saved: reopen the settings page and look at the footer box.
Source
Ghost's tutorial How to use Code Injection. Next: other install guides, or add your app.