arrow-leftarrow-rightbook-openbooks-duotonechalkboardhead-side-brainlife-ring-regularmenusearchstopwatchvideo
Getting Started
Elements
Styling & Customization
Flows
Checkout Settings
Automation
Subscriptions
Order Management
Reporting & Analytics
Customer Portal
Affiliates
Integrations
TikTok
Zapier
Circle
Google
Rewardful
LeadDyno
FirstPromoter
Taxes
Custom Webhooks
ConvertKit
GoHighLevel
SEGMetrics
Drip
Make
MemberPress
Kajabi
Thinkific
MailChimp
ActiveCampaign
HubSpot
Keap
Infusionsoft
FAQ

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.

How to setup a Popup Checkout on your website:

  1. Copy the SpiffyJS code and place it on your website
  2. Copy the Popup URL and add it to any buttons on your website

Any buttons with this URL will popup your checkout when clicked.

Here’s how it will look:

Want all of your checkouts to popup?
Turn on the “Popup All Checkouts” toggle under the Advanced Settings for SpiffyJS. This will enable your checkout to popup by default via your main checkout URL, without needing to use the Popup URL.

Embedded Checkout

How to set up an Embedded Checkout, inline on your website:

  1. Copy the SpiffyJS code and place it on your website
  2. Copy the Embedded Checkout code and place it where you’d like to display your checkout

Here’s how it will look:

Note: The ‘SpiffyJS’ code is 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 SpiffyJS 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 Settings under Embedded Checkout.

  1. Click on the drop down next to the Publish button, and select Embed Code
  2. Under Embedded Checkout, click on Settings
  3. Use the toggle button to turn Compatibility Mode on/off
  4. Copy the code and place it on your website where you’d like to display your checkout