Connecting Dash (Plotly) to API with html.Script

Viewed 268

Looking to connect an app built in dash to a third-party API.

The html that connects is something like this...

<script src="https://api.website.com/static/api.js" data-app-id="1234" >
</script >

Dash has a script component called html.Script that replaces the script tag in raw html. You can read more about it here: https://dash.plotly.com/dash-html-components/script

The issue is that the raw html api code contains the unique attribute data-app-id, and Dash's html.Script component doesn't seem to support a keyword argument that would allow one to place data-app-id="1234" in the component.

Any thoughts how to put data-app-id="1234" in there?

1 Answers

You can actually do this via setting the external_scripts property of Dash:

external_scripts = [
    {
        "src": "https://api.website.com/static/api.js",
        "data-app-id": "1234",
    },
]

app = dash.Dash(__name__, external_scripts=external_scripts)

Look at the documentation here for more info.


To verify it is working: Run your app and in the browser view page source and you will see it shows:

<script src="https://api.website.com/static/api.js" data-app-id="1234"></script>
Related