BigQuery

How to integrate BigQuery with Webflow

BigQuery lets you warehouse form submissions for lead intelligence, track multi-touch attribution across marketing channels, and analyze CMS content performance with custom metrics. You can also sync customer data combined with behavioral metrics back to Webflow for personalization.

You can embed Looker Studio dashboards that visualize BigQuery data directly on Webflow pages using Custom Code Embed elements, connect through the BigQuery API and Webflow API with server-side middleware, or use platforms like Zapier or Hightouch for no-code workflows.

Embed Looker Studio dashboards

Looker Studio provides a way to visualize BigQuery data on Webflow sites without writing code. You build interactive dashboards in Looker Studio's drag-and-drop editor, then embed them as iframes on any Webflow page using the Custom Code Embed element.

This method works well for client reporting portals, public data dashboards, and internal analytics views. Your embedded dashboards maintain full interactivity so visitors can adjust date ranges, apply filters, and drill into metrics without leaving your site.

Connect BigQuery to Looker Studio through the BigQuery visualization guide, which walks through running queries and opening results directly in the visual editor. Build your charts and tables using Looker Studio's interface, then generate embed code through the report sharing settings.

Implementation steps:

• Run your query in BigQuery Console and click Explore data > Open in Looker Studio
• Build visualizations using the drag-and-drop editor
• Click Share and set permissions to "Anyone with the link can view"
• Click Embed report to generate iframe code
• Add a Code Embed element to your Webflow page
• Paste the iframe markup and adjust dimensions
• Publish your site to render the embedded dashboard

The embed customization documentation explains parameters for controlling theme, hiding toolbars, and pre-applying filters.

Limitations: Code Embed elements have character limits that are sufficient for iframe codes. You can incorporate CMS Collection fields into custom code to display different dashboards for different collection items.

However, URL parameters in embedded Looker Studio reports don't provide Row-Level Security (RLS). Visitors can modify URL filters to view data outside their intended scope. Only use embedded reports with URL filtering for non-sensitive data, or implement proper RLS at the BigQuery dataset level before embedding reports.

Build with Webflow and BigQuery APIs

API integration requires server-side middleware architecture to handle data flow, transformation logic, and synchronization timing. You determine which Webflow data moves to BigQuery, how it's structured, and when updates occur.

This approach supports form submission warehousing, CMS content analytics, e-commerce transaction tracking, and bidirectional data sync through server-side middleware.

You can centralize customer data from multiple sources in BigQuery, then push data combined from multiple sources back to Webflow CMS using reverse ETL (extract, transform, load in reverse direction from warehouse to operational systems) tools or the Webflow CMS API.

Architecture requirement: Client-side integration doesn't work because you can't safely expose API tokens in browser JavaScript. While Webflow's API does return proper CORS headers, putting authentication credentials in client-side code exposes them to anyone viewing your page source. You must build server-side middleware using Cloud Functions, Cloud Run, or another backend service to keep credentials secure.

However, you must manage dual authentication systems (Webflow OAuth 2.0 and BigQuery service accounts or OAuth 2.0), and handle Webflow webhook delivery constraints (up to 3 delivery attempts with no ordering guarantees).

Authenticate with both platforms

Both platforms require OAuth 2.0 or service account authentication. BigQuery does not support API keys.

For BigQuery, create a service account following the authentication guide. Your code should import the BigQuery client library, load credentials from your service account JSON file, and initialize the client with your project ID. The specific implementation depends on your chosen programming language.

Your service account needs specific IAM roles:

• roles/bigquery.jobUser to execute queries
• roles/bigquery.dataEditor to modify tables
• roles/bigquery.dataViewer for read-only access to datasets and tables

Grant minimum necessary permissions scoped to specific datasets. Best practice is to grant jobUser at the project level while scoping dataEditor and dataViewer to specific datasets.

For Webflow, generate API tokens through your workspace settings. Site tokens work for single-site applications; OAuth 2.0 tokens work for multi-site access. Include the token in the Authorization header of request headers:

Authorization: Bearer YOUR_ACCESS_TOKEN

