The Google Customer Reviews badge has been upgraded to the new store widget. This updated version features a new design and more prominent display options to better highlight your store's rating, total number of reviews, and quality information on your website.
The store widget code is the first of the 2 code snippets that you implement for store widget code integration. The widget is optional.
On this page
Integration instructions
To integrate the store widget on a page, you must:
These tasks are described in the sections that follow.
When you implement the widget code on your pages, one of the following widgets will be displayed:
| Top quality store widget | Store rating widget | Store quality widget |
| When: | When: | When: |
If you're currently using the old badge, it will display one of the three widget versions based on your store's quality rating.
Don't obscure the widget with any other content on your pages.
Update the DOCTYPE
Be sure that web pages on which you implement the widget 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 store widget
To show your customers that you use Google Customer Reviews, add the store widget to any pages of the website on which you want it to appear.
To add the store widget to your site:
- Go to the interface where you can edit the HTML of your website. To do this, choose the step that best applies to you:
- Find the source HTML that applies to all pages on your site.
- Go to the particular page where you would like to display the widget.
- Copy and paste the code below inside the
<head>section of the HTML code.-
Optional: By default, the widget will be fixed at the bottom right of your page. If you want to put the widget at the bottom left of your page, replace the yellow section of the code below with '
LEFT_BOTTOM'.
-
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
position: 'RIGHT_BOTTOM'
});
});
</script>
<!-- END MerchantWidget Code →
- Merchants also have the ability to customize the positioning of the widget. While customizing the positioning, 4 parameters are introduced:
- sideMargin: number of pixels of the widget to the side edge. When the position is set to LEFT_BOTTOM, it's the margin to the left edge, when it is RIGHT_BOTTOM, it's the margin to the right edge. Default to 36.
- bottomMargin: number of pixels of the widget to the side edge. Default to 36.
- mobileSideMargin: sideMargin when on mobile screen. Default to 16.
- mobileBottomMargin: bottomMargin when on mobile screen. Default to 46.
Here’s an example of how to customize positioning:
<script id='merchantWidgetScript' src="https://gstatic.com/shopping/merchant/merchantwidget.js" defer></script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
position: 'LEFT_BOTTOM',
sideMargin: 21,
bottomMargin: 33,
mobileSideMargin: 11,
mobileBottomMargin: 19
});
});
</script>
After the setup, your HTML should look like the code below. Make sure that your HTML file has <!DOCTYPE html> as its first line:
<!DOCTYPE html>
<html>
<head>
<title>Google Example</title>
<meta charset="UTF-8">
<meta name="description" content="An example HTML page with a head section">
<meta name="keywords" content="HTML, sample, head section">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js" defer></script>
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({});
});
</script>
<!-- END MerchantWidget Code --> // <- put this code in head section
</head>
<body>
<h1>Welcome to Google </h1>
<p>This is a basic HTML document</p>
<p>Visit the <a href="https://google.com">Google homepage</a>.</p>
<script>
function greetGoogle() {
alert('Hello, Google! Have a great day!');
}
greetGoogle();
</script>
</body>
</html>
- You also have the ability to customize regions (optional). If it is not set, the widget falls back to using globalization logic to determine region.
How to remove old store widget code snippet
Instructions:
- Go to your website's HTML code and find store widget code.
- Delete the following HTML to remove the widget.
Or
Commenting out the following code will also remove it from your website.
<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": 0});
});
}
</script>
Frequently asked questions
How will the widget and panel render on mobile view as compared to desktop view?
My website is managed using Shopify. Am I still able to implement this feature?
- Note: There’s feedback from Shopify merchants that Shopify will automatically truncate all the spaces in the script. The spaces in the script are intended, so make sure that they’re not truncated.
Where does the data that’s shown in the panel come from? How can I view my program performance?
Can customers completely close the widget?
The widget will always be visible. The customer can click on the widget to maximize the panel and when the panel is open, they can click on the close icon to minimize the panel, while the widget remains displayed.