Embedding Dash Apps in Other Web Platforms

Our recommend method for securely embedding Dash apps 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, or Google Cloud.

Find out if your company is using Dash Enterprise.

Dash Enterprise Embedding Middleware

To get started with Enterprise Embedded Middleware, look up the documentation that is included with
Dash Enterprise. The URL for the documentation depends on the hostname your administrator has chosen.
Look up the hostname for your company’s license.

Dash Enterprise provides a first-class capability for embedding Dash apps
as a microservice in third party websites and 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 app.

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.

Inside your JavaScript host app, you 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 whose src attribute points
to 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>

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.