Gathering and sharing testimonials is one of the best ways you can build better relationships with clients. When someone provides you with a testimonial, it means they're much more likely to stick with you long term. And they're also great to share on your website so prospective customers can see how existing clients feel about you.

In this article, we'll show you how to customize the widget for sharing testimonials on your website.

Where to get the testimonial ID.

Need help finding the testimonial widget? See this article.

Before you customize the widget, you need the testimonial ID. From your view publish instructions window, copy the following section of the HTML code.

Make sure you don't copy the = or the ' on either side of the ID.




Save the ID somewhere easily accessible.


How to set up the scrolling widget on your site.

Copy the HTML code below:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<div id="RRTestimonials" style="height: 260px; overflow: hidden; padding-top:20px;"></div>
<div id="RRTestimonials" style="display: none; border: 0px;"></div>
<script async src='https://cf.rocketreferrals.com/jsloader/v2?c_id=YOURUNIQUEID'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
setInterval(function(){
var elem = jQuery('#RRTestimonials');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
elem.scrollTop(0);
}else{ elem.scrollTop(elem.scrollTop()+1)}
}, 50);});50
window.RRLoader = window.RRLoader || [];
window.rrcall = window.rrcall || function(){RRLoader.push(arguments);}
rrcall('set_testimonial_template', "{{#testimonials}}<blockquote class='rr-testimonial'><p>{{comment}}</p><small><cite>{{signature}}</cite></small></blockquote>{{/testimonials}}");
rrcall('load_testimonials', 'RRTestimonials');
</script>​



Insert the HTML into your website.


Find the following line and replace YOURUNIQUEID with the testimonial ID.

<script async src=’https://cf.rocketreferrals.com/jsloader/v2?c_id=YOURUNIQUEID'></script>


Publish or save your website for the changes to take effect.




How to set up the fading widget on your site.

Copy the HTML code below:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<div id='RRCurrentTestimonial' style="height:120px;"></div>
<div id='RRTestimonials' style="display: none;"></div>
<script src='https://cf.rocketreferrals.com/testimonialwidget/YOURUNIQUEID.js'></script>

<script type='text/javascript'>jQuery(document).ready(function(){
var current_index = 0;
var testimonial_container = jQuery('#RRCurrentTestimonial');
var testimonials_array = jQuery('#RRTestimonials').find('blockquote');
testimonial_container.html(testimonials_array[current_index].outerHTML)
current_index ++;
setInterval(function(){
testimonial_container.fadeOut().promise().done(function(){
testimonial_container.html(testimonials_array[current_index].outerHTML);
testimonial_container.fadeIn().promise().done(function(){
if(current_index == testimonials_array.length-1){
current_index = 0;
}else{
current_index++;
}
});
});
}, 7500);});
</script>



Insert the HTML into your website.


Find the following line and replace ID with the testimonial ID.

<script src='https://app.rocketreferrals.com/testimonialwidget/ID.js?'></script>


Publish or save your website for the changes to take effect.

You can change the speed of the testimonial by reducing it from 7500 in the last line of HTML. The below speed is set at 2250.




How to show a specific employee's testimonial only.

This change can be made to any customized widget.

On the left-nav menu, click Settings.




Select an employee.




Copy the employee's testimonial ID.




Find the following line and add user_id=# where UNIQUEEMPLOYEEID is the employee's testimonial ID.

​https://app.rocketreferrals.com/testimonialwidget/Ay2eKupo6JQeZoXDom4v-A.js?user_id=UNIQUEEMPLOYEEID​


How to show specific testimonials only.

This change can be made to any customized widget.

Select a testimonial.




Copy the testimonial ID.




Find the following line and add ids where UNIQUETESTIMONIALID is the testimonial ID.

​https://app.rocketreferrals.com/testimonialwidget/Ay2eKupo6JQeZoXDom4v-A.js?ids=UNIQUETESTIMONIALID,UNIQUETESTIMONIALID,UNIQUETESTIMONIALID​


How to add multiple widgets on a single page.

In the first line, create custom IDs for each div.

<div id='RRTestimonials'></div>

becomes

<div id='RRTestimonials1'></div> and <div id='RRTestimonials2'></div>


Add id= followed by your unique custom ID at the end of the second line.

<div id='RRTestimonials1'></div>
<script src='https://app.rocketreferrals.com/testimonialwidget/random_key_1.js?id=YOURUNIQUEID1'></script>


<div id='RRTestimonials2'></div>
<script src='https://app.rocketreferrals.com/testimonialwidget/random_key_2.js?id=YOURUNIQUEID2'></script>


How to limit responses.

This change can be made to any customized widget.

Find the following line and add limit=# where # is the number of responses to display.

​https://app.rocketreferrals.com/testimonialwidget/Ay2eKupo6JQeZoXDom4v-A.js?limit=4


JSON Callback

For advanced users only.

This allows you to customize the widget in any way you like:

https://app.rocketreferrals.com/testimonialwidget/Ay2eKupo6JQeZoXDom4v-A.js?callback=myfunction


Related articles

Sharing testimonials to social media
Setting up the testimonial widget
Publishing testimonials