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?
- Create a collection of testimonials with unique identifiers, and add a custom script in Webflow's Project Settings under "Custom Code" inside the
<body>tag. - Adjust the script to select a random testimonial on page load by setting one to 'block' and others to 'none', then publish the site to see it in action.
Displaying a random testimonial on your Webflow page without using the Random/Shuffle Order display can be achieved through a custom script. Here's how you can implement it step-by-step:
1. Prepare Your Testimonials
- Ensure you have a collection of testimonials with individual testimonial items.
- Each testimonial should have a unique identifier if possible, like a specific class or data attribute.
2. Add Custom Code to Your Page
- Go to Project Settings in Webflow and then select the “Custom Code” tab.
- Use the “Inside <body> tag” section to paste your custom script.
- The following inline script is a basic example to randomize visible testimonials on page load:
```javascript
<script>
var testimonials = document.querySelectorAll('.testimonial-class'); // Adjust the class selector
var randomIndex = Math.floor(Math.random() * testimonials.length);
testimonials.forEach(function(testimonial, index) {
testimonial.style.display = (index === randomIndex) ? 'block' : 'none';
});
</script>
```
- Adjust the class selector
.testimonial-classto match your testimonial elements. - This script randomly selects one testimonial and sets its display property to 'block' while others are set to 'none'.
3. Publish Your Site
- Save your changes in the Project Settings.
- Publish your Webflow site to test the random testimonial display on page refresh.
4. Troubleshooting
- Ensure your testimonials have the correct class or identifier used in the script.
- Check for any JavaScript errors in the browser console that might indicate issues with the script.
Summary
To display a random testimonial each time your page refreshes in Webflow, use a custom script that selects and displays a random testimonial while hiding the others. Ensure the script matches the targeted elements and is placed correctly in the custom code settings of your project.