How to Embed Bold Reports in Bubble Using an HTML iFrame

This guide provides a step-by-step process for embedding Bold Reports into your Bubble application using the HTML element. By following these instructions, you can effectively display interactive reports within your Bubble projects and take advantage of features such as Single Sign-On (SSO) when configured.

Steps to Integrate Bold Reports into Bubble projects using HTML Embedding:

1. Log in to Bubble

   • Open the Bubble website (Bubble.io).
   • Sign in using your Bubble account credentials.

2. Drag and drop the HTML Element

   • After logging in, either start a new project or open an existing one.
   • In the Bubble editor toolbox, locate the HTML element.
   • Drag and drop the HTML element onto the canvas where you want to display the report.
     
     

3. Generate the Embed Code of the Report

4. Use the iframe in HTML and Paste the Generated Embed Code

   • Create an iframe tag within the HTML element.
   • Paste the generated embed code into the src attribute of the iframe tag.
     

5. Preview and Adjust

   • Save your changes in the Bubble editor.
   • Preview your Bubble project to ensure the report displays correctly.
   • Make any necessary adjustments to the layout or settings.
     
     

Note: To enable Single Sign-On (SSO), ensure that it is enabled during the embed code generation process as detailed in the following documentation: Embed Reports® Using External SSO Authentication