/ Tutorials / Web components / Set up widget
type: Web Component

Set up widget

To use the widget, you should adjust it to your requirements and then embed into the page.

Widget configuration

On each widget page, you will find a configuration wizard that allows you to customize settings, preview the result, and copy a ready-to-use embed snippet.

You can adjust common settings such as symbol, size, and theme. There are also widget-specific settings, for example, orientation for Ticker Tape. To update the live preview with your current settings, click Apply.

Widget code

Widget code includes a single ES module script and custom element. All styling is included, so no separate CSS files are required. For example, the snippet below demonstrated the Ticker Tape code.

<!-- ES module script -->
<script
  type="module"
  src="https://www.tradingview-widget.com/w/en/tv-ticker-tape.js"
></script>


<!-- Custom element -->
<tv-ticker-tape
  symbols="NASDAQ:AAPL,NASDAQ:ADBE,NASDAQ:NVDA,NASDAQ:TSLA"
  direction="vertical"
  item-size="compact"
></tv-ticker-tape>

While you configure widget with the wizard, the snippet in the code box updates dynamically to reflect the changes. You should copy this snippet and embed it into your page.

Embedding

There are two ways to embed the widget into the page.

Standard

Embed the widget’s code directly into your HTML. Note the following:

  • The script can be placed in the <head> or <body>.

  • The custom element can be placed before or after the script. Their loading don’t need to be next to each other or happen at the same time.

    You can place a custom element (for example, <tv-ticker-tape>) in your HTML before the defining script is loaded. The browser treats the custom element as an “unknown element” and does not render the widget UI until the script registers it.

    Additionally, you can place your own DOM/content inside the custom element as a temporary placeholder. Therefore, you will keep the UI informative while the widget script is still pending.

    <tv-ticker-tape>
      <div class="placeholder">Loading market data…</div>
    </tv-ticker-tape>

    Once the widget script loads and the element is defined, the widget will upgrade itself and render its own UI, replacing the placeholder as designed.

    If JavaScript fails to load for any reason, your placeholder content remains visible. This provides a graceful fallback for users with blocked or flaky JavaScript.

    Because custom elements upgrade after definition, the defining script does not need to block rendering and can be loaded later in the page to maintain a lean critical path.

Dynamic import

If you prefer to load the entry file from JavaScript, you can import it dynamically.

<script type="module">
  await import(
    'https://www.tradingview-widget.com/w/en/tv-ticker-tape.js'
  );


  // The custom element is now defined and can be added to the DOM.
  const el = document.createElement('tv-ticker-tape');
  el.setAttribute(
    'symbols',
    'NASDAQ:AAPL,NASDAQ:ADBE,NASDAQ:NVDA,NASDAQ:TSLA',
  );
  el.setAttribute('direction', 'vertical');
  el.setAttribute('item-size', 'compact');
  document.querySelector('#container').appendChild(el);
</script>

Multiple widgets on one page

You can embed multiple instances of the same widget, or different widgets, on the same page. Consider the following tips:

  • Shared bundles reduce total bytes and parse time when multiple widgets are present.
  • One script works for many instances of the same widget on a page. If you repeat the same script tag, browsers deduplicate identical script requests automatically.

Next

Manage layout and size