Integration guide

Optional: Integrate the badge code

The Google Customer Reviews (GCR) badge code is the first of two code snippets that you implement for Google Customer Reviews integration. The badge is optional.

This section describes the following topics:

Integration instructions

To integrate the GCR badge on a page, you must:

  1. Update the DOCTYPE
  2. Add the GCR badge

These tasks are described in the sections that follow.

When you implement the badge code on your pages, the following image is displayed (rating values will vary):

In most cases, you must have at least 150 reviews during the past year for your seller rating to appear on your badge.

Do not obscure the badge with any other content on your pages.

Update the DOCTYPE

Be sure that web pages on which you implement the badge use the HTML5 DOCTYPE:

<!DOCTYPE html>

This doctype must be the first line item in the HTML code on your page. Using the HTML5 DOCTYPE ensures that web browsers will render your pages in standard mode instead of quirks mode. Quirks mode refers to a technique used by some web browsers to maintain backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.

NOTE: Do not include comments or whitespace before the DOCTYPE.

Add the GCR badge

To show your customers that you use Google Customer Reviews, add the GCR badge to any pages of the website on which you want it to appear.

If you want the badge to appear inline, use the method described below. Otherwise, use the following method to place the GCR badge on the bottom right or bottom left of the page.

To add the GCR badge to your site:

  1. Paste the following code snippet into your web page:

    
    <!-- BEGIN GCR Badge Code -->
    <script src="https://apis.google.com/js/platform.js?onload=renderBadge"
      async defer>
    </script>
    
    <script>
      window.renderBadge = function() {
        var ratingBadgeContainer = document.createElement("div");
          document.body.appendChild(ratingBadgeContainer);
          window.gapi.load('ratingbadge', function() {
            window.gapi.ratingbadge.render(
              ratingBadgeContainer, {
                // REQUIRED
                "merchant_id": MERCHANT_ID,
                // OPTIONAL
                "position": "POSITION"
              });           
         });
      }
    </script>
    <!-- END GCR Badge Code -->
    

    Place the code just before the closing </BODY> tag on the page. When placed with the survey opt-in code, the order does not matter.

  2. Replace the values in red with your site-specific, dynamic values. The following table describes the available settings:
     
    Variable Required? Description
    MERCHANT_ID Required Your Merchant Center ID. You can get this value from the Google Merchant Center.
    POSITION Optional Renders the badge in one of the following locations:
    • "BOTTOM_RIGHT": Causes the badge to float in the bottom right of the page.
    • "BOTTOM_LEFT": Causes the badge to float in the bottom left of the page.
    • "INLINE": Renders the badge in the place in which the code appears. When using this option, be sure that other elements on the page do not block or obscure the badge. For a simpler method, see add the GCR badge inline.

    The default position of the badge is "BOTTOM_RIGHT".

     

  3. Specify the language that the badge uses by pasting the following code snippet into your web page:
     
    
    <!-- BEGIN GCR Language Code -->
    <script>
      window.___gcfg = {
        lang: 'LANGUAGE'
      };
    </script>
    <!-- END GCR Language Code -->
    

    Place the code just before the closing </BODY> tag on the page. When placed with the badge code, the order does not matter.

    Set the value of the lang parameter by replacing LANGUAGE with one of the following supported languages:

    • af
    • ar-AE
    • cs
    • da
    • de
    • en_AU
    • en_GB
    • en_US
    • es
    • es-419
    • fil
    • fr
    • ga
    • id
    • it
    • ja
    • ms
    • nl
    • no
    • pl
    • pt_BR
    • pt_PT
    • ru
    • sv
    • tr
    • zh-CN
    • zh-TW

    If you do not specify a value for the lang parameter, the badge uses the user's browser setting to automatically choose the language.

  4. Repeat steps 1 through 3 for all pages in your website on which you want the badge to appear.
  5. To complete GCR integration, you must add the survey opt-in module to your order confirmation page. The survey opt-in module is required.

To add the GCR badge inline:

  1. Paste the following line before the closing body tag in your HTML page, to load the JavaScript for the badge:

    
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    
  2. Paste this line in your HTML at the location on the page where you would like the badge to appear:
    
    <g:ratingbadge merchant_id=MERCHANT_ID></g:ratingbadge>
    

    Replace MERCHANT_ID with your own Merchant Center ID.

  3. Specify the language that the badge uses as described here.

  4. Add the survey opt-in module to your order confirmation page. The survey opt-in module is required.

Example badge code

The following example shows the code to place the badge at the bottom left of the page, for merchant ID 42:


<!-- BEGIN GCR Badge Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderBadge"
  async defer>
</script>

<script>
  window.renderBadge = function() {
    var ratingBadgeContainer = document.createElement("div");
    document.body.appendChild(ratingBadgeContainer);
    window.gapi.load('ratingbadge', function() {
      window.gapi.ratingbadge.render(
        ratingBadgeContainer, {
          "merchant_id": 42,
          "position": "BOTTOM_LEFT"
        });
    });
  }
</script>
<!-- END GCR Badge Code -->

<!-- BEGIN GCR Language Code -->
<script>
  window.___gcfg = {
    lang: 'en_US'
  };
</script>
<!-- END GCR Language Code -->

If the badge does not appear on your page, or you get errors when loading the page, see Troubleshooting.

Troubleshooting

This section describes some common errors that you might encounter when implementing the GCR badge code.

The badge is not visible

The badge can take one of the following forms:

  • Floating: The badge appears in either the bottom left or bottom right of the page.
  • Inline: The badge appears where you inserted the snippet.
  • With seller rating: The badge includes the star rating, if applicable.
  • Without seller rating: The badge does not include the star rating.

If the badge is not visible on the page, look for the following possible sources of problems:

Problem Diagnosis
The HTML source does not contain the badge and language code View the HTML source in your browser and check that exactly one instance of the badge code and one instance of the language code blocks appear on the page.
The badge is off-screen or blocked by other elements The badge might be rendered beyond the boundaries of the viewable area. Try scrolling vertically and horizontally around the page to see the badge.
The badge text is always in English, regardless of the language setting, and the star ratings are grayed out. This is expected behavior if you have not reached the threshold to display your ratings. The threshold is 150 or more seller reviews.

The page encounters JavaScript errors

The following table lists common sources of issues with the JavaScript:

Problem Diagnosis
Merchant ID is missing or invalid When implementing the badge code, the merchant ID (merchant_id) is required. You must set its value in the call to the render() function within the badge's JavaScript block. You can get the merchant ID from the Google Merchant Center.
DOCTYPE must be HTML 5 Be sure that all pages that use the snippet are using the HTML5 DOCTYPE:
<!DOCTYPE html>
position is invalid The value of the optional position parameter can be one of the following strings:
  • "BOTTOM_LEFT"
  • "BOTTOM_RIGHT"
  • "INLINE"
lang is invalid The value of the lang parameter in the language block must be one of the values listed above. It must be a string, surrounded with quotes. If you do not specify the language, then the language setting in the user's browser is used.
Your browser is unsupported Your browser must support HTML 5. Update your browser to the latest version.
Was this article helpful?
How can we improve it?