Getting Started
Styling & Customization
Checkout Settings
Order Management
Reporting & Analytics
Customer Portal

Embedding Checkouts

Using SpiffyJS you’re able to embed checkouts right on your own website.

Table of Contents

Find Embed Code

Embed code can be found in the editor next to the Publish button.

Using Embedded Checkouts

There are two ways you can use your embedded checkouts:

  1. Popup Checkout – When a customer clicks a link with your checkout URL, a popup of the checkout will appear.
  2. Embedded Checkout – Your checkout will appear inline.

Copy the SpiffyJS code from Step 1 and place it on your website. Once you’ve done that, add your checkout URL to any links on your website, any links clicked with that URL will popup your checkout.

Embedded Checkout

Copy the SpiffyJS code from Step 1 and place it on your website. From Step 2 copy and paste the code and place it where you’d like to display your checkout.

Note: The ‘Step 1’ code is the same for both Popup Checkout and the Embedded Checkout, and it’s identical on all Spiffy Checkouts. So if you have added it to your page in the past for another Checkout Popup or Embed, you wouldn’t need to add it again.

This embed code is also identical to the code Spiffy provides for embedding upsells.

Advanced Popup / Embed Display Code Settings

When using Embedded or Popup Checkouts, Spiffy offers some additional controls for what is displayed on your site.

Changes to the Advanced Code Settings will modify the Step 1 code for the Popup or Embedded checkout, so be sure to modify these settings prior to copying the code to your site.

If you have already placed embed code on your site, you will need to update it with a fresh copy, after modifying these settings.

Compatibility Mode

This feature helps solve issues with certain page builders that conflict with Spiffy’s main embed code, like Hubspot & ClickFunnels 2.0. You can toggle this feature on/off in the advanced embed controls in the editor for your checkout page.

  1. Click Publish on your checkout
  2. Click on the Advanced Code Settings in the popup window
  3. Use the toggle button to turn Compatibility Mode on/off