Overview

Trust Banners are a great way to show off your reviews in a horizontal placement on your site. Customers can easily see your total review count and average star rating. We support 4 different versions.

You can find the Trust Banners under Display Widgets > Trust Banner

Note: Installing the Trust Banner to your site requires access to your site's HTML. If you are not the web developer, forward this article to them for installation. While it's just a matter of copy & paste, you do need access to your site's HTML.

The 4 versions of the Trust Banner are: 

How to add the Trust Banner to your site

1. The first step is determining where you'd like the Trust Banner to appear. Most customers tend to place them on the homepage, checkout page, cart page, or the bottom of the site - above the footer. Please ensure the area of your site has enough room to fit the banner. The size requirements are located on the Trust Banner page.

2. From the list of 4 Trust Banners select the one you like the most to place on your site. Under each banner is the code that needs to be added to your site. Select the code and copy it. 

3. Go to your site's HTML area and paste the copied code into the area where you'd like to show it.  

That's it, you're done! When customers visit your site they'll see an overview of how great your reviews are.

How to make Trust Banners Mobile responsive
​
Making the RaveCapture banners responsive is easy. You just need to add 2 different banner sizes to your page, surround them in <divs>, and then add a little CSS.

Note: This section contains technical instructions. If you're not comfortable handling the site's HTML/CSS, please forward this to your web developer for implementation.

We are going to use 2 banners (one that's desktop size, then a small one for mobile) and then show/hide them depending on the user's screen width. This can be done fairly easily using some CSS.

1. Copy and paste both a large desktop-sized banner and a small mobile-sized banner on top of each other.

2. Enclose both the banner iframes inside of divs like this ( large & small example ):

<div id="trustspot_banner_large"> iframe code here </div>
​<div id="trustspot_banner_small"> iframe code here </div> 

3. Add the following to your CSS:

@media (max-width: 779px) { #trustspot_banner_large{ display:none; }}@media (min-width:780px) { #trustspot_banner_small { display:none; }}  

Adjust the width numbers according to the large banner you choose. In the above example, 780 is the width of our largest banner. If you use the medium banner, change the numbers to 599 and 600, respectively as that is the width of the medium banner.
​ 
What those styles do is hide the large iframe when the window is too small to show it (mobile) and hide the small one when it's not too small (desktop). Therefore, when on desktop you will see the large banner, and on mobile you will see the small one.

Have a question or need support on this feature? 

Please get in touch with our support team via our live chat or at support@ravecapture.com.