Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Embedding a webpage into dash app

Good day guys. I have been trying to find a string that talks of how to embed a webpage into Dash app, where the content that will be displayed will change whenever someone selects something either through a dropdown menu or via a button selection. eg
app.layout=html.Div([
html.Div([ Drodown])
html.Div([webpage is embedded here based on value selected])
])
@app.callback([…

I imagine you could achieve this through a Dash callback that targets the ‘children’ attribute of the container element you want the page to be embedded in, and then depending on the dropdown value, return an iframe with the appropriate ‘src’ attribute.

1 Like

more or less what am looking to achieve. any link to an example. am new to dash and have been experimenting with it, actually havent done any webdevelopment but was used to python for doing computations and simulations, so now am trying to make it attractive for a front end viewer

1 Like

Here’s an example I made up:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash()
app.layout = html.Div([
    html.Div(id='target'),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Video 1', 'value': 'video1'},
            {'label': 'Video 2', 'value': 'video2'},
            {'label': 'Video 3', 'value': 'video3'},
        ],
        value='video1'
    )
])


@app.callback(Output('target', 'children'), [Input('dropdown', 'value')])
def embed_iframe(value):
    videos = {
        'video1': 'sea2K4AuPOk',
        'video2': '5BAthiN0htc',
        'video3': 'e4ti2fCpXMI',
    }
    return html.Iframe(src=f'https://www.youtube.com/embed/{videos[value]}')
3 Likes

Where I can see the output ?
is it under http://127.0.0.1:8050/… Please confirm @nedned @chriddyp

Do we need to use the same link for all our codes or Can we customize ?

Thanks !

If you’re running the app on your local machine, then yes, you will be accessing it from http://127.0.0.1:8050 (or http://localhost:8050). You can however specify a different port number when invoking the run_server method on the dash app (eg app.run_server(port=5000)). This is useful if you want to have multiple apps running simultaneously.

If you want to make it publicly available, you can of course look into various hosting options, including using your own domain name.

1 Like

Hi @nedned I am wondering if there is a way also to embed PDF files using html.Iframe.

Here is below how I tried but could succeed.

import dash
import dash_html_components as html
import base64

app = JupyterDash('aa')

app.layout = html.Div([
       html.H1('Title'),
   html.Iframe(  src = "assets/example.pdf")
])

app

It is been 2 years for this conversion but I really appreciate if you can help me.