Embedding a Google review in Webflow can be a valuable addition to your website, as it allows visitors to see the positive feedback and reviews from your satisfied customers. In this tutorial, we will guide you through the process of embedding a Google review on your Webflow website.
Step 1: Find the Google Review Widget
Before we start embedding the review, we need to locate the Google Review Widget. Follow these steps:
- Go to the Google Developers website
- Navigate to the Maps Embed API page
- Create a new project or select an existing one
- Enable the Maps Embed API
- Select “APIs & Services” from the left sidebar menu
- Click on “Library”
- In the search bar, type “Maps Embed API”
- Select “Maps Embed API” from the results
- Click on “Enable”
- Navigate to the Google Maps website
- Search for your business
- Select your business listing
- Click on “Reviews”
- Find the review you want to embed
- Click on “Share”
- Select “Embed a map”
- Login to your Webflow account
- Select the page where you want to embed the review
- Add an Embed element
- Paste the HTML code snippet
- Adjust size and position (optional)
- Publish your changes
Open your web browser and navigate to the Google Developers website.
In the search bar at the top of the page, search for “Google Maps Embed API” and click on the first result that appears.
If you have an existing project, select it. Otherwise, click on “Create a new project” and follow the prompts to set up a new project.
Step 2: Generate Your Review Embed Code
Now that we have enabled the Maps Embed API, we can generate the embed code for your Google review. Follow these steps:
Open your web browser and go to the Google Maps website.
In the search bar at the top of the page, enter your business name and location to find your business on Google Maps.
Click on your business listing in the search results to open it.
In the left sidebar of your business listing, click on “Reviews” to view all the reviews for your business.
Scroll through the reviews and find the one you want to embed on your Webflow website.
Next to the review you want to embed, click on “Share” to open a popup with sharing options.
In the popup, select “Embed a map” from the sharing options. This will generate an HTML code snippet that you can use to embed the review on your Webflow website.
Step 3: Embedding Your Google Review in Webflow
Now that we have our HTML code snippet, we can proceed with embedding it in Webflow. Follow these steps:
Open your web browser and log in to your Webflow account.
In the Webflow Designer, select the page where you want to embed the Google review. You can choose an existing page or create a new one specifically for the review.
Drag and drop an Embed element onto your Webflow page where you want the review to appear. The Embed element is located in the “Components” panel on the left side of the Designer interface.
In the settings panel on the right side of the Designer interface, paste the HTML code snippet that you generated from Google Maps into the Embed settings. Make sure to paste it within any <script>
tags that may be present.
If needed, you can adjust the size and position of the embedded review by selecting and resizing/repositioning the Embed element in Webflow’s Designer interface.
Finally, click on “Publish” to make your changes live and embed your Google review on your Webflow website!
Conclusion
In this tutorial, we have learned how to embed a Google review in Webflow. By following these steps, you can showcase positive customer feedback directly on your website, enhancing credibility and trust. Remember to regularly update your embedded reviews as new feedback comes in!