Update Ticker Widget in custom component

Queries and Resources
1

I want to update to up a html widget with a text input to dynamically change the ticker of this widget specifically "symbol": "TGA", update from inputtext1.

<!-- TradingView Widget BEGIN -->
<center><div class="tradingview-widget-container">
  <div class="tradingview-widget-container__widget"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/NYSE-EQR/" rel="noopener" target="_blank"></div>
  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
  {
  "symbol": "name",
  "width": 350,
  "height": 220,
  "locale": "en",
  "dateRange": "12M",
  "colorTheme": "light",
  "trendLineColor": "rgba(41, 98, 255, 1)",
  "underLineColor": "rgba(41, 98, 255, 0.3)",
  "underLineBottomColor": "rgba(41, 98, 255, 0)",
  "isTransparent": false,
  "autosize": false,
  "largeChartUrl": ""
}
  </script></center>
</div>
<!-- TradingView Widget END -->
2

The solution for the Custom Component! Requires a Model with "symbol" as the "key" and a textInput.value as the "value", and for Shared Origin to be turned on.

<html>
  <body>
    <script>
      let symbol;
      window.Retool.subscribe(function (model) {
        if (!model.displayText) {
          return;
        }
        symbol = model.displayText;
        updateWidget(symbol);
      });

      function updateWidget(symbol) {
        document.getElementById("trading-view").innerHTML = "";
        var script = document.createElement("script");
        script.setAttribute(
          "src",
          "https://s3.tradingview.com/external-embedding/embed-widget-single-quote.js"
        );
        script.text =
          "{" +
          '"width": "100%",' +
          '"height": "100%",' +
          '"symbol": "' +
          symbol +
          '",' +
          '"locale": "en",' +
          '"interval": "1D"' +
          "}";
        document.getElementById("trading-view").appendChild(script);
      }
    </script>
    <div id="trading-view" />
  </body>
</html>
3

this code goes under iFrame section and key value goes in model section, as shown in screenshot below right ? it doesnt seem to work for me. where do we set the Shared Origin parameter ?
image

4

Hi @Venus

Thanks for reaching out here! It seems like the key should actually be displayText:

5

I also noticed that I needed to check on Storage and cookies