Can a ReactJS app embed a dashboard without using iFrame?

I’m a python programmer and currently stumbling through AWS Amplify building a React Javascript application that is a basic UI to a chabot. I’m new to JavaScript and React (I’m more of a backend machine learning/statistics guy).
Basically the chatbot takes a question from the user and dynamically creates a new dashboard as an answer (it can generate lots of answers, but dashboards are one option).

It all works and the chatbot can dynamically generate a hyperlink and view the Quicksight dashboard in a new browser tab. I want to display the dashboard next to the chat dialogue. I can embed the dashboard in a basic iframe (next to the chatbot dialogue), but surely this is not the best option. Iframe can’t be resized to fit the content of the Quicksight dashboard and the user experience is terrible. Iframe doesn’t resize height to fit the Quicksight dashboard.

Is there someway to embed (ideally for anonymous viewing) a dashboard inside a or something that can be dynamically resized and managed better than an iframe?
Am I missing something? It seems like a terrible approach to use iframe. What alternatives are there so the Quicksight dashboard is not crippled (my dashboards could be pages long and resize height is critically important).

There is a significant gap in working examplse of how to embed Quicksight. You guys should consider providing an AWS Amplify (coded in ReactJS and python) example of how to embed QuickSight. If you want adoption of Quicksight then show us how. For me personally the documentation is not enough.


Hi Tim,

Some other folks have found solutions to adjust iframe content here. I think some of these suggestions may work for you.

Using an iframe is required though and customers have had success creating rich embedded dashboard experiences.

I like your suggestion for an Amplify+React demo project/repository we could build (as well as improving documentation), and will put that in our backlog.


1 Like