Using Embr Components
Using Checkout components within your web page or web app
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)})()
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 configurationEMBR.mount({
type: 'CheckoutLaunchButton',
options: {
checkoutId: 'XXXXXX',
}
})
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.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(
[{...}, {...}])
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'])
Immediately removes all EMBR components from the page.
EMBR.unmountAll()
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
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"
}
}
}
*/
- 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.
Last modified 6mo ago