HTML widget via TradingView display error

Custom Components
1

I am trying to add a widget by TradingView on my streamlit app using components.html, however, the widget doesn’t get displayed, only a border of it does. How do I solve this?

Here is my code:

components.html("""
        <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com" rel="noopener" target="_blank"><span class="blue-text">Ticker Tape</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
  {
  "symbols": [
    {
      "proName": "FOREXCOM:SPXUSD",
      "title": "S&P 500"
    },
    {
      "proName": "FOREXCOM:NSXUSD",
      "title": "Nasdaq 100"
    },
    {
      "proName": "FX_IDC:EURUSD",
      "title": "EUR/USD"
    },
    {
      "proName": "BITSTAMP:BTCUSD",
      "title": "BTC/USD"
    },
    {
      "proName": "BITSTAMP:ETHUSD",
      "title": "ETH/USD"
    }
  ],
  "colorTheme": "light",
  "isTransparent": false,
  "displayMode": "adaptive",
  "locale": "en"
}
  </script>
</div>
<!-- TradingView Widget END -->
        """)

This is all it shows as the output: (https://i.stack.imgur.com/UVDhd.png)

2

Hi @shiv111,

From a look at my browser console in devtools, I see the following on Firefox :

Common.LocalForage:IndexedDB is NOT available, SecurityError: The operation is insecure. and Error: No available storage method found which provoke an wss://widgetdata.tradingview.com/socket.io/websocket?from=embed-widget/ticker-tape/ error.

Not entirely sure, would need to check the source for tradingview and test blocking IndexedDB locally, but looks like the TradingView javascript snippet you use stores/loads data from your browser’s IndexedDB, which is typically used to store large amounts of data in your browser (it’s a bit like cookies but for bigger, less structured data).

From memory, the Streamlit Components API does not allow access to the Storage part of the browser (yet) (partly because Streamlit users could run JS scripts which access cookies or related data stored in their browser without their consent). That may be relaxed in the future.

1 Like
3

With Streamlit 0.73 the CORS block measure was lifted, could you try again on your component to see if other problems pop up ?

This is my output now:

test
test758×177 351 KB

Cheers,
Fanilo