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
```
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.