Store credentials in environment variables or secret management services, never in client-side code. Set GOOGLE_APPLICATION_CREDENTIALS environment variable to your service account key path.

Stream form submissions to BigQuery

Webflow webhooks send POST requests when forms are submitted. Use the Webhooks API to create a webhook. Send a POST request to the webhooks endpoint with your site ID, specify "form_submission" as the trigger type, and provide your middleware URL. See the Webhooks API documentation for the exact request format.

Your middleware receives form data, transforms it to match your BigQuery schema, and inserts rows using the streaming API. Streaming provides near real-time availability with data appearing within minutes. According to BigQuery's streaming API documentation, streaming limits are 1 GB/sec in US and EU multi-regions, and 300 MB/sec in other regions.

Handle webhook delivery with proper verification. Webflow includes signature headers for authentication. Implement idempotency checks since webhooks may deliver duplicates. Webhooks provide up to 3 delivery attempts on failure, but there are no delivery or ordering guarantees, making duplicate handling essential for reliable integrations.

Sync CMS collections to BigQuery

Fetch collection items using the Collections API and Items API. Transform the response data to match your BigQuery schema, then use the streaming insert API or batch loading depending on data volume. The specific code structure depends on your middleware technology stack.

Design your BigQuery schema before loading data. According to the schema management documentation, you can only add NULLABLE or REPEATED columns after table creation. REQUIRED columns must be defined upfront.

Map Webflow's nested objects to BigQuery STRUCT (structured record) types and arrays to REPEATED fields, as explained in the data types reference. This preserves structure without flattening.

BigQuery quotas: BigQuery limits table modifications to 1,500 operations per table per day. This affects how frequently you can sync data. Streaming throughput is limited to 1 GB/sec in US and EU multi-regions, and 300 MB/sec in other regions. Consult the BigQuery quotas documentation for current limits applicable to your project's pricing model and configuration.

Push data back to Webflow

Query BigQuery to identify your target segment or records. For each result, use the Items API PATCH endpoint to update the corresponding CMS item fields. Batch your updates before publishing.

This reverse ETL pattern supports personalization based on behavioral data, automated content updates based on warehouse insights, and dynamic segment targeting.

Publishing requirement: CMS changes require publishing to go live. The Sites API has publishing constraints. Batch CMS updates before publishing to work within these constraints.

Use integration platforms for no-code setup

Platforms like Zapier, Hightouch, and Portable provide pre-built connectors that handle authentication, data synchronization, error handling, and schema mapping.

These platforms work well when you need standard ETL without complex transformation logic. You configure connections through visual interfaces, select which data to sync, and set schedules. They reduce maintenance burden and provide monitoring dashboards.

Consider custom development when you have complex transformation requirements, need real-time streaming beyond platform capabilities, specific security requirements that platforms can't meet, or when your integration processes payment data requiring PCI compliance management.

What you can build

Integrating BigQuery with Webflow lets you warehouse form data, analyze e-commerce transactions, track marketing attribution, and build customer data platforms.

• Form submission warehousing: Stream form submissions to BigQuery tables using webhooks, join with CRM data using SQL queries, and calculate lead scores based on submission patterns. Note that Webflow form submissions are limited to CSV export on free and starter plans, and require server-side middleware architecture to integrate with BigQuery due to authentication complexity
• Multi-touch attribution analysis: Track user journeys across Webflow pages, email campaigns, and paid ads by centralizing GA4 events, form submissions, and CRM data in BigQuery. Build custom attribution models that reveal true channel value beyond last-click attribution. Run SQL queries that calculate weighted credit across touchpoints and feed results back to ad platforms
• Content performance analytics: Export Webflow CMS collections to BigQuery alongside GA4 data to analyze which content types drive conversions, which authors produce highest-engagement articles, and how content freshness impacts traffic. Build automated content audit workflows that flag underperforming pages and recommend improvement priorities
• Customer data warehousing: Query BigQuery for account health scores, usage patterns, and support ticket history, then display dashboards on Webflow CMS pages using Looker Studio embeds.