Google Business Profile

How to integrate Google Business Profile with Webflow

Displaying Google Business Profile data on Webflow sites presents a technical challenge: Google and Webflow don't provide a native integration between their platforms. You'll need to choose between three approaches based on your technical requirements and development resources: Google Maps embeds for basic location display with reviews accessible via map interaction, third-party widget solutions like Elfsight and SociableKIT for automated review syncing and real-time data synchronization, or custom API builds using a backend server or serverless functions for full control over data synchronization.

Third-party widget providers handle the technical complexity server-side — OAuth authentication is managed through their secure infrastructure, API calls are automated, and data synchronization happens without Webflow involvement. You paste embed code into Webflow's custom code element and configure display options through visual interfaces. This approach works for pre-built widgets like Elfsight or SociableKIT; custom API integrations still require backend infrastructure since Google's API does not support browser-based requests due to CORS restrictions.

### Technical constraint: CORS and backend requirements

Browser CORS restrictions prevent direct API calls from Webflow's frontend to Google's endpoints. According to Webflow's community forum, attempts to call external APIs from custom code sections fail with ""No 'Access-Control-Allow-Origin' header"" errors. This is a fundamental browser security model enforced by Google's API response headers, not a Webflow limitation. Google Business Profile API does not include CORS headers that permit browser-based requests from arbitrary domains.

Since Webflow's custom code executes in browser context, all production implementations require backend infrastructure: serverless functions (AWS Lambda, Cloudflare Workers, Netlify Functions), custom backend servers, or third-party integration platforms that proxy API calls server-side. The Google Business Profile OAuth Implementation guide describes OAuth implementation that requires secure server-side token storage. This backend requirement is non-negotiable for any custom API integration.

### Embed Google Business Profile content using native methods

Google provides two official embedding methods that work without third-party tools: Google Maps iframe embeds for displaying your business location with accessible reviews, and individual review embeds for featuring specific customer feedback.

Use when:

• You need basic location display without automated review syncing

• Budget constraints prevent third-party widget subscriptions

• You want to feature specific reviews manually selected for quality

  Embed Google Maps with reviews

  Google provides an official method to embed Google Maps via iframe that displays your business location on an interactive map. When visitors click your location pin, they see the map pin with business information. Customer reviews and ratings only appear when users interact with the map itself, not directly on your page.

  Search for your business on Google Maps, click ""Share or embed map,"" then select the ""Embed a map"" tab. Copy the provided iframe code and paste it into Webflow's Custom Code Embed element. The embed element accepts up to 50,000 characters and shows a preview in the Designer. Drag the Embed element from Webflow's Add Panel to your page, paste the Google Maps iframe code into the settings panel, and adjust width and height using Webflow's sizing controls. Reviews will only appear when users click the location pin on the map. Publish your site to make the map visible.

  Visitors must interact with the map pin to view reviews. This method works for basic location display but doesn't show reviews prominently on your page.

  Embed individual reviews

  Google provides an official way to embed individual reviews directly from your Google Business Profile onto your Webflow website, as documented in the Google Business Profile Help community.

  Open your business profile on Google Maps and click the ""Reviews"" tab. Select the three dots next to a specific review. Choose ""Share review"" then ""Embed."" Copy the provided HTML code. Paste into Webflow's Embed element. This method leverages Webflow's native Custom Code Embed element, which supports embedding third-party HTML with a 50,000 character limit and preview capability in Designer.

  This method embeds only one review at a time—each review requires separate embedding. If you want to display multiple reviews, you'll need to repeat this process for each individual review or consider alternative methods like third-party review widgets that can display multiple reviews simultaneously. This approach gives you control over which reviews visitors see. You manually select each review to feature.

  Use third-party review widgets

  Third-party providers generate embed code (HTML/JavaScript or iframes) that syncs Google Business Profile data server-side, handling OAuth and API calls without Webflow backend configuration. These solutions work by generating code that you paste into Webflow's native Embed element—no backend configuration required.

  Widget providers:

