How to Integrate Retool with Google Data Studio (Looker Studio)

Open your Looker Studio report and click the Share button in the top-right corner. In the sharing dialog, click Manage access and set the report access to Anyone with the link can view. This is required for the embedded iframe to load without prompting users to sign in to Google. Next, click the Share button again and select Embed report from the dropdown options. Looker Studio shows an Embed code panel with an HTML iframe snippet and configuration options. Enable the Allow embedding toggle if it is not already on. You will see options to set the report width and height — these are less important since you will control sizing via Retool's Custom Component styling. Copy the iframe URL from the src attribute in the generated embed code — it looks like https://lookerstudio.google.com/embed/reporting/REPORT_ID/page/PAGE_ID. Save this URL. Note that if your Looker Studio report uses data sources that require Google sign-in (like private BigQuery tables), the embed will show a sign-in prompt for users who are not authenticated with Google in their browser. For internal tools, using public Looker Studio data sources or pre-authenticated sessions avoids this friction. If your organization uses Google Workspace, users may need to be added as viewers of the report individually for authenticated data source access to work in embedded context.

In your Retool app, open the Component panel on the left and search for Custom Component. Drag it onto the canvas and resize it to match the report's natural dimensions — Looker Studio reports typically look best at 1200px wide or in full-width containers. Click the Custom Component to open its configuration panel on the right. In the IFrame code editor, replace the default HTML with an iframe tag that loads your Looker Studio embed URL. Set the width and height to 100% to fill the Custom Component container. Add allowfullscreen and the appropriate sandbox attributes to permit the embedded report to load properly. To make the report URL dynamic — for example, to switch between different pages or apply date filters based on Retool component values — reference model properties in the HTML using the {{model.reportUrl}} pattern. Set the Custom Component's model to a JSON object containing the reportUrl and any dynamic parameters. Configure event handlers on Retool date pickers or filter dropdowns to update the model when values change, which causes the iframe src to update and reload the filtered report.

1<!-- Retool Custom Component HTML for Looker Studio embed -->
2<style>
3  body { margin: 0; padding: 0; overflow: hidden; }
4  iframe {
5    width: 100%;
6    height: 100vh;
7    border: none;
8    display: block;
9  }
10</style>
11
12<iframe
13  id="looker-frame"
14  src="{{ model.reportUrl }}"
15  allowfullscreen
16  sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
17></iframe>
18
19<script>
20  // Listen for model changes from Retool to update the src
21  Retool.subscribe(function(model) {
22    const frame = document.getElementById('looker-frame');
23    if (model.reportUrl && frame.src !== model.reportUrl) {
24      frame.src = model.reportUrl;
25    }
26  });
27</script>

For a data-level integration, navigate to the Resources tab in Retool and click Add Resource. If your Looker Studio report is powered by BigQuery, look for BigQuery in the resource type list — Retool has a native BigQuery connector. Click BigQuery to open the configuration panel. Name the resource BigQuery - Production. Authenticate by clicking Connect Google Account and selecting a Google account that has BigQuery Data Viewer or higher access to the relevant datasets. After authenticating, set the Default Project ID to your Google Cloud project. Click Save. Now create a query in your Retool app that targets this BigQuery resource. Write a SQL query that pulls the same data your Looker Studio report visualizes — this gives you raw data access in Retool that you can display in Tables, bind to form inputs, and use for write-back operations that Looker Studio cannot perform. Drag a Table component and bind it to {{ bigQueryQuery.data }}. Add form components for inserting or updating records in the staging or operational tables that feed the BigQuery dataset. Use Retool's event handlers to trigger the BigQuery query after form submissions so the table refreshes with the latest data. The embedded Looker Studio report in the Custom Component will reflect the changes on its next automatic refresh cycle or when the user manually refreshes it.

1-- Example BigQuery query for operational data alongside Looker Studio report
2-- Adjust dataset and table names to match your BigQuery schema
3SELECT
4  campaign_id,
5  campaign_name,
6  channel,
7  spend,
8  impressions,
9  clicks,
10  conversions,
11  DATE(date) as report_date
12FROM
13  `your_project.marketing_dataset.campaign_performance`
14WHERE
15  date BETWEEN @startDate AND @endDate
16  AND channel IN UNNEST(@channels)
17ORDER BY
18  spend DESC
19LIMIT 500;

To create a unified filtering experience, add Retool components that control both the Retool data queries and the Looker Studio embed URL simultaneously. Add a DateRangePicker component at the top of the app. In the BigQuery query configuration, reference the picker's values in the @startDate and @endDate parameters using {{ dateRangePicker.startDate }} and {{ dateRangePicker.endDate }}. For the Looker Studio embed, Looker Studio supports date range URL parameters in the format: append &df22=include%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580DATE_RANGE to the embed URL where DATE_RANGE encodes your selected dates. Use a JavaScript query to construct the dynamic embed URL by combining the base report URL with encoded date parameters derived from the date picker. Update the Custom Component's model.reportUrl property by triggering this JavaScript query on the date picker's onChange event. Note that Looker Studio's URL parameter syntax is complex and varies by connector — test parameter passing in the Looker Studio UI first by using the report's own date controls and observing how the URL changes. For a simpler approach when URL parameters are unreliable, use a separate Retool Chart powered by the BigQuery query for filtering-sensitive visualizations and reserve the embedded Looker Studio for static reference reports that do not need to respond to filter changes.

1// JavaScript query: construct dynamic Looker Studio URL with date filter
2// Run this when dateRangePicker changes
3const baseUrl = 'https://lookerstudio.google.com/embed/reporting/YOUR_REPORT_ID/page/PAGE_ID';
4const startDate = dateRangePicker.startDate; // e.g. '2024-01-01'
5const endDate = dateRangePicker.endDate; // e.g. '2024-01-31'
6
7// Looker Studio date filter parameter (adjust df27 to match your report's filter ID)
8// The filter ID can be found by inspecting the URL when manually applying filters
9const dateParam = encodeURIComponent(
10  JSON.stringify({
11    df27: `include%EE%80%800%EE%80%80IN%EE%80%80${startDate}%2F${endDate}`
12  })
13);
14
15const fullUrl = `${baseUrl}?params=${dateParam}`;
16
17// Update the Custom Component model
18return { reportUrl: fullUrl };