# Google Data Studio
- Tool: Bubble
- Difficulty: Beginner
- Time required: 30–60 minutes
- Last updated: July 2026
## TL;DR
Google Data Studio (now Looker Studio) has no public REST API — the integration with Bubble is embed-only. Share a Looker Studio report publicly, copy the iframe embed URL, and paste it into a Bubble HTML element. For richer two-way patterns, connect both Bubble and Looker Studio to a shared Google Sheets data source so operational edits in Bubble automatically update the report.
## The honest truth: Looker Studio has no API — and why the Bubble integration is still valuable
Most integration guides for Google Data Studio / Looker Studio imply a rich two-way connection with authentication and live data exchange. The reality is simpler: Looker Studio provides no public REST API. You cannot authenticate against it, query its reports programmatically, trigger refreshes, or export data through an API endpoint. What Looker Studio does offer is a publicly shareable iframe embed URL — and that is enough to create genuinely useful Bubble applications.
The real power comes from the shared data source pattern. If Bubble writes operational data to a Google Sheet, and that Google Sheet is a Looker Studio data source, the dashboard stays current automatically as Bubble users make changes. Non-technical executives see a beautiful Looker Studio visualization inside Bubble; operational staff see an editable Repeating Group of the same data — all on one screen. No API calls to Looker Studio required. Being upfront about the no-API constraint saves Bubble builders hours of searching for an authentication flow that does not exist.
## Before you start
- A Google account with Looker Studio access (free — go to lookerstudio.google.com)
- An existing Looker Studio report connected to a data source you control
- Permission to change the report's sharing settings to 'Anyone with the link can view' (you must be the report owner or editor)
- A Bubble app with at least one page where you want the embedded report to appear
- The Google Sheets plugin installed in your Bubble app (free, by Bubble) if you plan to use the shared data source pattern
## Step-by-step guide
### 1. Build your Looker Studio report and configure sharing
Before embedding anything in Bubble, confirm your Looker Studio report is ready for sharing. Open Looker Studio at lookerstudio.google.com and open the report you want to embed. If the report uses a private data source (private BigQuery table, private Google Sheet, private Google Analytics property), users who view the embedded report without being authenticated with Google in the same browser session will see a Google sign-in prompt inside the iframe instead of the visualization. To avoid this, either make the underlying data source accessible to 'Anyone with the link' (appropriate for non-sensitive business data) or plan to only use Tableau Public — equivalent. For Looker Studio, the simplest path is using a Google Sheet with 'Anyone with the link can view' access as the data source. Once ready, click the Share button (top right of Looker Studio). Under 'Manage access', change the access level to 'Anyone with the link → Viewer'. Click Done. This is a required step — without public sharing, the iframe will show a sign-in wall in Bubble.
**Expected result:** Your Looker Studio report is set to 'Anyone with the link can view'. The Share menu shows 'Anyone with the link' in the access summary.
### 2. Copy the Looker Studio embed URL
In the same Share dialog, click the Embed Report tab (or go to File → Embed report in older Looker Studio versions). You will see an embed code section with an iframe snippet and a separate field showing just the embed URL. The embed URL follows this format: https://lookerstudio.google.com/embed/reporting/{REPORT_ID}/page/{PAGE_ID}. Copy this URL — you will use it in the Bubble HTML element's iframe src attribute. Do not use the regular Looker Studio report URL (lookerstudio.google.com/reporting/...) for embedding — it will not display correctly inside an iframe because Looker Studio's navigation header will appear. The embed URL specifically suppresses Looker Studio's navigation chrome. If you have a multi-page report and want to embed a specific page, the page ID in the URL determines which page appears. To embed a different page, change the PAGE_ID portion of the URL to the target page's ID, which you can find in the browser address bar when viewing that page in Looker Studio.
```
https://lookerstudio.google.com/embed/reporting/REPORT_ID_HERE/page/PAGE_ID_HERE
```
**Expected result:** You have the embed URL copied and confirmed to load the report in a browser tab without requiring login.
### 3. Add an HTML element in Bubble with the iframe
In your Bubble editor, open the page where you want the Looker Studio report to appear. From the Visual elements panel on the left, drag an HTML element onto the page canvas. Position and size the HTML element to fill the section where you want the report — Bubble's responsive layout controls determine the width. Set the element's height in Bubble's element properties (right panel) to a fixed pixel value that matches the height you want the iframe to occupy — 500 to 700 pixels is a good starting point for most reports. Bubble's responsive engine does not auto-size HTML element heights based on their content, so a fixed height prevents the iframe from collapsing to zero. In the HTML element's content field, paste the iframe code shown below. Replace the src value with your actual Looker Studio embed URL. Set the iframe width to 100% so it fills the Bubble HTML element's container width. Leave the frameborder as 0. The allowfullscreen attribute lets users expand the report to full screen from within the iframe.
```
```
**Expected result:** The Looker Studio report renders inside your Bubble page within the HTML element. Users can interact with the report (filter controls, tooltip hovers) without leaving Bubble.
### 4. Set up the shared Google Sheets data source for live updates
For the most powerful Bubble + Looker Studio pattern, both tools share the same Google Sheet as their data layer. Bubble writes operational data to the sheet; Looker Studio reads from the sheet to build visualizations. This section is optional but transforms the integration from a static embed into a live data pipeline. In Looker Studio, go to Resources → Manage added data sources → your data source → Edit. If your data source is not already a Google Sheet, add one: click Add data → Google Sheets → select the sheet that your Bubble app writes to. Save. In your Bubble app, install the Google Sheets plugin (Plugins → Add plugins → search 'Google Sheets'). Authenticate with your Google account. Configure the plugin to write to the same Google Sheet — set the spreadsheet ID and sheet name. Now, whenever a Bubble workflow writes a row to the sheet (for example, when a new order is placed), the Looker Studio report's data refreshes on its next scheduled sync (typically within a few hours, or manually via the Refresh icon in Looker Studio). For immediate reflection, use Google Sheets' 'Refresh data' option inside Looker Studio's data source settings to set a more frequent refresh schedule.
**Expected result:** Bubble operational data flows to Google Sheets, and the Looker Studio report connected to that sheet shows updated data on its next refresh cycle. Both the Bubble Repeating Group and the Looker Studio visualization show the same underlying data.
### 5. Build Bubble filter controls alongside the embedded report
Looker Studio's iframe embed does not accept real-time filter input from Bubble via URL parameters in a reliable way — the URL filter parameter syntax is undocumented and fragile. A more robust approach is to build Bubble's own filter UI that queries your shared data source (Google Sheets or BigQuery via API Connector) and displays filtered results in a Repeating Group directly on the same page as the embedded report. This gives users an operations view (filterable Repeating Group) and an analytics view (static embedded report) side by side. In your Bubble editor, add a text input or dropdown for filters (e.g., date range, product category, region). Add a Repeating Group below or beside the HTML element containing the iframe. Set the Repeating Group's data source to the Google Sheets API Connector call (or a Bubble database query if you store data in Bubble's native database and sync to Sheets). Add conditions on the Repeating Group that filter based on the input values. The embedded report shows the overall picture; the Repeating Group shows filtered rows that users can view and edit.
**Expected result:** The Bubble page shows the Looker Studio embed alongside a filterable Repeating Group of the same data. Users can filter operational records in Bubble while viewing the overall trend visualization in the embedded report.
### 6. Test the embed in Bubble's live environment and adjust for responsive layout
Bubble's editor preview and the live published app may render HTML elements slightly differently due to responsive layout recalculation. After completing the embed setup, click Publish in the Bubble editor and visit your live app URL. Resize the browser window to check that the iframe fills the container correctly on desktop, tablet, and mobile widths. If the iframe appears too narrow on mobile, adjust the Bubble HTML element's responsive settings (right panel → Responsive → check 'Make this element responsive' and set min/max widths). For mobile devices, Looker Studio reports with many panels may be difficult to use in an iframe — consider adding a mobile-only button that opens the Looker Studio report in a new tab instead of embedding it at smaller breakpoints. Use a conditional in Bubble: 'When Current Page Width is less than 768, element is not visible' on the HTML element, and 'When Current Page Width is less than 768, element is visible' on an 'Open in Looker Studio' link button.
**Expected result:** The Looker Studio report renders correctly in the live Bubble app on both desktop and mobile viewports. Mobile users can access the report via a full-screen link if the iframe is too small to be usable on small screens.
## Best practices
- Be upfront with your team that Looker Studio has no API — the integration is embed-only. Setting correct expectations prevents hours of searching for an authentication flow that does not exist.
- Always use the /embed/ URL format for iframes, not the standard /reporting/ URL. The embed URL suppresses Looker Studio's navigation chrome and is designed for iframe use.
- Use Google Sheets as the shared data source between Bubble and Looker Studio for the most accessible setup. Google Sheets is free, easy to configure, and lets both platforms access the same data without complex API configuration.
- Set the iframe height explicitly in both the HTML attribute and the Bubble element's height property. Relying on one without the other causes the iframe to collapse or overflow unpredictably.
- For mobile users, consider showing an 'Open report in new tab' link button instead of an iframe — Looker Studio reports with many chart panels are difficult to interact with in a small iframe on a phone screen.
- Apply Bubble Privacy Rules to any page that contains embedded Looker Studio reports if the reports contain business-sensitive data. The iframe embed URL is visible in the page source, so ensure only authorized users can access the page.
- Avoid using Looker Studio URL filter parameters (?params=...) to attempt dynamic filtering from Bubble. The syntax is undocumented and unstable across Looker Studio updates. Build Bubble's own filter controls over the shared data source instead.
- When the shared Google Sheet grows large, monitor Looker Studio's data freshness interval. Very large sheets (tens of thousands of rows) may slow report rendering. Consider aggregating data in BigQuery for better performance at scale.
## Use cases
### Executive KPI dashboard inside a Bubble admin app
Embed a Looker Studio report that visualizes business KPIs inside your Bubble admin panel. Executives access the dashboard through Bubble (which may have role-based access controls) rather than navigating to Looker Studio directly. The Bubble page shows the embedded report alongside Repeating Groups of editable data — combining BI visualization with operational controls in one screen. The Looker Studio report auto-updates as its underlying data sources refresh.
### Operations team with live Bubble-to-Sheets-to-Looker pipeline
Your Bubble app writes customer order data to a Google Sheet via the Google Sheets plugin. That same sheet is a Looker Studio data source showing order trends by region and product. When operations staff update order statuses in Bubble, the Looker Studio report reflects the changes on next refresh. The Bubble page displays both the operations Repeating Group and the trend visualization side by side — one interface for both data entry and reporting.
### Multi-report dashboard with dropdown selector
Build a Bubble page with a dropdown that lets users select from multiple Looker Studio reports (e.g., 'Q1 Report', 'Q2 Report', 'Marketing Dashboard'). When the user selects a report, a JavaScript action updates the iframe src to load the corresponding embed URL. This gives stakeholders a single Bubble URL to access their report library without needing Looker Studio access or knowing which report to open.
## Troubleshooting
### The iframe inside the Bubble HTML element shows a blank white box
Cause: The Looker Studio report's sharing is set to 'Restricted' (requires login), or the browser is blocking the iframe due to a Content Security Policy (CSP) header from Looker Studio.
Solution: First, confirm the report sharing is set to 'Anyone with the link can view' in Looker Studio's Share settings. If sharing is correct, open the browser developer console (F12 → Console tab) and look for CSP error messages mentioning 'frame-ancestors'. Test in an incognito window to rule out browser extensions. If CSP errors appear, this is a Looker Studio restriction that affects all embeds in certain configurations — verify you are using the /embed/ URL, not the /reporting/ URL.
### The embedded report shows a Google sign-in prompt inside the iframe instead of the visualization
Cause: The Looker Studio report or its underlying data source (Google Analytics property, private BigQuery table, private Google Sheet) requires Google authentication. Public sharing of the report is not sufficient if the data source itself is private.
Solution: Make the underlying data source accessible: for Google Sheets, change sharing to 'Anyone with the link can view'; for BigQuery, grant the Looker Studio service account read access to the dataset. If the data cannot be made public, consider replacing the Looker Studio embed with a Bubble Repeating Group that queries the data directly — this gives you full control over access without iframe authentication issues.
### The Bubble HTML element height collapses to zero and the iframe is invisible
Cause: Bubble's HTML element height defaults to a small value or zero if not explicitly set. The iframe's height='600' attribute alone does not expand the Bubble element container.
Solution: In the Bubble editor, click the HTML element and open the right-side element properties panel. Find the Height field and set it to a fixed pixel value equal to or greater than the iframe height attribute (e.g., 600 or 650 pixels to include a small margin). Both the Bubble element height and the iframe height attribute must be set.
### The embedded report does not update when Bubble writes new data to Google Sheets
Cause: Looker Studio caches data from Google Sheets and does not refresh in real time. The default refresh interval is typically 12 hours for Google Sheets data sources.
Solution: In Looker Studio, go to Resources → Manage added data sources → Edit the Google Sheets data source → change the data freshness setting to the shortest available interval (currently 1 hour for most plans). For truly real-time updates, switch to BigQuery as the shared data source — BigQuery queries run live on every report load. Alternatively, embed a Looker Studio report that users understand is a delayed snapshot and display real-time data in the Bubble Repeating Group instead.
### Clicking the Bubble dropdown to switch reports does not change the embedded Looker Studio view
Cause: Bubble's HTML element does not support dynamic src attributes natively. The iframe src is set once when the element renders and does not update reactively when Bubble's state changes.
Solution: Add the Toolbox plugin to your Bubble app and use a 'Run JavaScript' action in a workflow triggered by the dropdown change. The JavaScript below updates the iframe src dynamically. The HTML element must have an id attribute set to 'ls-frame' for this to work.
```
// In the Bubble HTML element:
//
// In the 'Run JavaScript' workflow action (Toolbox plugin):
document.getElementById('ls-frame').src = 'NEW_REPORT_EMBED_URL';
```
## Frequently asked questions
### Does Google Data Studio (Looker Studio) have an API I can use from Bubble?
No. Looker Studio has no public REST API for querying reports, fetching data, or triggering actions. The only supported integration method is iframe embedding of publicly shared reports. This is a deliberate product decision by Google — Looker Studio is positioned as a visualization layer on top of data sources that do have APIs. If you need programmatic access, query the underlying data source (Google Sheets, BigQuery, GA4) directly from Bubble's API Connector.
### Will users need a Google account to view the embedded Looker Studio report in Bubble?
Only if the report's sharing is set to 'Restricted' or if the underlying data source requires authentication. If you set the report to 'Anyone with the link can view' and the data source (e.g., Google Sheet) is also publicly accessible, users can view the report inside Bubble without logging into Google. However, they will not be able to edit the report or access any restricted data source it connects to.
### Can I update the Looker Studio report in real time when Bubble data changes?
Not in real time. Looker Studio caches data from its sources on a schedule (typically every hour at the shortest interval for Google Sheets). For the freshest data, use BigQuery as the shared data source — Looker Studio queries BigQuery on each report load, providing closer to real-time results. Alternatively, display real-time data in a Bubble Repeating Group and use the Looker Studio embed for trend visualizations that do not need to be updated by the second.
### What is the difference between Google Data Studio and Looker Studio?
They are the same product. Google Data Studio was rebranded to Looker Studio in October 2022 when Google merged the product line with its Looker acquisition. The free data visualization tool available at lookerstudio.google.com is Looker Studio. 'Looker' (without 'Studio') refers to the separate, paid enterprise data analytics platform. Many users still search for 'Google Data Studio' by the old name.
### Can I filter the Looker Studio report from a Bubble dropdown?
Not reliably via URL parameters — Looker Studio's URL filter syntax is undocumented and may break across product updates. The practical approach is to build your own filter controls in Bubble that query the shared data source (Google Sheets or BigQuery) directly and display filtered results in a Bubble Repeating Group alongside the static embedded report. For swapping between entirely different reports based on a dropdown, use a Run JavaScript action to update the iframe's src attribute dynamically.
---
Source: https://www.rapidevelopers.com/bubble-integrations/google-data-studio
© RapidDev — https://www.rapidevelopers.com/bubble-integrations/google-data-studio