Skip to content
hidden

Embed

Sell from any website

Drop a Buy button and a live price on your site, blog, docs or link-in-bio. Buyers pay in a modal without leaving your page and get the same instant delivery as on your Hidden storefront.

Configure

Slugs come from your dashboard: the store slug is the first part of your store address (slug.sellhidden.com), the product slug is on each product page.

Shown before the live price.

The button is your own element: style it with your CSS. Only the two data attributes matter.

Live preview

Loading script

Clicking opens https://demo.sellhidden.com/p/starter-kit in a checkout modal on this page. The price comes from the public API and shows a placeholder until the store exists.

anywhere.htmlhtml
<button data-hidden-store="demo" data-hidden-product="starter-kit">Buy now</button>
<span data-hidden-price="demo/starter-kit" data-hidden-price-prefix="from "></span>
<script src="https://sellhidden.com/embed.js" async></script>

How it works

One script tag. That is the whole integration.

  1. 1

    Add the attributes to any element

    A button, a link, a div: give it data-hidden-store and data-hidden-product. Style it however you like.

  2. 2

    Include embed.js once

    Paste the script tag anywhere HTML is allowed: your website, WordPress, Webflow, Carrd, Framer, Notion, link-in-bio.

  3. 3

    Buyers check out in place

    Clicking opens a modal with the live product page and checkout. Close with the X, Escape or a click outside. Price, stock and delivery come from your dashboard.

  • One script tag. No SDK, no build step, no plugin to keep updated.
  • Buyers check out in a modal and never leave your page.
  • Live prices from the public API, cached for 60 seconds.
  • Change a price or stock level in your dashboard and every embed follows.
  • The button is your own element with your own CSS.
  • Prefill the email, coupon, option and quantity from your own page.
  • Your page hears when a checkout is paid, fails or closes.
several-buttons.htmlhtml
<!-- Several buttons and prices on one page: one script tag -->
<a data-hidden-store="my-store" data-hidden-product="starter-kit">Get the starter kit</a>
<button data-hidden-store="my-store" data-hidden-product="pro-kit">Go Pro</button>
<p>Pro is <span data-hidden-price="my-store/pro-kit"></span> today.</p>
<script src="https://sellhidden.com/embed.js" async></script>
app.jsjs
// Open the checkout modal from your own code (after embed.js loaded)
window.HiddenEmbed.open("my-store", "starter-kit");
window.HiddenEmbed.open("my-store", "starter-kit", { email: "buyer@example.com", quantity: 2, ref: "user:42" });
window.HiddenEmbed.close();

// Callbacks for the checkout events
window.HiddenEmbed.on("success", (detail) => console.log(detail.status, detail.ref));

// Bind buttons and prices you added after page load (single-page apps)
window.HiddenEmbed.scan();
no-script.htmlhtml
<!-- No JavaScript allowed? Link straight to checkout -->
<a href="https://my-store.sellhidden.com/p/starter-kit?buy=1">Buy now</a>

No website?

Send the checkout link from your app, your Discord server or your Telegram bot. Add your own reference to the link and match it in the signed order.paid webhook.

checkout-link
https://my-store.sellhidden.com/p/starter-kit?buy=1&ref=tg:5123456789

Put a colon in your reference, like tg:5123456789, so it is never read as an affiliate code. The buyer can change the link, so before you fulfil, check the product, variation and quantity in the webhook as well, and fulfil each order only once. Checkout links in the docs

Events

Know when a checkout is paid

Your page gets an event when the buyer pays, when something stops the purchase and when the modal closes. Show your own thank-you message, unlock a download page or offer help, then fulfil from the signed order.paid webhook.

  • hidden:success

    The order is paid. Detail: status, orderId (with a site key for your address, otherwise null), store, product and your ref. Once per order.

  • hidden:error

    The purchase stopped: checkout_failed with the reason, order_expired, order_cancelled or sold_out.

  • hidden:close

    The modal closed, however it was closed. completed says whether an order was paid in it.

events.htmlhtml
<script>
  // Works before or after embed.js loads
  window.addEventListener("hidden:success", (e) => {
    const { orderId, status, product, ref } = e.detail;
    showThankYou(ref); // fulfil from the signed order.paid webhook
  });
  window.addEventListener("hidden:error", (e) => console.warn(e.detail.code, e.detail.message));
  window.addEventListener("hidden:close", (e) => {
    if (!e.detail.completed) offerHelp(); // closed before paying
  });
</script>
<script src="https://sellhidden.com/embed.js" data-hidden-key="hsk_your_site_key" async></script>

The order id opens the order page, so it is only sent to the website address a site key names (Developers, Embeds). Events in the docs

Works anywhere custom HTML is allowed

  • WordPress
  • Webflow
  • Framer
  • Carrd
  • Squarespace
  • Wix
  • Ghost
  • Notion (embed block)
  • Linktree-style pages
  • Plain HTML

Builders that strip script tags can still use the link-only form above.

Reference

Attributes

Buy button

  • data-hidden-storerequired

    Your store slug: the first part of your store address (my-store.sellhidden.com).

    Examplemy-store

  • data-hidden-productrequired

    The product slug shown on the product page and in the dashboard.

    Examplelifetime-license

  • data-hidden-text

    Fills an empty element with this label. Ignored when the element already has content.

    ExampleBuy now

  • data-hidden-email

    Prefills the buyer's email. Read on click, so you can set it once the visitor signs in.

    Examplebuyer@example.com

  • data-hidden-coupon

    Applies a coupon code at checkout, exactly as if the buyer typed it.

    ExampleSPRING

  • data-hidden-variant

    Preselects a variation by its id or its exact name.

    ExampleTeam

  • data-hidden-quantity

    Preselects the quantity, 1 to 100 (never more than is in stock).

    Example2

  • data-hidden-ref

    Your own reference. Saved on the order as customFields.ref and returned in every event.

    Exampleuser:42

  • data-hidden-meta-<key>

    Fills your checkout field with that key (lowercase letters, digits and _): data-hidden-meta-discord_name fills the field discord_name.

    Exampleneo

Script tag

  • data-hidden-key

    Your site key from Developers, Embeds. With it, hidden:success includes the order id on that one website address.

    Examplehsk_…

Live price

  • data-hidden-pricerequired

    store/product to show the current display price (lowest variation).

    Examplemy-store/lifetime-license

  • data-hidden-price-prefix

    Text before the amount.

    Examplefrom

  • data-hidden-currency-symbol

    Symbol to print. The amount is always USD.

    Example$

  • data-hidden-format

    usd (12.00 with symbol) or raw (12, no symbol).

    Exampleusd

Once loaded, a price span also gets data-hidden-in-stock="true|false", so you can style sold-out products. A missing product leaves the span empty and sets data-hidden-error.

Privacy

The script sets no cookies and reads nothing on the host page. The only request before a click is the public price lookup for spans you added.

Security

Slugs are validated and URL-encoded. The checkout host is taken from the script src, so a copied snippet cannot be pointed elsewhere. Messages from the modal are accepted only from that origin, and the order id reaches only the site its key names.

Performance

About 7 KB compressed, no dependencies, idempotent: include it once or ten times, elements are bound exactly once.

Need more than a button?

Signed webhooks, API keys and a public REST API are on every plan. The docs cover signatures, retries and every endpoint; the security page explains how the script keeps the host page and the checkout apart.

Read the docsOpen a storeAsk developer support