✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Including raw HTML widget in my Dash app

Dash is great! I would like to know how to add HTML to my page. I would like to add the following widget to my webapp but i still haven’t found the component to do that, can anyone help me? Thanks in advance :slight_smile:

<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_83839"></div>
  <div class="tradingview-widget-copyright"><a href="https://it.tradingview.com/symbols/NASDAQ-AAPL/" rel="noopener" target="_blank"><span class="blue-text">Grafico AAPL</span></a> di TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "width": 980,
  "height": 610,
  "symbol": "NASDAQ:AAPL",
  "interval": "D",
  "timezone": "Etc/UTC",
  "theme": "Light",
  "style": "1",
  "locale": "it",
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_83839"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

Maybe this could be what you are looking for?

2 Likes

I’ll look into it, thanks!

Hey, i tried to use dangerously-set but the problem is that the webapp that i’m building shouldn’t be exposed to cross site attacks. Is there a safer alternative for that?

From the README in the git repository:

In most cases, you are safer using the Dash HTML component classes, dash-html-components (https://github.com/plotly/dash-html-components). You can also provide HTML in a sandboxed iframe using the dash_html_components.IFrame(srcDoc=‘raw html here’) component, see Rendering HTML similar to Markdown

Have you tried this?

I’m gonna try. Thank you!

Did you ever figure out how to incorporate this widget into your dashboard?