Embedding Reviews with Rex

Many businesses use Rex to get more online reviews. But did you know Rex also makes it easy to show off your good reviews as testimonials on your website?

Rex allows you to embed reviews on your own website

Requirements

The first thing you’ll need is, of course, a Rex account. Click here to sign up, or email info@meetrex.com to learn more.

Once you have a Rex account, make sure your reviews are scraped. From the Rex dashboard, click HELP > FAQ and scroll down to How do I get my reviews to display on the Reviews page? to learn more.

Next, you’ll need an access string in order to use the embeddable review page. Call (877) 814-4644 or email info@meetrex.com to request your access string.

Available Options

The page that you’ll want to embed in an iframe can be accessed through the following URL:

https://meetrex.com/Owners/EmbedReviews/?secret=

The secret parameter is required. In addition, the following optional parameters can be used:

• min_rating: The lowest star rating you want to show on your website. Example: min_rating=5
• from_date: In order to show only the newest reviews, you can choose a cut-off date in yyyy-mm-dd format. Example: from_date=2018-12-31
• only_with_text: If you’d like to omit star-only reviews without text, set this to true: only_with_text=true
• max_reviews: Like from_date, this parameter offers a way to limit the total number of reviews. If no number is specified, the page will display up to 100 reviews. Example: max_reviews=20
• date_format: If omitted, the default format depends on the country: In the U.S., the format is mm/dd/yyyy is used. In other English-speaking countries, the format is dd/mm/yyyy. In French-speaking countries, the format is dd.mm.yyyy.
• display_responses: If set to true, the business owner’s response (if any) to each review is displayed under the review itself: display_responses=true
• response_heading: If display_responses is true, this parameter can be used to set the response heading. Spaces should be encoded as %20. If omitted, the heading will be “Response from the owner”. Example: response_heading=Réponse%20du%20propriétaire
• css_file: The full URL of a CSS file hosted by you. Example: css_file=https://your.domain.com/css/reviews.css

The full iframe might look something like this:

<iframe id="our_reviews" src="https://meetrex.com/Owners/EmbedReviews/631?secret=oursecret&amp;date_format=dd.mm.yyyy&amp;display_responses=true&amp;response_heading=Response%20from%20Meet%20Rex&amp;only_with_text=true&amp;css_file=https://meetrex.com/css/reviews.css" width="1000"></iframe>

Setting the Height of the iframe

In order to display the iframe without a scroll bar and without unnecessary empty space below the iframe, we need to set the height of the element dynamically. As soon as the iframe loads, it communicates its height to the parent page. It is then up to the parent page to set the height of the element accordingly:

<script>
    window.addEventListener('message', function(e) {     
        document.getElementById('our_reviews').style.height = e.data.h + 'px';
    } ,false);
</script>

Styling the iframe with CSS

The option to link to your own CSS file makes it possible to style the iframe however you want. You could, for instance, hide the icons of Google, Facebook, Yelp etc.:

div.review_site_image {
  display: none;
}

Or replace the stars with different stars:

div.stars img {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  padding-left: 30px;
  background: url(https://yoursite.com/your_favorite_star.png) left top no-repeat;
}

Displaying Totals and Averages

In order to display your total number of reviews and average rating, add the following code to your website:

Average rating <span id="average"></span> (based on <span id="totalReviews"></span> reviews)

<script>
fetch('https://meetrex.com/Owners/ReviewStats/<your account number here>?secret=<your access string here>')
  .then(data => {return data.json()})
  .then(res => {
    document.getElementById('average').innerHTML = res.RatingAverage;
    document.getElementById('totalReviews').innerHTML = res.TotalReviews;  
  });
</script>

Happy embedding!