Notification

In this help center, you can find content for both Merchant Center Next and the classic Merchant Center experience. Look for the logo at the top of each article to make sure you're using the article for the Merchant Center version that applies to you. 

Integration guide

Optional: Integrate the badge code

A custom icon for Merchant Center Classic Article Header.

The Google Customer Reviews (GCR) badge code is the first of 2 code snippets that you implement for Google Customer Reviews integration. The badge is optional. If you are having issues integrating the badge code, try troubleshooting.

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 100 reviews in a particular country during the past year for your store rating to appear on your badge.

Don't 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: Don't 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 doesn't matter.

  2. Replace the variables 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. Optionally, specify the language that the badge uses by pasting the following code snippet into your web page. If you don’t specify a value for the lang parameter, the badge uses the user's browser setting to automatically choose the language.
    
    <!-- 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 doesn't matter.

    Set the value of the lang parameter by replacing LANGUAGE with one of the following supported codes from the Language Codes column:

Code

Language name

af

Afrikaans

ar

Arabic

cs

Czech

da

Danish

de

German

en

English

en-AU

English-Australia

en-GB

English (UK)

en-US

English (US)

es

Spanish

es-419

Spanish (Latin America)

fil

Filipino

fr

French

ga

Irish

id

Indonesian

it

Italian

ja

Japanese

ms

Malay

nl

Dutch

no

Norwegian

pl

Polish

pt-BR

Portuguese (Brazil)

pt-PT

Portuguese

ru

Russian

sv

Swedish

tr

Turkish

zh-CN

Chinese (Simplified)

zh-TW

Chinese (Traditional)

  1. Repeat steps 1 through 3 for all pages in your website on which you want the badge to appear.
  2. 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 doesn't appear on your page, or you get errors when loading the page, try troubleshooting.

Was this helpful?

How can we improve it?
Search
Clear search
Close search
Google apps
Main menu
11189088163958660338
true
Search Help Center
true
true
true
true
true
71525
false
false