How to Embed Looker Studio

Putting a live Looker Studio dashboard directly onto your website or client portal is a fantastic way to share real-time data without needing people to log in elsewhere. This turns a static webpage into an interactive reporting hub. In this tutorial, we will walk through the exact steps for embedding your report, from setting the right permissions to customizing how it looks on your page.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

First Things First: Check Your Sharing Permissions

Before you generate any embed code, you need to make sure people can actually see your report. If your Looker Studio report's sharing settings are private, your embedded visualization will just show a login screen or a blank space to your website visitors. Fixing this is simple.

Here’s how to set the correct permissions:

1. Open the Looker Studio report you want to embed.
2. Click the Share button at the top right of the screen.
3. In the sharing dialog that opens, navigate to the Link settings section.
4. Click the dropdown menu. For a public website, you will almost always want to select Anyone on the internet with the link can view. If you are embedding the report on an internal company site where everyone has a company Google account, you could use Anyone at [your company] with the link can view.
5. Click Save and then Close.

With the right permissions set, you're now ready to grab the embed code.

How to Embed Your Looker Studio Report (The Easy Way)

Looker Studio provides a built-in feature to generate an iframe code snippet, making the embedding process quick and straightforward. An iframe, or inline frame, is a standard HTML element that lets you display one webpage within another webpage.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Step-by-Step Guide to Getting Your Embed Code

1. Open the Embed Menu: With your report open, go to the menu bar at the top and click File > Embed report. (Alternatively, you can click the < > icon in the header's sharing section.)
2. Configure Your Embed Settings: A pop-up window titled "Embed report" will appear. You'll see two options: "Embed code" which provides an HTML iframe snippet, and "Embed URL" which is just the source link for the iframe.
3. Set the Dimensions (Optional): You can specify the width and height of your embedded report in pixels. Don't worry too much about a perfect size right away - you can easily adjust it later in your website's HTML. A good starting point is often around 1200px wide by 900px high.
4. Copy the Code: Once you're ready, click the Copy to clipboard button. This will copy the full iframe code snippet to your clipboard.

Here's what a standard embed code from Looker Studio looks like:

<iframe width="1200" height="900" src="https://lookerstudio.google.com/embed/reporting/YOUR_REPORT_ID/page/PAGE_ID" frameborder="0" style="border:0" allowfullscreen></iframe>

Step 3: Paste the Code into Your Website

The final step is to paste this code snippet into your website's editor. Where you paste it depends on your platform.

• WordPress: Open the page or post where you want the report to appear. Switch from the Visual editor to the Code editor (or Text editor in the Classic Editor). Find the spot you want your dashboard to appear and paste the iframe code. In the Block Editor (Gutenberg), you can also use a "Custom HTML" block to paste the code.
• Shopify or Squarespace: These platforms typically have an "HTML" block, "Code" block, or a source code view (often labeled with a < > icon) in their page editors. Add a new block or switch to the code view and paste your iframe code there.
• Custom HTML/CSS sites: If you're working directly with HTML files, simply paste the code into the body of your HTML document where you want it to be displayed.

Once you save and publish your page, your interactive Looker Studio report will be live and fully functional for your visitors.

Tips for a Better Embedded Report Experience

Pasting the default code works, but a few small tweaks can dramatically improve how your report looks and functions on your site.

Making Your Report Responsive

Fixed pixel widths can cause problems on mobile devices, forcing users to scroll horizontally. To make your embedded report responsive, simply change the width attribute in the iframe tag to 100%.

Change this:

<iframe width="1200" ... ></iframe>

To this:

<iframe width="100%" ... ></iframe>

This tells the browser to make the iframe take up the full width of its container, so it will automatically resize on different screen sizes. You should still keep the height as a fixed pixel value to avoid layout issues.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Hiding the Looker Studio Header for a Cleaner Look

By default, embedded reports include a grayish Looker Studio header at the top that can feel out of place. You can remove this for a more seamless, integrated experience by adding a simple parameter to the URL inside your iframe code.

Just add &rm=minimal to the end of the src URL.

Before:

<iframe width="100%" height="900" src="https://lookerstudio.google.com/embed/reporting/YOUR_REPORT_ID/page/PAGE_ID" ... ></iframe>

After:

<iframe width="100%" height="900" src="https://lookerstudio.google.com/embed/reporting/YOUR_REPORT_ID/page/PAGE_ID?&rm=minimal" ... ></iframe>

This minimal mode removes all the Looker Studio branding and navigation, making the report feel like a native part of your website.

Troubleshooting Common Embedding Issues

Sometimes things don't work perfectly on the first try. Here are the solutions to the most common problems you might encounter.

1. The Embedded Report Asks Me to Sign In

This is almost always a permissions problem. If visitors are seeing a Google sign-in prompt instead of your data, it means your report's sharing settings are too restrictive. Go back to the "Check Your Sharing Permissions" section at the top of this article and make sure you've selected Anyone on the internet with the link can view.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

2. The Report is Squeezed, Has Double Scrollbars, or is Cut Off

This happens when the dimensions of the iframe tag don't match the dimensions of your Looker Studio report canvas. If your report's page size is 1200px wide, but your iframe height attribute is set to only 600px, you'll get a vertical scrollbar. To fix this:

• Check the canvas size of your report in Looker Studio (under Page > Current page settings > Canvas Size).
• Adjust the height attribute in your iframe code to match the canvas height. You may need to add a bit extra (20-30 pixels) to account for any filters you have.
• Ensure your width is set to 100% and the containing element on your webpage is wide enough to display the report without squeezing it.

Final Thoughts

Embedding Looker Studio dashboards is an excellent way to bring your data to life for clients, team members, or publicly on your blog. By following these steps - setting the right permissions, grabbing the iframe code, and making a few small customizations - you can seamlessly integrate dynamic reports directly into any webpage.

The time-consuming part of this process isn't the final embedding, it's getting the report built in the first place inside Looker Studio. Juggling data sources, picking chart types, and configuring metrics still requires hours of manual setup. That's where we wanted a simpler, faster way. With Graphed, we made it possible to create real-time analytics dashboards in seconds just by describing what you want to see. Instead of battling a complex BI tool, you can just ask, "Show me my Facebook Ads revenue vs. spend by campaign for the last 30 days," and we build the dashboard instantly, letting you get to the insights - and embedding them - in a fraction of the time.