Squarespace Hack: Create Automatically Rotating Testimonials

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

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?

One of the biggest requests I have on Squarespace is creating both:

  1. a testimonial block without a ton of coding and;
  2. 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.

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.

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 = 4000;
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>

UPDATE AS OF APRIL 2019:

It seems Squarespace has changed something within their backend and the rotation no longer appears whilst in edit mode. It does, however, appear within a live site so you will have to view the website outside of configuration mode to see the rotation in effect.

This Post Has 14 Comments

  1. I’ve got the code pasted in to the index, the page and the blog code injection and it does not work. Using Brine template. Cannot find an answer anywhere

    1. Hi Daniel

      Post is now edited but it seems Squarespace have made some changes on their backend and the rotation no longer appears within edit mode. To view the rotation in action, you will need to view the website out of /config mode (try using an incognito window).

      Hope that helps!

  2. i am getting a syntax error of the first line. ANy thoughts?

    1. Hi Ayeisha,

      Where are you entering the code? Are you placing the

  3. Hello. I would LOVE to use this but it not exactly sure what I need to edit and where exactly it should go. Help?

    1. Hi Jen

      Once you create your testimonials within a blog page, follow the instructions to create a summary block on the page you want the testimonials to display.

      You will then need to go to Pages and select the gear icon shown next to the page (or main index page if the page is within an index), select the ‘Advanced’ tab and enter the code within the ‘Page Code Injection’ (note: this is now only available in Business Plans or higher).

      Hope that helps!

  4. Hello – I was really excited to find this and deploy it in my Brine template site. However, I am not finding that it works. I’ve set up the testimonial blog, displayed it as a summary block carousel, and added your suggested code to the INDEX code injection (not the page code injection) for my home page, and it isn’t working. Don’t know if SS has updated something since you posted this article, or if there is an error in my execution, but wanted to update you on my experience following your directions.

    1. Hi Stacey!

      Did you preview it on the live site? I will edit the post as it seems the code no longer works in edit mode but does when the site is viewed live (you can see it in action on a site here: https://www.startyourownfashionlabel.com)

      I have double checked the code and it is all correct and working.

  5. Hi everyone! Thanks, Virtual Studio for this wonderful trick. Like the other commenters here, I also used this code with no luck. BUT I persevered and kept trawling the net and have found a solution for me. Maybe it’ll help others? I found a tip to change
    var gallery=galleries[0];
    to
    var gallery=galleries[1];

    – This helped me with the 1 testimonial summary carousel I had on that page.

    I entered the code by going to the main Squarespace menu > PAGES > The cog next to my HOME index (My home page of the website is an index, with Testimonials is a sub-page of HOME) > Advanced > Page Header Code Injection.

    Then I changed the ‘var galleries’ line from 0 to 1. I also changed the ‘var duration’ to 8000 (8 seconds) because 4 seconds was a bit fast for my needs.

    I hope this helps you too!

    1. Thank you to both virtualstudiouk and Cyn, this saved me many hours of head-banging

  6. Finally! I’ve been trying to resolve this and I couldn’t see why it wasn’t working. First comment I’ve spotted about not seeing it working until it’s live. Thank you!

    1. Great! You’re very welcome 🙂

  7. This worked great for me! Any chance you know how to slow it down though?

    1. Hi Morgan – yes just amend the line in the code that reads ‘var duration = 4000;’ to the number of your choice (e.g. 7000 or 8000). These are milliseconds 🙂

Leave a Reply

Interested in working with us?

Close Menu

Contact Us.