How to Add Google Reviews to Webflow for Free

Adding Google Reviews to your Webflow website is a great way to build trust with your audience, improve local SEO, and showcase social proof for your business. However, most solutions out there require expensive widgets or subscription-based platforms, making this seemingly simple task costly.

That’s why we’ve created a free guide that will help you embed Google Reviews on your Webflow website without spending a dime. This tutorial includes free code you can access by filling out a form on our page and walks you through each step of the process. Before we dive in, it’s important to note that the current method exposes your unique Google API key. We’ll explain the implications of this and why you should be cautious.

Let’s get started!

‍

Why Display Google Reviews on Your Webflow Site?

Google Reviews are a vital part of your online reputation. By embedding reviews on your website, you can:

Build Credibility: Reviews act as social proof, showing potential customers why your business is trustworthy.
Improve SEO: User-generated content, such as reviews, can improve your website’s local SEO ranking.
Boost Conversion Rates: Visitors are more likely to engage with a business that displays authentic customer feedback.
Streamline the User Experience: Keeping users on your website instead of redirecting them to Google increases session duration and engagement.

‍

Step 1: Get Your Google API Key and Place ID

To connect your Webflow website to Google Reviews, you’ll need two things:

Google API Key: This allows your website to interact with Google’s services.
Place ID: A unique identifier for your business on Google Maps.

‍

How to Generate a Google API Key:

Go to the Google Cloud Console.
Create a new project or select an existing one.
Navigate to APIs & Services > Credentials and click “Create Credentials.”
Select “API Key” and copy the generated key.
Restrict the key by domain to prevent unauthorized use.

‍

How to Find Your Place ID:

Open the Google Place ID Finder.
Search for your business name.
Copy the Place ID from the results.

‍

Step 2: Fill Out the Form to Get the Free Code

To make it easy for you, we’ve prepared the code you need to embed Google Reviews on your Webflow site. Simply fill out the form on the right to access the code instantly. Once you’ve received the code, you’ll be ready to proceed with the next steps.

‍

Step 3: Embed the Code in Your Webflow Project

Once you have the API key, Place ID, and code ready, follow these steps to embed the reviews:

Paste the Code:
Paste the copied JavaScript code into the page settings inside <head> tag or if you're going to have this code on multiple pages just simple page the code on the site settings>custom code and into the <head> tag. Replace YOUR_API_KEY and YOUR_PLACE_ID with your actual values.
‍
Add a Div for the Reviews:
Inside Webflow, create a div block with the ID google-reviews. This is where the reviews will be displayed.
‍
Publish Your Website:
Save your changes and publish your Webflow site. Once live, the reviews should appear dynamically.

‍

Please note that if you want your review to be shown, just delete this piece of code style="display:none; from the code block you'll get. Right now it's hidden automatically. Code is working, just make sure to replace API and ID everywhere in the code.

‍

Important Notes About API Key Exposure

Currently, this method exposes your Google API key in the front-end code. This means anyone who inspects your site’s code can see and potentially misuse the key. To mitigate this risk:

Restrict API Key Usage: Ensure your API key is restricted by domain to prevent unauthorized access.
Monitor API Usage: Regularly check your Google Cloud Console for unusual activity.
Stay Updated: We are working on a solution to hide the API key and will update the code when available. Keep an eye on our resources page for updates.

‍

Conclusion

By following this guide, you’ve successfully added Google Reviews to your Webflow website for free. This solution avoids the need for expensive widgets or platforms and gives you complete control over how the reviews are displayed.

Remember to stay cautious about API key exposure and restrict its usage. For updates on a more secure version of this code, bookmark our resources page.

If you found this tutorial helpful, share it with your network or leave us feedback. Happy coding!