Tuesday’s Tip: Use a lightbox to keep customers in your Infusionsoft cart

Update 7/1/2014: Infusionsoft has updated their version of jQuery to 1.10.2. This tip has been updated to accommodate this change.

It is often helpful to provide links to external content in your shopping cart or order form, like the terms of a money back guarantee or a YouTube video. This extra content can help reassure your customers about their purchase or provide a demonstration of the product. But we all know that if a customer leaves your shopping cart, they might never come back! A solution to this is to show your content in a lightbox. Instead of leaving your cart, the link will open in a modal dialog within the shopping cart page.

There are dozens of great jQuery plugins that provide lightbox functionality. Unfortunately, Infusionsoft uses an extremely outdated version of jQuery (v1.6.2 released June 30, 2011). It works great for DOM manipulation, but it isn’t compatible with the latest and greatest lightbox plugins. To get around this problem we modified a copy of jQuery v1.11.0 to work under a different name, jNew. We also modified an excellent lightbox plugin, Magnific Popup, to work with jNew instead of jQuery. We are hosting both of these modified libraries on a CDN that you are welcome to use. For this example I’m going to use an order form. You can easily use this code on a web form or shopping cart. First, you need to add the required libraries to your HTML custom header:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script>

Next you need to add your link to the page. You can put it anywhere you want. For this example, we are adding a huge 30 day money back guarantee image. It links to a basic page with details about the guarantee. In real life, you’d want to make the graphic or link fit better with your page, and make the target URL a bit better looking.

<center><a href="https://novaksolutions.com/demo/guarantee.php" class="guarantee-lightbox"><img src="https://novaksolutions.com/wp-content/uploads/2014/02/30-day-guarantee.png" /></a></center>

Notice that the link has a class on it. You need a unique class name for each link. Last, you need to add the JavaScript that will create the lightbox for each link. This code needs to go at the very end of the custom footer HTML. Notice that I’m using the jNew instead of jQuery, I’ve referenced the class name from the link, and specified that I want the link to show in an iframe. The Magnific Popup documentation has instructions on how to use other types of lightboxes, such as for images or with ajax content.

<script>
jQuery(document).ready(function() {
  jQuery('.guarantee-lightbox').magnificPopup({type:'iframe'});
});
</script>

Once you save your order form, the lightbox will be working. You can adjust the size of the lightbox using CSS if needed, like this:

<style>
.mfp-iframe, .mfp-iframe-holder .mfp-content {
    width: 600px !important;
    height: 400px !important;
}
</style>

8 Comments

    • Thanks for the positive feedback! Please let me know if there is anything you’d like us to cover in a future Tip.

      Reply
  1. Yes, I look forward to Tuesdays now as well.

    Reply
    • Thanks! We have a lot of fun putting the tips together, and it is always good to hear that people enjoy them.

      Reply
  2. Fantastic! What you guys do on Tuesdays here is much more than a tip, you should consider renaming these posts to “Tuesdays instructions to customize and improve your Infusionsoft platform, that other venders would charge you an arm and a leg to do, for FREE! ” Hmmmm ok maybe too long, but I think it’s a more accurate description. Thanks for the great post Jacob!

    Reply
  3. Hi Jacob

    I copied all the code exactly, and only swapped the link for my own. But for some reason it won’t show in the lightbox? I swapped https://novaksolutions.com/demo/guarantee.php
    for: http://foreverfit.tv/terms-conditions.php

    When I have your link there, the lightbox works perfectly and shows that page. When I swap those links over (everything else stays the same) it won’t show. Here is my test order form page: https://jb154.infusionsoft.com/app/orderForms/Site1-Website-Purchase

    Any help much appreciated.
    thanks

    Reply
  4. Ok I figured it out 🙂 . Need to make sure I have the link as SSL secured, otherwise won’t show on the order form page.

    Reply
    • Thank you for pointing out how you resolved this!

      Reply

Leave a Reply