Testimonials

Here is the code to our old testimonial widget:

<!-- Start InflatableOffice Testimonials Widget-->
<div id="io_testimonials">   </div>
<a target="_blank" href="https://www.inflatableoffice.com/NULL_rental_software.php"; title="NULL rental software"><img style="border:0;margin-top:-12px;" src="https://www.inflatableoffice.com/images/party_rental_software.png"; id="ioimg" alt="NULL rental software" /></a>
<script src="https://www.inflatableoffice.com/testimonials_iframe.php?user=jjbounceez&location_id=0&width=100%&number_of_reviews=10&show_average_rating=1&show_stars=1&show_date=1&show_reviewer_name=1&orderby=time">;
<!-- End InflatableOffice Testimonials Widget -->

<!-- Start InflatableOffice Testimonials Widget-->

<div class="testi_wrapper">
<div id="io_testimonials"></div>
</div>

<script>
let io_random = true;
let io_un = getIOUserInfo('io_username');
let io_url1 = 'https://www.inflatableoffice.com/testimonials_iframe.php?user=';
let io_url2 = '&location_id=0&width=100%&number_of_reviews=10&show_average_rating=1&show_stars=1&show_date=&show_reviewer_name=1&orderby=time&iframe=0';
let io_url_c = io_url1 + io_un + io_url2;
fetch(io_url_c, {
method: 'get'
}).then(
function(response){
return response.json();
}
).then(function(data) {

if (io_random) {
let rand, temp, i;

for (i = data.length - 1; i > 0; i -= 1) {
rand = Math.floor((i + 1) * Math.random());
temp = data[rand];
data[rand] = data[i];
data[i] = temp;
}

}

let element = document.getElementById("io_testimonials");
let out = "";
let review_cnt=0;
let rating_sum = 0;
data.forEach((user) => {
const { name, review, rating, time } = user;
rating_sum += Number(rating);
review_cnt++;
let img_star = Math.round(parseFloat(rating));
star = `<img src="https://www.inflatableoffice.com/images/${img_star}star.png"; />`;
out +=
`<div>
<ul class="w3-ul">
<li> ${star}</li>

<li>"${review}"</li><br>
<li> ${name}</li>
<li> ${time} </li>
</ul>
</div>`;
});
let avg = (parseFloat(rating_sum)/parseFloat(review_cnt)).toFixed(1);
let avg_img = Math.round(avg);
let head = `<h2>Avg Rating: ${avg}</h2>`;
element.innerHTML = head + out;
}).catch(function(err) {
console.log(err);
});
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Economica|Montserrat');
.testi_wrapper {
background: #ddd;
padding: 10px;
border-radius: 10px;
border: 1px solid #ddd;
}
#io_testimonials {
max-height: 250px;
overflow: auto;
position: relative;
}

#io_testimonials img {
margin: 0 0 10px 0;
}
#io_testimonials h2 {
text-align: center;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
text-shadow: 2px 2px 10px rgba(0,0,0,0.30);
margin: 10 0 20px 0;
}
#io_testimonials ul {
list-style: none;
text-align: left;
display: block;
width: 95%;
position: relative;
left: 50%;
transform: translatex(-50%);
background: linear-gradient(to top, #fff, #ddd);
border-radius: 6px;
padding: 10px;
border: 1px solid #fff;
box-shadow: 0px 2px 3px rgba(0,0,0,0.3);
}
#io_testimonials ul:hover {
background: #fff;
}
#io_testimonials li {
font-family: 'open sans', sans-serif;
font-size: 1rem;
line-height: 1.25;
margin: 5px;
}
</style>

<!-- End InflatableOffice Testimonials Widget -->