Installation
Install method 1: Inline Bar
The default install. Two lines of HTML above your pricing table; the bar inherits your brand color and sizes to the container.
The Inline Bar is the default mode and the simplest install. Paste the snippet directly where you want the bar to appear — most owners put it directly above the pricing-plan grid.
<!-- ShareCount widget -->
<div data-sharecount="YOUR_PUBLIC_KEY"></div>
<script async src="https://www.sharecount.app/embed.js"></script>Replace YOUR_PUBLIC_KEYwith the publishable key shown on your product’s Embed tab (it looks like sc_pk_… — safe to ship to the browser).
What renders
- A pill-rounded bar that fills the width of the container you dropped it into.
- Your brand color and font (set on the Appearance tab) — no host CSS leaks in, because the bar lives in a Shadow DOM.
- A gift-icon badge (or your uploaded logo) and the teaser text you set in the dashboard.
Sizing tips
- The bar takes 100% of its parent’s width. Wrap the snippet in a max-width container if your pricing area is very wide.
- Give it room to breathe — about 16–24px of margin above and below tends to land best.
The script is async
embed.js loads asynchronously, watches the DOM with a MutationObserver, and mounts every [data-sharecount] node it finds — including ones that come and go in single-page-app navigations. You don’t need to re-initialize on route changes.
Rotating the public key
Your public key is safe to commit to a public repo, but if you want a fresh one (an old commit had a key you’ve since retired, you want to invalidate a stale embed somewhere, etc.) there’s a Regenerate button on the Embed tab. The old key stops working the moment you regenerate — paste the new snippet on your site before any visitors hit the page, otherwise the widget will simply not render until the new snippet is live.