.png%3Falt%3Dmedia%26token%3Ddce0bf44-2e46-4402-be93-72742df26b85)
.png%3Falt%3Dmedia%26token%3Ddce0bf44-2e46-4402-be93-72742df26b85)
Embed your Checkout code
How to embed your custom Checkout code into your website (Embed and Modal Checkout types)
The code goes in the <head> section between
<script> .. </script> tags
<html>
<head>
<title>Embr Checkout</title>
<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)}}})()
/* START EMBED CODE */
window.EMBR.mount({
type: 'CheckoutEmbed',
options: {
checkoutId: '01G5XJ86XCD16HBRFC6BQ1Y6SH',
selector: '#checkout'
}
})
/* END EMBED CODE */
</script>
</head>
In the
<Body> you attach the reference ID where you want the button or widget to be on your website<div id="checkoutEmbedID"></div>Note : The Checkout Launcher does not require a reference ID
<body style="background-color:black;">
<div id="checkout"></div>
</body>
</html>
There are plans to develop an integration plugin for WordPress, but for now, you must use the following steps.
There is no easy way to embed the code in WP free, but see below for some tips and tricks.
Best is to upgrade to a Pro version, and use a plugin.
You use a header / footer plugin to put the code in Scripts in HEADER in <script> .. </script> tags
You put the reference in a CSS ID field or similar.
There are a few ways of adding the code to your webpage, the most common ones are :
1. Via an HTML widget ( default in elementor)
https://elementor.com/help/html-widget/
Drag the widget to your webpage.
Insert the code including <script></script> tags
2. Via a plugin like : Essential Addons
https://essential-addons.com/elementor/
You put the reference in a CSS ID field or similar.
import { useEffect } from "react";
export const initEmbr = () => {
if(!document.getElementById("embr-script")){let a=document.createElement("script");a.id="embr-script",a.type="text/javascript",a.async=!0,a.src="https://cdn.embr.org/embeddables.es.js",document.head.append(a)}
if(!window.EMBR){const t=[];window.EMBR={_init:t,mount:e=>t.push(e)}}
}
export const mount = (config) => {
try{
window.EMBR.mount(config)
}catch(e){
console.log("Embr Error", e);
}
}
const EmbrScript = () => {
useEffect(initEmbr, []);
return null
}
export default EmbrScript;
Then you can either manually call the
initEmbr function, or you can just load the EmbrScript component into the app, then call the mount function with your code. useEffect(()=>{
initEmbr();
mount({
type: 'CheckoutLaunchButton',
options: {
checkoutId: 'xxx',
}
})
}, [])
//example :
useEffect(()=>{
initEmbr();
mount({
type: 'CheckoutLaunchButton',
options: {
checkoutId:'01G71WMMF9DP9W49QYS91WGYCZ',
theme: 'dark'
}
})
}, [])
How to add more then one checkout :
useEffect(()=>{
initEmbr();
mount({
type: 'xxx',
options: {
checkoutId: 'xxxxx',
theme: 'dark'
}
})
mount({
type: 'xxx',
options: {
checkoutId: 'xxxxx',
theme: 'light'
}
})
}, [])
