First, you need to add the required libraries to your HTML custom header:

Home Automations Cart Redirect CJ Conversion Tag Cloud Backup Data Warehouse Easy API Email Importer html5 Event Registration Fish Lift Health Check Importer Owner Redirect Profile and Payments Simple Broadcast Sender Social Bridge Survey Bridge Integrations CJ Affiliate Crystal Reports Excel Fishbowl html5 Microsoft SQL Server MySQL Oracle PostgreSQL SurveyGizmo SurveyMonkey Tableau Windows Azure Woobox WordPress Contact Us
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!
There are dozens of great jQuery plugins that provide lightbox functionality. Unfortunately, Infusionsoft uses an extremely outdated version of jQuery (v1.6.2 html5 released June 30, 2011). It works great for DOM manipulation, but it isn’t compatible html5 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 html5 to use.
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="//d1zcb7keu4rf07.cloudfront.net/free/jnew-1.11.0.min.js"></script> <script src="//d1zcb7keu4rf07.cloudfront.net/free/jnew.magnific-popup.min.js"></script>
Next you need to add your link to the page. You can put it anywhere html5 you want. For this example, we are adding a huge 30 day money back guarantee image. html5 It links to a basic page with details about the guarantee. html5 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="http://novaksolutions.com/wp-content/uploads/2014/02/30-day-guarantee.png" /></a></center>
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 html5 footer HTML. Notice that I’m using the jNew instead of jQuery, I’ve referenced html5 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> jNew(document).ready(function() { jNew('.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>
Thanks! We have a lot of fun putting the tips together, and it is always good to hear that people enjoy them. Reply
Fantastic! html5 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
Recent Blog Posts Tuesday’s Tip: Get your Infusionsoft merchant account ID via the API Tuesday’s Tip: Add Facebook comments to your Infusionsoft web forms Tuesday’s Tip: Default values for Infusionsoft dropdown custom fields Tuesday’s Tip: Use a lightbox to keep customers in your Infusionsoft cart Tuesday’s Tip: Get more subscribers with exit intent popups
Recent Blog Posts Tuesday’s Tip: Get your Infusionsoft merchant account ID via the API Tuesday’s Tip: Add Facebook comments to your Infusionsoft web forms Tuesday’s Tip: Default html5 values for Infusionsoft dropdown custom fields Tuesday’s Tip: Use a lightbox to keep customers in your Infusionsoft cart
Sorry, your blog cannot share posts by email.