Embed your Checkout code
How to embed your custom Checkout code into your website (Embed and Modal Checkout types)

Following topics are discussed:

Inserting the code directly into the webpage

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.

Using WordPress Free

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.

Using WordPress Pro

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.

Video Tutorial - Adding custom JavaScript to WordPress

Using WPbakery

Using Elementor

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.

Using react.js

First you will create an EmberScript.js with following content :

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',
}
})
}, [])

For Example :

//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'   
    }
})
}, [])

Using Webflow

Custom code | Webflow University

Using WIX

Copy link
On this page
Following topics are discussed:
Inserting the code directly into the webpage
Using WordPress Free
Using WordPress Pro
Video Tutorial - Adding custom JavaScript to WordPress
Using WPbakery
Using Elementor
Using react.js
Using Webflow
Using WIX