Api

Embeds

Javascript Sdk

Jquery Plugin

Selz Theme Kit

Webhooks

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:

Loader

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>

Snippets

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>

Props

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%. ✅ ✅

1. Action options

  • add-to-cart - add the product to the cart
  • buy - take the buyer straight to the checkout for that product
  • view - open the product permalink

2. Style options

  • price-right - display the price right, label left
  • price-left - display the price left, label right
  • price-above - display the price above, label below
  • price-below - display the price below, label above

Examples

Button

The 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>

Widget

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>

Store

The store embed will render the store in an automatic resizing iframe.

<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>

Store Button

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>

Cart

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>