Embed Widget
Sell your products from any website by embedding Sellvy widgets. Add buy buttons, product cards, or a full checkout experience with a single script tag.
Quick setup
Add the Sellvy embed script to your website's <head> tag. This loads the widget library asynchronously and does not block page rendering.
<!-- Add to your <head> -->
<script
src="https://cdn.sellvy.io/embed.js"
data-store="your-store-slug"
async
></script>Buy button
The simplest embed — a button that opens the Sellvy checkout overlay when clicked. Add data-sellvy-product to any element:
<button data-sellvy-product="prod_abc123">
Buy Now — $29.99
</button>
<!-- With custom styling -->
<button
data-sellvy-product="prod_abc123"
data-sellvy-theme="dark"
style="background: #059669; color: white; padding: 12px 24px;
border: none; border-radius: 8px; font-weight: bold;
cursor: pointer;"
>
Purchase License
</button>Product card
Render a full product card with image, title, description, and price. The card auto-fetches product data from your store.
<!-- Single product card -->
<div data-sellvy-card="prod_abc123"></div>
<!-- Multiple product cards in a grid -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
<div data-sellvy-card="prod_abc123"></div>
<div data-sellvy-card="prod_def456"></div>
<div data-sellvy-card="prod_ghi789"></div>
</div>Customization options
Configure widget appearance with data attributes on the script tag or on individual elements:
| Attribute | Values | Description |
|---|---|---|
| data-sellvy-theme | light, dark, auto | Widget color theme. “auto” matches user's system preference. |
| data-sellvy-accent | hex color | Override the accent color (e.g., #059669). |
| data-sellvy-locale | en, fr, es, de... | Widget language. Defaults to browser locale. |
| data-sellvy-redirect | URL | Custom redirect URL after successful purchase. |
| data-sellvy-coupon | string | Pre-apply a coupon code at checkout. |
Full example
A complete HTML page with an embedded product card and buy button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Store</title>
<script
src="https://cdn.sellvy.io/embed.js"
data-store="my-store"
data-sellvy-theme="light"
data-sellvy-accent="#059669"
async
></script>
</head>
<body>
<h1>Featured Product</h1>
<!-- Product card with auto-fetched data -->
<div data-sellvy-card="prod_abc123"></div>
<!-- Standalone buy button -->
<button data-sellvy-product="prod_abc123">
Buy Now
</button>
</body>
</html>JavaScript API
For more control, use the global Sellvy object to programmatically open checkout:
// Open checkout for a specific product
Sellvy.checkout("prod_abc123", {
theme: "dark",
coupon: "SAVE10",
email: "customer@example.com", // Pre-fill email
onSuccess: (order) => {
console.log("Order completed:", order.id);
window.location.href = "/thank-you";
},
onClose: () => {
console.log("Checkout closed");
}
});