How are the dash dashboards embedded on the Dash by Plotly webpage
I see that it links to this heroku app but I don’t understand how it is put into the div.
1 Like
Dash apps are simply hosted somewhere and then inserted using an <iframe>. You can see how the dash apps are inserted in our marketing page in this screenshot as an example.
1 Like
@charleyferrari, I now see where the <iframe> is defined. I was confused b/c I was looking at all the <div>'s that were inside. I never realized that all that code gets created when <iframe> is used.
I did know about the <iframe> method, but don’t think this would be ideal since my company would want to put this behind a paywall, AFAIK, people can just use the link to get access outside of the webpage. Are there any other methods that would achieve this?
I’ve read this post, but I’m using a javascript framework for the webapp.
1 Like
I’d be very interested to know if it can be done without an IFrame or Django. It would be ideal to have analysts make the Dash app and give it to web developers who can embed it directly into a webpage without needing an IFrame
The other option is embedding it in a Flask app. See this page of the Dash User Guide.
Is there a particular reason why an iframe is not suitable?
From what I’ve seen, IFrames are generally bad practice. Sizing issues, passing on user permissions, styling, etc. They seem like a headache to work with if not 100% needed.
From what I know, Dash Deployment Server offers direct HMTL embedding and I am wondering if anyone knows a way to hack that same solution without having to make custom JavaScript UI elements that dash_core_components offers. If analysts/data scientists use Dash and web developers can embed them directly into the HTML, then proprietary content can be created from a strong analytical background and be shown on company websites that pass on all the security and user permissions needed from a production process
1 Like
I’m afraid I can’t comment on the capabilities of Dash Deployment Server.
The challenge would seem to lie in the parent HTML app that you want to embed the Dash app in. I think this problem is better described as how to embed a React app in other arbitrary HTML. I found this answer on stack overflow, but using an iframe is clearly more straight forward.
Is it necessary to embed it in surrounding content? If not, then you can simply get the URL of the Dash app mounted at the relevant place on your domain, and style the Dash app so that it feels like another page on the site.
1 Like
Thanks @nedned, thats a great link. It just depends on which route is quicker to implement. The work needed to make the IFrame work means having to code dynamic sizing, passing user permissions through the IFrame, and styling your Dash app to match the web page. This could be just as much work as just embedding a React app, if not more, though I’ve never done either so I’m open to advice. If so the question now is:
Is there a way to get the Dash app in its native React.js code similar to how you can export a Python Plotly plot to JSON to be interpreted by JavaScript?
Not really. Dash apps are currently very much tied to the server-side component of the app. It may be possible at some point in the future to have Dash apps be fully clientside, with all local callbacks, but until then, you can’t really remove the server-side component.
In your situation, my intuition would be to attach the CSS stylesheet for the existing website to your Dash app and try to massage your Dash app’s layout to mirror the layout of the existing page (by setting the relevant class and ID names being targeted in the CSS etc). Then you can just mount your Dash app at a route alongside your existing app. I feel like that would involve the least amount of complexity.
Hi I wander if anyone has succeeded in embedding a dash app recently through iframe. I deployed my app to heroku and trying to add the url into an iframe of another website, however, it only showed “loading” and then a blank page. F12 shows that There are several error liek “DOMException: failed to read the localStorage” as well as “dash_core_componets was not found”. The heroku app itself opens fine.
I tried a few examples in the gallery https://dash-gallery.plotly.host/Portal/, and got the same thing. Not sure if it is caused by the dash app or the website that I would like to embed the dash app in. Can someone help?
1 Like
Hi, your best bet is Django-Plotly-Dash, which is what we use for all our dashboards on https://www.lvfinancials.com