Advanced Embed Controls

Our base embed code is a stripped down version of the checkout, with certain elements hidden by default, to make it look good across the most common use cases.  

By default, Spiffy hides the sidebar content on embedded checkouts, as we found that the background color on websites often made this section hard to read, and that most people prefer to create their content right on their webpage.

Below are some advanced settings that you can add to your Spiffy Checkouts embed code that give you more control over how the embed operates.

There are a few different elements that you can control by editing the code snippet below.  Changing the values to true or false depending on what you want to see; 

  • true will show the element
  • false will hide the element.

Note: Paste the following code right before "spiffy.load" at the end of your "Step 1 embed code" script.
(Copy the code below and paste it where the red line is, in screenshot below)

Do not place this after the Step 2 script as this can cause the Advanced Options to not load as you have configured them.

COPY THIS CODE:

spiffy.config({
            // Tracking Options
            trackingEnabled: true,
        
            // Order Form Options
            hideSummary: false,
            hideSidebar: false,
            hideHeader: true,
            hideFooter: true,
        
            // Takeover Options
            pageTakeover: true, // Used to easily turn both takeover settings on
            upsellPageTakeover: true,
            thanksPageTakeover: true,
        
            // Popup Options
            popupEnabled: true,
            popupPrefetch: true,
        })


PASTE THE CODE ABOVE INTO YOUR STEP 1 EMBED CODE, WHERE THE RED LINE IS, IN THE SCREENSHOT BELOW:

YOUR CODE SHOULD LOOK LIKE THIS:

Let us know if you have any questions. Always here to help. Just reach out to support@spiffy.co.