Squarespace Hack: Create Automatically Rotating Testimonials

A big part of every business is gaining reviews and testimonials to showcase on your website but how do you go about displaying this on your Squarespace site?

testimonials.jpg

One of the biggest requests I have on Squarespace is creating both a) a testimonial block without a ton of coding and b) making it automatically rotate.

Although Squarespace doesn't supply this feature specifically there is a great little workaround by making use of a carousel summary block (you can see this in full effect on my home page)

Here's a step by step:

Step 1. Go to pages and create a new BLOG page type; let's name this 'testimonials' (or whatever you see fit)
Step 2. Within the page, select the + sign to add a new post
Step 3. Bypass the first page completely and switch from the 'Content' tab to 'Options'
Step 4. Paste your testimonial in the EXCERPT section. If you want to add a credit, I suggest making that part bold or giving it a h3 style and even link it back to their site.
Step 5 (optional). Add a logo or image to the 'Thumbnail Image' section if you wish to show this.

 
Capture.PNG
 

Step 6. Rinse and repeat step 2-5 until you've completed all of the testimonials you want to display within the rotating block.
Step 7. Leave this section and go back to the page/section you wish to showcase these testimonials. Select a Summary Carousel block to add to the page.

 
 

Step 8. In the 'Content' tab, select the page we've just created; in this case it's 'Testimonials'
Step 9. Adjust the settings on both the 'Layout' and 'Display' tabs to suit your needs. My recommendations can be seen below.

 
 

Step 10. Once you're happy, click save!

Want to make this automatically rotate?

Head over to the page settings and go to the 'Page Code Injection' (if it's an index page you have the tesimonials on, do this on the INDEX settings and not the page) and enter the following code (adapted from squarespace answers):

<script>
     Y.on('domready', function () {
         var galleries = Y.Squarespace.GalleryManager.getGalleries();
         var duration = 2000; /*this is the speed, change this to suit your needs */
         var gallery=galleries[0];
         var carousel=gallery["gallery-design"];
         var totalGroups=carousel.get('totalGroups');
         var currentGroup=0
         var container=gallery.get("container");
         var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){
             e.preventDefault();
             e.stopPropagation();
             advanceCarousel()
         })
         var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){
             e.preventDefault();
             e.stopPropagation();
             backupCarousel()
         })
         Y.one(container._node).get('parentNode').on("mouseover",function(){
             clearInterval(myInterval)
         })
         Y.one(container._node).get('parentNode').on("mouseout",function(){
             clearInterval(myInterval)
             setMyInterval()
         })
         var myInterval;
         function setMyInterval(){
             myInterval = setInterval(function(){
                 advanceCarousel()
             },duration)
         }
         setMyInterval();
         function advanceCarousel(){
             if(currentGroup==(totalGroups-1)){
                 currentGroup=0;
             }else{
                 currentGroup++;
             }    
             carousel.goToGroup(currentGroup);
         }
         function backupCarousel(){
             if(currentGroup==0){
                 currentGroup=totalGroups-1
             }else{
                 currentGroup--;
             }
             carousel.goToGroup(currentGroup);
         }
     });
 </script>

Ta-da! You're done!