Google reviews
Your Google reviews, on your own site
People trust reviews they can see. This widget puts the ones already on your Google listing straight onto your page, with your star rating and your real review count, and a button that takes a visitor to Google to leave one of their own. You find your business once and the widget looks after the rest.
Set it up
- Make a Google reviews widget. Sign in at dreamwidget.com/dashboard, press Google reviews and give it a name. The name is only for your own list; nobody else sees it.
- Find your business. The editor opens on the Content tab. In Find your business on Google, type your business name and its city, then press Find. Pick yours from the list that appears. The Google place id box fills in by itself, and your reviews appear in the preview straight away.
- Choose how it looks. Move to the Design tab. The first section is Layout, and every section after it follows the widget from top to bottom, so you can work your way down the list in the order a visitor reads the widget.
- Press Save and Publish. The button is at the top right and is labeled Save & Publish. Nothing reaches your website until you press it.
- Paste the embed code on your page. On the Settings tab, press Copy embed code and paste it into your website where the reviews should appear. Our embedding guide has the exact place to paste for WordPress, Wix, Squarespace, Shopify and the rest.
What Google allows, and what it does not
Google gives any website at most five reviews for a business, whatever the real total, and there is no second page. That is Google's rule and it applies to every widget from every company, ours included. Anyone promising you all two hundred of your reviews is either showing reviews they collected themselves or is about to disappoint you.
What you do get is the genuine article: real reviews, with the reviewer's name and photo, the date, your owner reply if you left one, and the real total. Your rating line shows your true average and your true count, so a visitor reads "4.8 out of 5, 193 reviews" even though five of them are on display.
Three controls shape those five. Show at most, reviews shows fewer than five if you prefer a tidier row. Show reviews of at least, stars hides the weaker ones, and it filters only the five Google sent, so asking for five stars only can leave you with two reviews, or none. Order the five Google sends puts the newest or the highest first.
The four arrangements
Arrangement, at the top of the Design tab, picks one of four.
- Grid. Even cells, as many across as Columns in the grid says.
- One row that scrolls. A single line of cards a visitor swipes or drags through, with marks underneath that show where they are. Card width in the row sets how wide each one is.
- A list. One review under another, full width.
- Just the button, no reviews shown. No cards at all, only the button that sends visitors to your Google listing. Useful in a footer, or beside a checkout, where a wall of reviews would be too much.
Choosing the button on its own hides every control that styles a card, because there is no card left for them to act on. Choose one of the other three and they all come back.
The cards
Everything about the box a review sits in is in The cards: background, border color, border thickness, corner radius, the padding inside it, and the space between the parts of a card. The parts themselves each have a section of their own, in the order they are drawn: Reviewer photo, Reviewer name, Review date, Review text.
Lines of text before "Read more" decides how much of a long review shows before it is cut short. Set it to 0 and every review shows in full. Set it to three and a Read more line appears under any review that was trimmed, with its own font, size, color and hover color under Read more link. The words themselves are on the Content tab, so you can write "See the rest" instead.
Clicking a card selects it makes a card respond when a visitor clicks it. On the row that scrolls this is what moves the marks underneath, so a count like "3 of 12" follows the card the visitor picked. It is on by default there and off on a grid or a list, where there are no marks for it to move. With it on you can also set Card border color under the pointer and Card border color when selected, so a visitor can see which one they are on.
The opened review
A card is small and some reviews are long. Clicking a card opens that review on its own, in The opened review, gives you a second way to read one: the whole review, never cut short, with your reply, over the top of everything else. On a visitor's screen it covers the page. In this editor's preview it covers the widget, so you can still see your tools.
You can set its width, its background, border, corner radius and padding, a shadow behind it, a color over the rest of the page and how much to blur what is behind. Text size in the opened review is a percentage of the size on the card, so the opened one can be easier to read without touching the cards.
Show previous and next adds a way to walk through the other reviews without closing and opening again. Arrow keys do the same thing. The wording of those two links, and the word between the two numbers in "3 of 12", are on the Content tab, so a French site can say "sur" instead of "of".
The Close button section styles the cross in the corner. Hide the close button takes it away if it spoils the look, and the review still closes on Escape, on a click outside it, and on a click on the dimmed page behind.
The button
Show the button to leave a review puts a button in the header that opens your Google listing with the review box ready. Button text is on the Content tab and is blank for "Review us on Google".
The Button section has the fill, the text color, the stroke, the corner radius, the padding, and what happens under the pointer. There is also a library of ready made button styles to pick from, so you do not have to build one out of colors if you would rather not.
Hide the header takes away your business name and the rating line. The button has its own switch and stays either way, so you can show a button with no header above it.
Desktop and Mobile
The editor has two screens, Desktop and Mobile. Every setting on the Design tab is kept once for each, and the buttons above the preview choose which one you are editing, and the preview changes to that size as you switch. A change lands on the screen you are looking at and nowhere else, unless you tick Edit all screens above the preview, which sets both at once. A tablet is drawn from Desktop.
Your reviews, your business and all the wording are shared by every screen. Only the look is kept per screen.
Two buttons above the preview help before you publish. See both puts the Desktop and Mobile versions beside each other at life size, so you can see what a phone will get. Replay draws the widget again from the start, which brings back an opened review you closed while looking around.
If something goes wrong
Nothing found when you search for your business. Add the city, and use the name exactly as it reads on your Google listing. A business with no Google Business Profile has nothing for us to read; creating one is free at business.google.com and takes a few days to verify.
Fewer reviews than you expected. Google sends five at most. If you see fewer than five, check Show at most, reviews and Show reviews of at least, stars on the Content tab, since either can cut the list further.
A new review has not appeared. Google decides which five it sends and refreshes them on its own schedule, which can take a day or two. Nothing on your side is broken and there is no button that makes Google hurry.
The widget shows on your page but looks wrong on a phone. The mobile screen has settings of its own. Switch to Mobile above the preview and set it there, or tick Edit all screens before you change something you want everywhere.
Anything else: hello@dreamwidget.com, and tell us the widget's name.