Installing ShareCount with an AI coding agent

This article is written for AI coding agents. Hit the Copy for agentsbutton above to drop it straight into your agent’s context, or paste any of the snippets below into the relevant file.

What you’re installing

• One snippet — a mount node and an async script tag. The script does not block render.
• One public key — looks like sc_pk_…. Safe to ship to the browser. The user gets it from the dashboard.
• Optional: a custom trigger — for SDK mode, a click handler that calls window.ShareCount.open().

Invariants the agent must preserve

• Do not bundle the script. Always load it from https://www.sharecount.app/embed.js so updates ship without a redeploy.
• Mount node must be a direct childof whatever container the user wants the bar in. Don’t nest it inside a <p> or other inline element.
• Do not strip the data-sharecount attribute. The embed scans for it on every DOM mutation.
• Do not load multiple copies of the script. One tag per page; the embed coalesces mounts.
• Do not override the script’s URL host unless the user explicitly tells you to (the embed derives the backend origin from its own src).

Choose the right method

1. 1
   If a pricing page exists, install the Inline Bar immediately above the pricing grid. This is the canonical placement.
2. 2
   If the user wants a custom button (hero CTA, in-app menu, post-signup nudge), install the Custom Trigger snippet and wire their existing button to window.ShareCount.open(). Tell the user to switch the dashboard mode to Custom Trigger so the teaser disappears.
3. 3
   If the user wants an always-visible tab, install the same Inline Bar snippet and tell them to switch the dashboard mode to Edge Ribbon — no code change needed.

The Inline Bar install

<!-- ShareCount widget -->
<div data-sharecount="YOUR_PUBLIC_KEY"></div>
<script async src="https://www.sharecount.app/embed.js"></script>

The Custom Trigger install (SDK mode)

<!-- ShareCount widget (Custom Trigger / SDK mode) -->
<div data-sharecount="YOUR_PUBLIC_KEY"></div>
<script async src="https://www.sharecount.app/embed.js"></script>

<!-- Anywhere in your page, your own button: -->
<button id="share-and-earn">Share &amp; earn a coupon</button>

<script>
  document.getElementById("share-and-earn").addEventListener("click", function () {
    // Opens the share-to-earn dialog over your page.
    window.ShareCount && window.ShareCount.open && window.ShareCount.open();
  });
</script>

The React/Next.js Custom Trigger install

// React example — Custom Trigger mode
// 1. Render the mount node + loader once (e.g. in a layout).
//    The src is async; the embed scans the DOM and re-scans on mutations.
"use client";
import Script from "next/script";

export function ShareCountMount({ publicKey }: { publicKey: string }) {
  return (
    <>
      <div data-sharecount={publicKey} />
      <Script src="https://www.sharecount.app/embed.js" strategy="afterInteractive" />
    </>
  );
}

// 2. Anywhere in your tree:
function ShareCTA() {
  return (
    <button
      onClick={() => (window as any).ShareCount?.open?.()}
    >
      Share &amp; earn a coupon
    </button>
  );
}

Where to find the public key

The user must paste their key in place of YOUR_PUBLIC_KEY. They get it from Dashboard → Products → (product) → Embed. The key starts with sc_pk_ and is safe to commit to a public repository.

Verify the install

1. Load the page in a browser. Wait ~1 second for the async script.
2. Confirm a node with attribute data-sharecount-mounted="1" exists in the DOM.
3. For Inline Bar: a pill-rounded bar should appear inside the mount node.
4. For Custom Trigger: window.ShareCount.open should be typeof "function". Clicking the user’s trigger should open a modal dialog over the page.

CSP changes you may need

# Content-Security-Policy headers you'll need
script-src   'self' https://www.sharecount.app
frame-src    https://www.sharecount.app
connect-src  'self' https://www.sharecount.app
img-src      'self' data: https:
style-src    'self' 'unsafe-inline'  # the embed sets a small amount of inline CSS