Using SpiffyJS you’re able to embed checkouts right on your own website.
Table of Contents
- Find Embed Code
- Using Embedded Checkouts
- Advanced Popup / Embed Display Code Settings
- Compatibility Mode
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:
- Popup Checkout – When a customer clicks a link with your checkout URL, a popup of the checkout will appear.
- Embedded Checkout – Your checkout will appear inline.
Popup Checkout
How to setup a Popup Checkout on your website:
- Copy the SpiffyJS code and place it on your website
- 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:
- Copy the SpiffyJS code and place it on your website
- 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.
- Click on the drop down next to the Publish button, and select Embed Code
- Under Embedded Checkout, click on Settings
- Use the toggle button to turn Compatibility Mode on/off
- Copy the code and place it on your website where you’d like to display your checkout