The embeds are a way to embed products, a store or a cart on your own website. They are built using the JavaScript SDK, Preact, Preact Habitat, Emotion (CSS-in-JS) and of course ES6/7.
There are currently 5 types of embed:
The loader is a small JavaScript file to load the main embed JavaScript to ensure it only loads once per page. When it runs, it'll find any embeds on the page and render them. It'll also use MutationObserver
to look for any embeds injected into the page later.
The loader to load the latest v1 can be found here:
https://embeds.selzstatic.com/1/loader.js
It can be loaded asynchronously:
<script async src="https://embeds.selzstatic.com/1/loader.js"></script>
Each embed follows the same standard format:
<!-- The main embed container -->
<div data-embed="button">
<script type="text/props">
/* props in JSON format */
</script>
</div>
<!-- The loader script -->
<script async src="https://embeds.selzstatic.com/1/loader.js"></script>
<!-- The fallback link -->
<noscript><a href="{url}" target="_blank">{text}</a></noscript>
The default values will be used from the sellers embed editor in the dashboard if any props are omitted.
Name | Type | Description | Button | Widget | Store | Store Button | Cart |
---|---|---|---|---|---|---|---|
action |
Enum ¹ |
Determine what to do when clicking the call to action. | ✅ | ✅ | |||
colors |
Object |
Hex colors for the styling of the embed and checkout. | ✅ | ✅ | ✅ | ✅ | ✅ |
description |
Boolean |
Whether to display the product description. | ✅ | ||||
env |
String |
Reserved for internal use. | ✅ | ✅ | ✅ | ✅ | ✅ |
logos |
Boolean |
Display the payment logos beneath the emnbed. | ✅ | ✅ | |||
modal |
Boolean |
Display the product or checkout in a modal window. | ✅ | ✅ | ✅ | ✅ | ✅ |
text |
String |
Text for the call to action. | ✅ | ✅ | ✅ | ||
store |
Number or String |
The store's URL, domain or ID number. | ✅ | ||||
style |
Enum ² |
Button style. | ✅ | ||||
url |
String |
URL used for the product or store lookup. | ✅ | ✅ | ✅ | ✅ | |
width |
Number or String |
The width for the embed. It can be a pixel value, e.g. 320 or percentage value, e.g.100% . |
✅ | ✅ |
add-to-cart
- add the product to the cartbuy
- take the buyer straight to the checkout for that productview
- open the product permalinkprice-right
- display the price right, label leftprice-left
- display the price left, label rightprice-above
- display the price above, label belowprice-below
- display the price below, label aboveThe button embed displays just a label and price.
<div data-embed="button">
<script type="text/props">
{
"action": "add-to-cart",
"colors": {
"buttons": {
"background":"#f9b642",
"text": "#ffffff"
},
"checkout": {
"background": "#f9b642",
"text": "#ffffff"
}
},
"logos": true,
"modal": true,
"url": "http://selz.co/1rvb96h"
}
</script>
</div>
<script async src="https://embeds.selzstatic.com/1/loader.js"></script>
<noscript><a href="http://selz.co/1rvb96h" target="_blank">Add to cart</a></noscript>
The widget will render a small product tile with more information and the product photo displayed.
<div data-embed="widget">
<script type="text/props">
{
"action": "add-to-cart",
"colors": {
"buttons": {
"background": "#f9b642",
"text": "#ffffff"
},
"checkout": {
"background": "#f9b642",
"text": "#ffffff"
}
},
"description": true,
"logos": true,
"modal": true,
"url": "http://selz.co/1rvb96h",
"width": 340
}
</script>
</div>
<script async src="https://embeds.selzstatic.com/1/loader.js"></script>
<noscript><a href="http://selz.co/1rvb96h" target="_blank">Add to cart</a></noscript>
The store embed will render the store inventory in a responsive element.
<div data-embed="store">
<script type="text/props">
{
"colors": {
"buttons": {
"background": "#f9b642",
"text": "#ffffff"
},
"checkout": {
"background": "#f9b642",
"text": "#ffffff"
}
"links": "#f9b642"
},
"url": "https://mystore.selz.com"
}
</script>
</div>
<script async src="https://embeds.selzstatic.com/1/loader.js"></script>
<noscript><a href="https://mystore.selz.com" target="_blank">Shop now</a></noscript>
The store button renders a basic button link to your store.
<div data-embed="store-button">
<script type="text/props">
{
"colors": {
"background": "#f9b642",
"text": "#ffffff"
},
"url": "https://store.example.com"
}
</script>
</div>
<script async src="https://embeds.selzstatic.com/1/loader.js"></script>
<noscript><a href="https://store.example.com" target="_blank">Shop now</a></noscript>
The cart snippet will render the cart as an overlaid draw on the current page. This can be added to all pages of your site to render a global cart.
<div data-embed="cart">
<script type="text/props">
{
"colors": {
"buttons": {
"background": "#f9b642",
"text": "#ffffff"
},
"checkout": {
"background": "#f9b642",
"text": "#ffffff"
}
},
"store": "mystore.com"
}
</script>
</div>
<script async src="https://embeds.selzstatic.com/1/loader.js"></script>