Using Embr Components

Getting Started
All Embr components are included from our embeddables library. Before you can start embedding Checkout and other widgets, first include the following snippet in your website's <head> tag.
<script type="text/javascript" async src="https://cdn.embr.org/embeddables.es.js"></script>
<script type="text/javascript">
(function(){if(!window.EMBR){const t=[];window.EMBR={_init:t,mount:e=>t.push(e)}}})()
</script>
​
You can also try out embeddables on any site right now, using your browser console and this inject script. Just copy the script into your console and hit enter/return.
(function(){if(!window.EMBR){const t=[];window.EMBR={_init:t,mount:e=>t.push(e)}}const script=document.createElement("script");script.type="module",script.src="https://cdn.embr.org/embeddables.es.js",document.querySelector("head").appendChild(script)})()
Embedding components
Now that the Embr library is included on your site, it's time to start embedding components on your site. To embed one of these components, just call the EMBR.mount function with a component configuration
EMBR.mount({
    type: 'CheckoutLaunchButton',
    options: {
        checkoutId: 'XXXXXX',
    }
})
The best way to set up Embr components is from the checkout builder dashboard.
There are already a number of components included in the library, each with different options for including within your site. Learn more about components.​
Each component config includes a type attribute and an options object, to configure the specific settings.
Library functions
EMBR.mount(config)
Mounts a component to the page using a valid configuration. This method returns a reference to the mounted component, that can be used for interacting with it later. Each component reference will include the config type and options as well as a unique id for that instance of the component.
const componentOne = EMBR.mount({
  type: 'CheckoutLaunchButton',
  options: {
    checkoutId: 'XXXXXX',
  }
})
/*
{
  id: "dc65c06c-ba2c-4d6a-af8e-0de1aef23a6d"
  options: {checkoutId: 'XXXXXX'}
  type: "CheckoutLaunchButton"
}
*/
EMBR.mount also accepts an array of config objects, to mount multiple components at the same time e.g. EMBR.mount([{...}, {...}])
EMBR.unmount(id)
Removes a single Embr component by ID. This will remove the component from the page immediately. 
EMBR.unmount('XXXXXX')
EMBR.unmount also accepts an array of config objects, to mount multiple components at the same time e.g. EMBR.unmount(['xxx', 'yyy'])
EMBR.unmountAll()
Immediately removes all EMBR components from the page.
EMBR.unmountAll()
EMBR.get(ref)
Will retrieve a component instance by id or by type. When getting by type, the first component of that type will be returned.
EMBR.get('xxx') // Where xxx is instance ID 
// OR
EMBR.get('CheckoutLaunchButton')
The returned reference may also include any methods available from that component. For example, the CheckoutLaunchButton provides methods to open, close and toggle the popup from JS.
const launchButton = EMBR.get('CheckoutLaunchButton');
/*
{
    id: "dc65c06c-ba2c-4d6a-af8e-0de1aef23a6d"
    type: "CheckoutLaunchButton"
    options: {checkoutId: 'XXXXXX'}
    close: fn
    open: fn
    toggle: fn
}
*/
​
launchButton.open(); // Open the launch button popover
EMBR.components
Access references for all components mounted on a page
EMBR.components
/*
{
    "3226c666-1281-4fd2-8220-44219db96b89":{
        "id": "3226c666-1281-4fd2-8220-44219db96b89",
        "type": "CheckoutLaunchButton",
        "options": {
            "checkoutId": "XXXXXX"
        },
        open: fn,
        close: fn,
        toggle: fn
    },
    "dc65c06c-ba2c-4d6a-af8e-0de1aef23a6d":{
        "id": "dc65c06c-ba2c-4d6a-af8e-0de1aef23a6d",
        "type": "CheckoutEmbed",
        "options":{
            "checkoutId": "XXXXXX",
            "select": "#checkout"
        }
    }
}
*/
Component types
​CheckoutLaunchButton 
Floating button that opens a popover checkout when clicked
​Checkout Embed
Renders a Checkout inside of your page layout in a chosen area
​Checkout Modal Button
Renders a Launch Button styled button within your page layout, that opens a modal checkout when clicked
Checkout Modal Action
Attach a Modal Checkout  onClick event to any element in your page. Perfect for custom integrations.

Other Tips and Tricks

CheckoutEmbed

Last modified 16d ago

Copy link

Outline