The Google Customer Reviews (GCR) badge code is the first of the two 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:
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 shop rating to appear on your badge.
Don't obscure the badge with any other content on your pages.
Update the DOCTYPE
Make 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 standard mode.
Add the GCR badge
To show your customers that you use Google Customer Reviews, add the GCR badge to any page of the website on which you want it to appear.
If you want the badge to appear inline, use the method described in To add the GCR badge inline. Otherwise, use the following method to place the GCR badge in the bottom right-hand corner or bottom left-hand corner of the page.
To add the GCR badge to your site:
- 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>MERCHANT_ID
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": ,POSITION
// OPTIONAL
"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.
- Replace the variables with your site-specific, dynamic values. The following table describes the available settings:
| Variable | Required? | Description |
|---|---|---|
| MERCHANT_ID [MERCHANT_ID] | Required | Your Merchant Center ID. You can get this value from Google Merchant Center. |
| POSITION | Optional |
Renders the badge in one of the following locations:
The default position for the badge is 'BOTTOM_RIGHT'. |
- 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 |
|
ml |
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) |
- Repeat steps 1 to 3 for all pages in your website on which you want the badge to appear.
- To complete GCR integration, you must add the survey opt-in module to your order confirmation page. The survey opt-in module is required.
- 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>
- 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 [MERCHANT_ID] with your own Merchant Center ID.
- Specify the language that the badge uses as described here.
- 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-hand corner 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.