15.2. Embedding Reports on Webpage
When you want to share your Looker Studio reports, embedding them on a webpage is an excellent option. This method allows you to create a personalized, white-label experience for your clients or colleagues.
Enabling Embedding
To embed a report, click on the dropdown menu beside the Share button. If you're in view mode and the embedding option is not available, switch to edit mode. Once there, click on the dropdown menu and select "Enable Embedding." You can also decide if you want to show report navigation in embedded mode.
After enabling embedding, you'll receive an embed URL or embed code. Adjust the width and height of the report as needed, then copy and paste the code to embed it on your desired webpage.
White Labeling Your Looker Studio Report
When embedding a report, the header of the report will still be visible when users hover over the top of the page. To create a cleaner, white-label look, add /appview to the end of the URL. This removes the navigation and header, but also disables scrolling.
To allow scrolling while maintaining the white-label appearance, use an iframe with a specified width and height. Embed the full-page Looker Studio report in the iframe, and it will adjust to the available space, allowing for scrolling.
Hiding the Looker Studio Logo
While it's not possible to directly remove the Looker Studio logo from the embedded report, there is a workaround. Create a slightly longer page than needed, and add a white <div> with a fixed position at the bottom of the page and a high z-index. This overlays a white rectangle on top of the logo, effectively hiding it from view.
Remember, this method is a workaround, not a direct solution. Google wants people to recognize Looker Studio, but if you need to hide the logo, this CSS trick can help you achieve that.
📩 Receive my weekly Looker Studio tips
🎥 Subscribe to my YouTube channel
🖇 Connect with me on LinkedIn