• Elfsight: Grid, list, slider, badge layouts. Free plan with branding, paid from $5/month.

• SociableKIT: Pre-built templates, Place ID finder tool. Free plan unlimited with branding, paid $9-19/month.

• Shapo.io: Single-line embed, carousel/grid/masonry layouts, 15 color presets. 7-day trial, then $19/month.

• EmbedSocial: Setup wizard, moderation dashboard for review approval. Free plan with branding, paid $29-79/month.

• OpenWidget: Free plan (100 widget loads/day), $9/month for 1,000 loads/day.

  Most sync reviews every 24 hours and provide responsive design through visual interfaces. Webflow features these widgets in their Google Reviews integration page and Made in Webflow showcase. You create an account with a widget provider, connect your Google Business Profile through click-through OAuth, customize the appearance using visual controls, then paste the generated code into Webflow's Embed element.

  Build custom integration with APIs

  Custom API integration provides full control over data synchronization between Google Business Profile and Webflow CMS, but requires backend infrastructure due to browser CORS restrictions explained in the Technical Constraint section above. This approach suits development teams building automated synchronization workflows with specific data transformation requirements.

  For users seeking pre-built automation workflows, Zapier provides documented Webflow + Google Business Profile integration that handles server-side API calls without custom backend development.

  Sync location data to Webflow CMS

  Fetch business location details from the locations.get endpoint and map fields to Webflow CMS collections using the v2 CMS API endpoints. This approach automatically synchronizes business name, address, phone, hours, and categories, though it requires a backend intermediary or serverless function to handle OAuth 2.0 authentication and overcome CORS restrictions.

  Your backend authenticates with Google's OAuth 2.0 using the https://www.googleapis.com/auth/business.manage scope, as documented in Google's OAuth implementation guide. Access tokens expire after approximately one hour. This requires refresh token storage and automatic renewal logic.

  List your business locations with accounts.locations.list. Retrieve detailed information per location, then create or update Webflow CMS items using the Create Items endpoint. Items start in draft state and require the Publish Items endpoint to become visible on the live site. Implement appropriate delays between API operations to respect platform quotas.

  Display reviews in CMS collections

  The reviews.list endpoint (GET https://mybusiness.googleapis.com/v4/{parent=accounts/*/locations/*}/reviews) returns customer reviews with star ratings, comment text, reviewer information, and timestamps. To display these reviews on your Webflow site, create a Webflow CMS collection for reviews, then use the Create Items endpoint to sync up to 100 reviews per request into your collection.

  Fetch reviews with pagination parameters, map each review to your CMS field schema, batch create items, then publish to make them visible. Review updates require polling since Google Business Profile API does not provide webhooks for review changes. While Google Business Communications does offer webhooks, they are specifically for RCS Business Messaging events, not profile changes or reviews, as noted in the Google Business Communications webhooks documentation. Instead, Google Business Profile uses Google Cloud Pub/Sub for real-time notifications through the Manage real-time notifications guide.

  Publish posts bidirectionally

  Create Google Business Profile posts from Webflow blog entries using the Create Post endpoint at POST https://mybusiness.googleapis.com/v4/{parent=accounts/*/locations/*}/localPosts. Set up Webflow webhooks configured for collection_item_published events. Your implementation requires a backend server or serverless functions (AWS Lambda, Cloudflare Workers, Netlify Functions) that receives the webhook, handles OAuth 2.0 authentication with Google, formats the blog content for Google's API, and creates the corresponding post on your Google Business Profile. The backend must manage access token refresh cycles.

  This workflow keeps your Google Business Profile updated when you publish content through Webflow's CMS.

  Set up event notifications with Pub/Sub

  Google Business Profile uses Google Cloud Pub/Sub for event notifications. To receive real-time notifications for events like new reviews, updated reviews, customer media uploads, and Google-initiated profile changes, you must set up a Pub/Sub topic and subscription rather than configuring traditional webhooks. Follow the notification setup guide for detailed configuration instructions.

  Create a Pub/Sub topic in your Google Cloud project. Grant publishing permissions to mybusiness-api-pubsub@system.gserviceaccount.com. Use the updateNotificationSetting API endpoint to configure your Pub/Sub topic and select which notification events to receive (NEWREVIEW, UPDATEDREVIEW, NEWCUSTOMERMEDIA, GOOGLEUPDATE, DUPLICATELOCATION, or VOICEOFMERCHANT_UPDATED). This real-time notification infrastructure requires OAuth 2.0 authentication with the https://www.googleapis.com/auth/business.manage scope and a backend system to subscribe to Pub/Sub messages.

  Available notification types:

• NEW_REVIEW triggers when customers submit reviews

• UPDATED_REVIEW fires when existing reviews change

• NEWCUSTOMERMEDIA alerts when users upload photos or videos

• GOOGLE_UPDATE notifies about Google-initiated profile changes

• DUPLICATE_LOCATION notifies about changes in duplicate location metadata

• VOICEOFMERCHANT_UPDATED alerts when Voice of Merchant status changes for a location

  Set up real-time notifications for Google Business Profile changes through Google Cloud Pub/Sub. According to Google Business Profile documentation, notifications are delivered through Pub/Sub topics rather than direct webhooks. Create a push subscription to send messages to your HTTPS endpoint, or use a pull subscription to have your application poll for messages. Configure notification types (NEWREVIEW, UPDATEDREVIEW, NEWCUSTOMERMEDIA, GOOGLEUPDATE, DUPLICATELOCATION, VOICEOFMERCHANT_UPDATED) for the events you want to track. Handle duplicate notifications since Pub/Sub provides at-least-once delivery—your synchronization logic must implement idempotency to prevent duplicate data sync to your Webflow CMS when the same event is delivered multiple times. Event payloads include resource names but may require follow-up API calls to retrieve complete data for Webflow sync operations.

What you can build

Integrating Google Business Profile with Webflow lets you display real-time business information, customer reviews, and location data on your website through automated synchronization. While no official native integration exists, third-party widgets and custom API implementations enable several practical applications:

Multi-location business directories: Sync location data from Google Business Profile to Webflow CMS collections using third-party widgets or custom API integration. Service businesses with multiple offices maintain accurate hours, addresses, and contact information across all location pages without manual updates. Examples include dental practice networks, HVAC service areas, and retail chain store locators. The final product displays an interactive map with business cards for each location showing live hours, phone numbers, and customer ratings pulled from Google Business Profile.

Review showcase pages: Build dedicated review pages that aggregate customer feedback from Google using third-party widget solutions or custom API endpoints. Filter by star rating, sort by date, or feature specific reviews to display social proof that updates automatically when new reviews appear. Build a dedicated /reviews page displaying a filterable grid of customer testimonials with star ratings, reviewer names, dates, and response text—automatically updated when customers post new Google reviews.

Dynamic business hours displays: Display business hours from your Google Business Profile using third-party widget solutions or custom API integrations. Third-party providers like SociableKIT and Elfsight handle server-side synchronization, while custom implementations use the Google Business Profile API with backend infrastructure. Customers see accurate information about holidays, special events, or temporary closures without manual Webflow site updates. Create a persistent sidebar widget or header banner showing today's hours with special messaging for holidays or temporary closures, synced from your Google Business Profile.

Automated booking integrations: Combine Google Business Profile hours with Webflow forms to create appointment systems that reflect actual availability. This integration requires backend infrastructure (custom server, serverless functions, or third-party automation platforms) to handle OAuth authentication and API calls. Healthcare providers, consultants, and professional services can verify booking requests align with current business hours through platforms like Zapier or custom server-side logic. Build a booking form that dynamically enables/disables time slots based on Google Business Profile hours, preventing appointment requests during closed periods.