Black Lives Matter. Please consider donating to Black Girls Code today.

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!