How to Easily Add a Google Reviews Widget in WordPress
Putting up reviews on your site is always a good move for your brand engagement. Not only can reviews help establish customer trust, but they can also help you maintain some much-needed credibility in your line of work. Moreover, when potential customers run into a positive review on your site, they’ll be much more inclined to go ahead and buy that product or service you’re offering.
Now, no matter if you plan to use a service like Yelp, or opt for a good old Google review, there are many different tools you can use to add a business review to your WordPress site. Still, if you do decide to use Google reviews for this task, one of the most effective ways to do this is to use the help of a dedicated Google reviews widget. So, this time around, we will show you how to easily insert and customize Google reviews in WordPress using the Qi Addons for Elementor plugin and its practical Business Reviews Google widget. Stay tuned as we cover:
Coming with over a hundred free and premium addons, Qi Addons for Elementor is one of the best widget-based plugins you can use to build virtually any type of element on your site. This includes anything from creative and business addons all the way to infographic addons and even WooCommerce elements.
In this list of widgets, you will also be able to find a premium widget called Business Reviews Google widget. As its name indicates, this widget serves to display Google reviews on your site in many different stylish ways. There is a myriad of ways in which you can customize the appearance of your review list – set the layout and number of columns, style the colors and typography, adjust the paddings, and more. Plus, integrating Google reviews is as easy as it can get – you just have to input your Google API key and you’ll be all set. So, without further ado, let’s see how you can do all this.
After installing the Qi Addons for Elementor plugin on your website, you can proceed to add the Business Reviews Google widget by searching for it in your Elementor sidebar. Then, drag the widget to the right side of the screen.
Now, once you insert the Google reviews widget into your page, you will see that it is initially empty. You will also see a notice about having to insert Google Places API in the Qi Addons for Elementor’s Integration page.
We’ve already inserted our Google Places API key here:
To activate this key in your widget, you need to insert the Place ID, which can be found using the Google Developers place ID page.
Once there, you should enter your business location in the map search bar and then copy the place ID that shows up on the screen.
Then, paste the key you copied into the Place ID field.
Here’s what our widget looks like when we insert our Place ID:
From here on, you can also choose whether you want your list appearance to be Gallery or Masonry (we will be using Gallery for our example). We’ve also set the Number of columns to one.
There is also the Columns Responsive option that allows you to set a separate number of columns for different screens, and a Space Between Items option, the name of which is pretty self-explanatory. We set this option to 75px to create some additional space between our reviews.
Also, you can choose whether you wish to have borders between your items and adjust the number of reviews displayed on your page (we chose 2).
Next, the Layout section allows you to choose the look of the icons that represent a rating – this includes Marked and Unmarked icons.
We chose the same SVG icon for both Marked and Unmarked icons. Make sure to hit the Insert Media button once you’re done with choosing your own.
Next, you’ve got the options to enable the drop shadow between the items (it’s set to Yes by default) and choose the Item Layout. There’s the ability for different options to appear on the screen depending on the layout you choose for your review items.
For example, if you choose Boxed Centered or Boxed layouts, you will also get the options to set the padding, border radius, and background color of your items.
That being said, we’ve decided to go with the Item layout called Side With Image for our example.
Moving on to the Style tab – there’s the Icon Style section where you can set the size of your marked and unmarked icons, as well as change the marked and unmarked colors. Feel free to change this section to fit your own preferences.
Next is the Title Style section that allows you to completely customize the look of your title – this would be the names of the reviewers in our example.
Here you can change the Title Tag, Title Color, and Title Typography. For our example, we’ve set the title tag to be H4 and changed the font to Playfair Display.
We’ve also set the font size to be 30px. You can see how these changed the look of our title quite a bit.
The Spacing Style section will allow you to go quite in-depth when it comes to adjusting the spacing of your items. These include the top and bottom spacing for your title margin, text margin, and rating margin, among other things.
For our example, we’ve set the Title Margin Bottom at 2px, chose -11px for the Title Margin Top, and -9px for the Rating Margin Top.
The Text Style section contains the Text Length option, allowing you to enter the number of characters for your text and have the same length for each item.
There are also the options to set the Text Color and Text Typography. We’ve chosen the Text Length of 160 characters for our widget.
Last but not least, the Time Style section lets you adjust the look of the text that indicates how long ago the review has been posted. Here, you will also get to change the Time Color and Time Typography.
For our example, we’ve added the hex code #c4c4c4 for our Time Color and decided not to change anything else.
Finally, make sure to hit the Publish/Update button once you’re done with adjusting the look of your widget for the changes to take effect.
And here’s the final look of our Business Reviews Google widget:
Wrapping Things Up
That completes our guide on how to easily add, customize, and style Google reviews on your WordPress site using the Qi Addons for Elementor plugin and its neat Business Reviews Google widget. As you could see from the options we’ve shown above, there are quite a few things you can do when it comes to adjusting the look of your widget. You will be able to change your marked and unmarked icons, pick from different available item layouts, style your icons and titles, set the spacing of individual elements, and the list goes on. Feel free to play around with the widget’s options until you find the design that works the best for you.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
