# Embedding a webpage into dash app **URL:** \ **Category:** Dash Python\ **Created:** [October 24, 2017, 2:17pm UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464 "2017-10-24T14:17:20Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Dee](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Dee](https://community.plotly.com/u/Dee)\ **Post date:** [October 24, 2017, 2:17pm UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/1 "2017-10-24T14:17:20Z")
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([… ---
**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\ **Post date:** [October 25, 2017, 12:16am UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/2 "2017-10-25T00:16:38Z")
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. ---
**Author:** ![Dee](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@Dee](https://community.plotly.com/u/Dee)\ **Post date:** [October 25, 2017, 7:37am UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/3 "2017-10-25T07:37:23Z")
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 ---
**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\ **Post date:** [October 25, 2017, 8:23am UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/4 "2017-10-25T08:23:33Z")
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]}') ``` ---
**Author:** ![SamRDev](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@SamRDev](https://community.plotly.com/u/SamRDev)\ **Post date:** [November 1, 2017, 8:47am UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/5 "2017-11-01T08:47:49Z")
Where I can see the output ? is it under [http://127.0.0.1:8050/](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 ! ---
**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\ **Post date:** [November 2, 2017, 1:10am UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/6 "2017-11-02T01:10:52Z")
If you’re running the app on your local machine, then yes, you will be accessing it from [http://127.0.0.1:8050](http://127.0.0.1:8050) (or [http://localhost:8050](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. ---
**Author:** ![kapital1](https://avatars.discourse-cdn.com/v4/letter/k/ea5d25/32.png) [@kapital1](https://community.plotly.com/u/kapital1)\ **Post date:** [January 16, 2020, 1:57pm UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/8 "2020-01-16T13:57:35Z")
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. ```auto 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. ---
**Author:** ![navarrone906](https://avatars.discourse-cdn.com/v4/letter/n/3ab097/32.png) [@navarrone906](https://community.plotly.com/u/navarrone906)\ **Post date:** [February 9, 2021, 7:10pm UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/9 "2021-02-09T19:10:48Z")
This has saved me so much time, I made an account just to say thanks! ---
**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\ **Post date:** [February 20, 2021, 6:07am UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/10 "2021-02-20T06:07:36Z")
Oh that’s great to hear! thank you so much for the lovely feedback 🙂 ---
**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\ **Post date:** [February 20, 2021, 6:11am UTC](https://community.plotly.com/t/embedding-a-webpage-into-dash-app/6464/11 "2021-02-20T06:11:47Z")
I would look at best-practice strategies for doing this this with vanilla HTML, and then work out which of those techniques can be used with Dash. I’m not too familiar with best practice ways of embedding PDFs in HTML, but this Stack overflow questions looks like a good place to start: [Recommended way to embed PDF in HTML? - Stack Overflow](https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html)