Watch: the button flies in, a visitor taps an icon, the text copies itself, and the app opens with everything ready to paste. That's the whole product.
A floating button — or one inline with your content — opens a clean panel of the services you chose: AI assistants, social apps, contact channels, crypto wallets, or any custom link. Your brand color, your label, your corner.
This is the mechanic nothing else has: the moment a visitor picks a service, your text is already on their clipboard — a prompt, a wallet address, a coupon code, your pitch. A toast confirms it: "Copied! Paste it in Grok ✓".
The AI chat, the share composer, the wallet explorer, the mail client — it opens in a new tab with your text one paste away. Where a share-intent URL exists (X, WhatsApp, Telegram, Perplexity), the text is pre-filled too. Where it doesn't — the clipboard already did the job.
Color, label, position, icons, even inline placement — all plain attributes. Pick a color and a label; the preview and the code update instantly.
data-colorAny CSS color or gradient works.
data-labelName it whatever sells.
WeSnycMe fires a DOM event for every button open and every service tap. Forward them to any third-party tracker and count exactly which services your visitors use:
document.addEventListener('sharestack:open', function () {
gtag('event', 'sharestack_open'); // button opened
});
document.addEventListener('sharestack:tap', function (e) {
gtag('event', 'sharestack_tap', { // icon tapped
service: e.detail.name, // e.g. "Grok"
copied: e.detail.copied // text that hit the clipboard
});
// plausible('ShareStack Tap', { props: { service: e.detail.name } });
});Two events. Zero dependencies. Works with GA4, Plausible, Fathom, Matomo, Mixpanel — anything that runs on your page.
One tag before </body>. No build step, no dependencies.
<script src="https://your-cdn.com/sharestack.js"
data-label="Ask AI"
data-color="#f97316"
data-text="Read this page and answer my questions about it."
data-items="grok,chatgpt,claude,gemini,perplexity">
</script><!-- "Tip Me" crypto button -->
<script src="sharestack.js"
data-label="Tip Me ₿"
data-title="Send a tip"
data-color="linear-gradient(135deg,#f7931a,#f75c1a)"
data-items="bitcoin,ethereum,solana"
data-btc="bc1qyouraddress"
data-eth="0xyouraddress"
data-sol="YourSolAddress"
data-position="bottom-left">
</script><!-- Custom links: any name, URL, clipboard text, icon.
No icon? An SVG monogram is auto-generated. -->
<script src="sharestack.js"
data-label="Share"
data-text="Default text"
data-items="email,copylink"
data-custom='[
{"name":"My Discord","url":"https://discord.gg/xxxx"},
{"name":"Docs","url":"https://docs.example.com","icon":"📖"},
{"name":"Store","url":"https://store.example.com","icon":"https://example.com/logo.png"}
]'>
</script><!-- Inline placement + auto text -->
<p>Enjoyed this article? <script src="sharestack.js"
data-position="inline"
data-label="Share this post"
data-text="auto"
data-items="x,whatsapp,telegram,reddit,email,copylink">
</script></p>| Attribute | Default | What it does |
|---|---|---|
data-label | "Ask AI" | Button text — "Ask AI", "Tip Me", "Contact Us", anything. |
data-color | violet→blue | Button background — any CSS color or gradient. |
data-text | empty | Text copied on every tap. auto = page title + URL (+ selection). #id/.class = that element's content. |
data-items | 9 popular | Comma-separated catalog keys, in your order. |
data-custom | [] | JSON array of custom links: name, url, copy, icon. |
data-position | bottom-right | bottom-right | bottom-left | top-right | top-left | inline |
data-offset-x/y | 20px | Distance from the corner — any CSS length. |
data-icon | ✦ sparkle | Button icon: emoji, image URL, or inline SVG. |
data-shape | pill | pill (icon + label) or round (icon-only 52px circle). |
data-theme | auto | auto | light | dark |
data-columns | 3 | Panel grid: 3 or 4 columns |
data-btc/eth/sol | — | Your wallet addresses (copied on tap) |
data-phone | — | Number for the Call item |