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 CMS collection or unique identifiers for testimonials.
- Embed custom JavaScript to randomly display one testimonial by manipulating their visibility.
- Publish the site and refresh to test functionality, ensuring uniform class use and checking for errors.
Displaying a random testimonial on your Webflow page upon refresh involves using JavaScript to manipulate the testimonials dynamically without relying solely on the Random/Shuffle Order settings. Here’s a step-by-step guide to help you achieve this:
1. Organize Your Testimonials
- Create a CMS collection for your testimonials if you haven't already. If you are not using CMS, ensure you have a class or unique identifier for each testimonial.
2. Add Unique Identifiers
- Assign unique class names or IDs to each of your testimonial elements to make them accessible via JavaScript. This is crucial for targeting which testimonial to display.
3. Add a Custom Code Embed
- Embed a custom script on your page using the Embed element in Webflow or by adding it directly in the Site Settings under Custom Code > Footer Code.
4. Write and Insert Custom JavaScript
- Use JavaScript to randomly select one testimonial to display. Insert the following script into your Custom Code section:
```javascript
<script>
// Wait until page has loaded
document.addEventListener('DOMContentLoaded', function() {
// Gather all testimonials
var testimonials = document.querySelectorAll('.testimonial-class');
// Hide all testimonials initially
testimonials.forEach(function(testimonial) {
testimonial.style.display = 'none';
});
// Choose a random testimonial to display
var randomIndex = Math.floor(Math.random() * testimonials.length);
testimonials[randomIndex].style.display = 'block';
});
</script>
```
- Replace
.testimonial-classwith the actual class or ID name of your testimonials if different.
5. Test Your Implementation
- Publish your Webflow site to apply the changes.
- Refresh the page multiple times to ensure a different testimonial is displayed on each load.
6. Troubleshoot Common Issues
- Ensure all testimonials carry the same class or identifier that you specify in the script.
- Check browser console for any errors if the script does not seem to execute properly.
Summary
To display one random testimonial on each page refresh, organize your testimonials with clear identifiers, use JavaScript to control their visibility, and ensure everything is properly linked and functioning by testing the published site. This method gives you control over displaying testimonials without solely relying on Webflow's built-in order settings.
