UK US

Page Preview Flip Book

This Flip Book PREVIEW FACILITY allows your customers to preview the inside pages of our books. It is the same as Amazon’s LOOK INSIDE.

A great tool to increase conversion allowing customers to see what they are getting before they buy.

Easy to implement on your site – 2 ways you can do this:

  1. Use the links to each book preview below and place on relevant product page of your site
  2. To avoid opening another web page, set up a modal or pop up box – see "Signature Gifts Flip Book Implementation".

Flip Book Links for Signature Products

Developers Click Here for List of all links and titles in .txt format

Children's Story Books

Children's Activity Books

Other Books

Signature Gifts Flip Book Implementation


The Flip book is a stand-alone web page hosted by Signature Gifts and is available for all customers to use. The simplest implementation is to simply create a link to take the user to the site. Unfortunately the downside to this is that the customer is taken to a different page.

There are various way around this issue but the most common is to use a “lightbox” style pop-up such as the one used on our sister site Simply Personalized

This is simple to implement by following the instructions below.

  1. Download the latest version of FancyBox from http://fancyapps.com/fancybox/ and copy the contents of the “Source” folder into a folder called “Fancybox” within your website. This should include a jquery.fancybox.js, jquery.fancybox.css and a number of images.
  2. In the header section of your page, you’ll need to load jQuery and FancyBox by adding the following 3 lines (Please note, jQuery should be loaded before Fancybox):
         
        <script src="http://code.jquery.com/jquery-latest.min.js">
        <script src="fancybox/jquery.fancybox.js">
        <link href="fancybox/jquery.fancybox.css" rel="stylesheet">   
          
  3. Add a script to the header to tell the system to how to open FancyBox (there are more options available in the Fancybox documentation):
    
     <script>
         $(".fancybox-html").fancybox({
             autoSize: true,
             closeClick: false,
             fitToView: true,
             type: 'iframe'
         });
        </script>
    
    
  4. Add a link to the page with a class of “fancybox-html” to open eg: <a href="http://fb.signature-gifts.co.uk/flipbook/?Product=YLTS" class="fancybox-html">Your Letter To Santa</a><br /> That’s it, the flip book will open without taking the user away from your website!

Example HTML for Fancybox Flip Book


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Flip book in Fancybox Test Page</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="fancybox/jquery.fancybox.js"></script>
    <link href="fancybox/jquery.fancybox.css" rel="stylesheet" />

        <script>
            $(".fancybox-html").fancybox({
                autoSize: true,
                closeClick: false,
                fitToView: true,
                type: 'iframe'
            });
    </script>

</head>
<body>
<a href="http://fb.signature-gifts.co.uk/flipbook/?Product=YLTS" class="fancybox-html">
Your Letter To Santa</a><br />
</body>
</html>