Embedding Dash Apps in other Web Platforms

Our recommend method for securely embedding Dash applications in existing
Web Apps is to use the Embedding Middleware
of Dash Enterprise.

Dash Enterprise can be installed on the Kubernetes
services of
AWS,
Azure,
GCP,
or an
on-premise Linux Server.
Find out if your company is using Dash Enterprise

Dash Enterprise Embedding Middleware

If your company has licensed Dash Enterprise, then view the deployment
documentation by visiting

https://<your-dash-enterprise-platform>/Docs/embedded-middleware

(Replace <your-dash-enterprise-platform> with the hostname of your
licensed Dash Enterprise in your VPC).

Look up the hostname for your company’s license

Dash Enterprise provides a first-class capability for embedding Dash apps
as a microservice in 3rd party websites & Salesforce.

This capability provides hooks into your existing website’s login and
authentication logic so that only users who have logged into the
existing host web application can view the embedded Dash application.

To get started with Dash Enterprise Embedded Middleware, visit:
https://<your-dash-enterprise-hostname>/Docs/embedded-middleware
,
replacing <your-dash-enterprise-hostname> with the hostname of your
licensed Dash Enterprise in your VPC. Look up the hostname for your company’s license

Sharing State between a Javascript Host app and an embedded Dash App

You can find here a simple example illustrating multidirectional shared state, enabling the communication between your JavaScript host app and your Dash app.

GIF showing how to use dash embedded

Inside your JavaScript host app, you simply provide the array or object that you want to share to your Dash app as a positional argument in Dash Embedded Components renderDash() function:

...
var setter = window.dash_embedded_component.renderDash(
    { url_base_pathname: "http://dash.tests:8050" },
    'dash-app',
    sharedData
);

If you are using a React app, you can import the component and use it inside JSX:

import { DashApp } from "dash-embedded-component";

window.React = React;
window.ReactDOM = ReactDOM;
window.PropTypes = PropTypes;

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sharedData: {
                myObject: {
                    clicks: 0,
                    aString: randomString(5),
                    data: myData,
                    multiplyFunc: (x, y) => { ... },
                    sumFunc: (x, y) => { ... },
                    storeDataFromDash: obj => { ... },
                    dashAppData: {}
                },
            },
        };
        this.clickIncrement = this.clickIncrement.bind(this);
        ...
    }

    render() {
        return (
        <div>
            ...
            <div>
            <h1>Embedded Dash Application<h1>
            <DashApp>
            <div>
        <div>
        );
    }
}

Then inside your Dash app, simply use the dash_embedded.ConsumerContext and dash_embedded.ConsumerFunction components consume and use the shared data:

...
app.layout = ddk.App(
    [
        ...
        ddk.Card(
            [
                ddk.CardHeader(title="Triggering Callbacks from Dash App & Host App"),
                ConsumerContext(id="clicks", path=["myObject", "clicks"]),
                ConsumerContext(id="data-one", path=["myObject", "data", "dataOne"]),
                ConsumerContext(id="data-two", path=["myObject", "data", "dataTwo"]),
                ...
            ],
            width=50,
        ),
        ddk.ControlCard(
            [
                ddk.CardHeader(title="Triggering Host App Functions from Dash App"),
                ConsumerFunction(
                    id="host-app-multiply", path=["myObject", "multiplyFunc"]
                ),
                ConsumerFunction(id="host-app-sum", path=["myObject", "sumFunc"]),
                ddk.ControlItem(...),
                ...
            ],
            width=50,
        ),
        ...
    ]
)
...

# Access the nested objects via `path=["myObject"]`
@app.callback(Output("display-full-object", "children"), Input("full-object", "value"))
def display(value):
    return json.dumps(value, indent=2)


# Access nested values via `path=[...]`
@app.callback(
    Output("display-data_dataOne_y[1]", "children"), Input("data_dataOne_y[1]", "value"))
def display(value):
    return "data.dataOne.y[1]={}".format(value)


# Trigger Callback from Host App Data & Dash App Buttons
@app.callback(
    Output("plot", "figure"),
    Input("update", "n_clicks"), Input("clicks", "value"),
    State("data-one", "value"), State("data-two", "value"),
)
def update_figure(clicks_dash, clicks_host, trace1, trace2):
    ...
    return go.Figure(...)


# Trigger Host App functions by sending data into the `params` property
@app.callback(
    Output("host-app-sum", "params"),
    Input("sum", "n_clicks"),
    State("input-x", "value"), State("input-y", "value"),
)
def trigger_sum(_, x, y):
    return [x, y]
...

Embedding Public Apps in Public Websites with <iframe>

The simplest approach to embedding Dash in an existing web application is to
include an <iframe> element in your HTML.

Note that this does not work if your
application is private and does not integrate with your website’s existing
authentication or login system. To provide a single sign on experience,
use Dash Enterprise Embedding Middleware.

whose src attribute points
towards the address of a deployed Dash app. This allows you to place your
Dash app in a specific location within an existing web page with your
desired dimensions:

<iframe>