How can I display one random testimonial each time my Webflow page refreshes without using the Random/Shuffle Order display? I tried using the script from Pixelgeek's Youtube video (), but it didn't work. Can someone please help me?

To display a random testimonial each time your Webflow page refreshes without using the Random/Shuffle Order display, you can follow these steps:

​

Step 1: Prepare your testimonials

First, make sure you have all your testimonials organized in a way that makes it easy to access them programmatically. For example, you can use a Collection in Webflow to store your testimonials, with fields for the testimonial text, author name, and any other relevant information.

​

Step 2: Set up custom code

In order to display a random testimonial, you'll need to add some custom code to your Webflow project.

​

First, add a new HTML embed element to your Webflow page where you want the testimonial to appear. Give it a unique ID so that it can be targeted in the code.

​

Next, go to the "Project Settings" in your Webflow editor and then navigate to the "Custom Code" tab. In the "Footer Code" section, add the following JavaScript code:

​

```javascript

<script>

  function getRandomTestimonial() {

    // Get the list of testimonials from your collection

    var testimonials = [

      /* Add your testimonials here */

    ];

​

    // Get a random index

    var randomIndex = Math.floor(Math.random() * testimonials.length);

​

    // Get the testimonial at the random index

    var randomTestimonial = testimonials[randomIndex];

​

    // Return the testimonial

    return randomTestimonial;

  }

​

  // Code to run on page load

  window.addEventListener("DOMContentLoaded", function() {

    // Get the HTML embed element by its ID

    var testimonialElement = document.getElementById("your-html-embed-id");

​

    // Get a random testimonial

    var randomTestimonial = getRandomTestimonial();

​

    // Update the HTML embed element with the testimonial content

    testimonialElement.innerHTML = randomTestimonial.content;

  });

</script>

```

​

Make sure to replace `"your-html-embed-id"` with the actual ID of your HTML embed element.

​

Step 3: Add your testimonials

In the JavaScript code above, you'll notice a line that says `var testimonials = []`. This is where you should add your testimonials in the following format:

​

```javascript

var testimonials = [

  {

    content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",

    author: "John Doe"

  },

  {

    content: "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec varius enim at condimentum aliquet.",

    author: "Jane Smith"

  },

  // Add more testimonials here

];

```

​

Replace the example testimonials with your actual testimonials, including the content and author information.

​

Step 4: Adjust the design

Finally, make sure to adjust the design of your HTML embed element to match the styling of your testimonials. You can use Webflow's styling and layout tools to achieve the desired look.

​

That's it! Now, each time your Webflow page refreshes, a random testimonial will be displayed. You can add as many testimonials as you want, and they will be randomly selected each time the page loads.