Preview your Checkout on a live website
Some cool tips/tricks to make your Checkout stand out!

How to preview the Checkout on a live website

  1. 1.
    prepare your Checkout code
  2. 2.
    Open the website with Chrome
  3. 3.
    Open dev tools (Shift + CTRL + J , or right click and inspect element )
  4. 4.
    If an ID is required select inspect element and add this ID into the HTML code
  5. 5.
    Link the library code
  6. 6.
    Copy your prepared code in the console
  7. 7.
    you should see your Checkout pop-up

Prerequisite : Linking the library code.

Normally you will have this line of code in your HEAD section of the website if you have any Embr Checkout already running on that website:
<script type="text/javascript" async src="https://cdn.embr.org/embeddables.es.js"></script>
If there is no Checkout on the website yet we need to link this script, by first executing this piece of code in the Console :
const myScript = document.createElement('script');
myScript.async = true;
myScript.src = 'https://cdn.embr.org/embeddables.es.js';
document.querySelector("HEAD").appendChild(myScript);
Prerequisite : loading the script
This step makes sure we can inject an actual Checkout into the website as now the main JS script is loaded and ready for usage.
You might get some warnings while doing this, but as long as you see the <script async src=https://cdn.embr.org/embeddables.es.js "></script> part as a result you should be good to go
Example 1 : embed a Checkout Launcher
window.EMBR.mount({
type: 'CheckoutLaunchButton',
options: {
checkoutId: '01G6B8C2MNN9J5MZZX9XTRKRQ8',
theme: 'custom',
backgroundColor: '#790fd6'
}
})
Open the web page in chrome
//IN THE CONSOLE :
// YOU COPY THE SCRIPT CODE
const myScript = document.createElement('script');
myScript.async = true;
myScript.src = 'https://cdn.embr.org/embeddables.es.js';
document.querySelector("HEAD").appendChild(myScript);
//YOU COPY THE CHECKOUT CODE
window.EMBR.mount({
type: 'CheckoutLaunchButton',
options: {
checkoutId: '01G6B8C2MNN9J5MZZX9XTRKRQ8',
theme: 'custom',
backgroundColor: '#790fd6'
}
})
//ON A SUCESSFULL EMBED YOU SEE SOMETHING LIKE THIS AS RETURN
{
"id": "f4c16f2e-be26-4237-baba-73a946949f04",
"type": "CheckoutLaunchButton",
"options": {
"checkoutId": "01G6B8C2MNN9J5MZZX9XTRKRQ8",
"theme": "custom",
"backgroundColor": "#790fd6"
}
}
Example 2 : Embed a Checkout Modal
window.EMBR.mount({
type: 'CheckoutModalButton',
options: {
checkoutId: '01G6B8C2MNN9J5MZZX9XTRKRQ8',
selector: '#checkout-modal',
theme: 'dark',
size: 'sm'
}
})
Same procedure as before, but we will first identify where the Button needs to be placed
Here we will also need a reference ID ( or CLASS) in the HTML code
<div id="checkout-modal"></div>
Select a place where the button goes. Add the reference to the HTML code. You select the place and then you right click and select edit as HTML
//I added it in the list on top, so I added a <li></li>
<li><div id="checkout-modal"></div></li>
//IN THE ELEMENTS WINDOW YOU ADD THIS HTML CODE (or whatever you want to link to):
<li><div id="checkout-modal"></div></li>
//IN THE CONSOLE :
// YOU COPY THE SCRIPT CODE
const myScript = document.createElement('script');
myScript.async = true;
myScript.src = 'https://cdn.embr.org/embeddables.es.js';
document.querySelector("HEAD").appendChild(myScript);
//YOU COPY THE CHECKOUT CODE
window.EMBR.mount({
type: 'CheckoutModalButton',
options: {
checkoutId: '01G6B8C2MNN9J5MZZX9XTRKRQ8',
selector: '#checkout-modal',
theme: 'dark',
size: 'sm'
}
})
//ON A SUCESSFULL EMBED YOU SEE SOMETHING LIKE THIS AS RETURN
{
"id": "7eb1e19c-2653-4460-9daf-2c9923ccf1c0",
"type": "CheckoutModalButton",
"options": {
"checkoutId": "01G6B8C2MNN9J5MZZX9XTRKRQ8",
"selector": "#checkout-modal",
"theme": "dark",
"size": "sm"
}
}
After the HTML is edited you co to console and paste the prepared code The button is now visible
You can now use the widget. Refreshing the page will cause you to loose your changes though
Of course normally you'd make sure the style is consistent and you would not have such a mismatch on your live website, but for educational purposes you can play around with it like this.

Copy link
On this page
How to preview the Checkout on a live website