Embed a Dash App into your Website with Dash Enterprise
Meet the Speaker
Austin Kiesewetter
Austin Kiesewetter is a Plotly community member and software engineer at Martin Engineering.
This video walks through how to embed a Dash application into an existing web app using Dash Enterprise, without rebuilding your frontend. The example shows a Django-based blog where a Dash app is embedded directly into a blog post. This approach works for any stack, including Angular or React, and is especially useful for teams with established applications that want to add interactive Dash functionality without rewriting their frontend.
The speaker starts by enabling unauthenticated viewer access in the Dash Enterprise workspace. This is necessary for the embed to load properly. Then, using the dash-embed plugin, they configure allowed origins to match both local development and production URLs.
The Dash app itself is simple, using dcc.Graph to render a Plotly figure. It is deployed through one-click deploy, and then embedded using a combination of a div with a specific ID and a JavaScript script that points to the Dash app’s URL.
In Django, the static dash-embed-components.min.js file is saved in the JS folder and referenced in the base layout. A script is added to initialize the embedded app inside the desired container. This setup can be dynamic, such as rendering different Dash apps in blog posts, or static, like adding an app to a homepage.
Key steps covered:
- Enable unauthenticated viewer access
- Use dash-embed plugin with allowed origins
- Deploy Dash app in Dash Enterprise
- Add embed script and container to your site
- Optionally customize for dynamic rendering
Watch the video to follow along and see how to implement this in your own stack.
