Customize links

When a user clicks a symbol inside a TradingView widget, the widget opens the corresponding page on TradingView by default. You can redirect these symbol links to your own site so users stay within your platform.

This guide covers three approaches, from simplest to most flexible:

• URL template on a widget — set the symbol-url attribute on an individual widget element.
• Global URL template — apply the same URL template to every widget on the page at once.
• JavaScript event handler — intercept link navigation in code for full control.

URL template on a widget

The quickest way to redirect symbol links is to add a symbol-url attribute to the widget element. The value is a URL template containing placeholder tokens that are replaced with the actual symbol values at click time.

<tv-mini-chart
  symbol="NASDAQ:AAPL"
  symbol-url="https://example.com/stocks/{tvexchange}/{tvsymbol}"
></tv-mini-chart>

When a user clicks the symbol, the widget resolves the template and opens https://example.com/stocks/NASDAQ/AAPL in a new tab.

Placeholder tokens

Token values are automatically URL-encoded so they are safe to use in query strings and path segments.

Security

Only https:// and http:// URLs are accepted. Templates with other protocols (for example, javascript:) are silently rejected and fall back to the default TradingView URL.

Global URL template

If your page contains multiple widgets and you want every symbol link to point to the same destination, you can set the URL template once instead of repeating it on each element.

Using the settings element

Place a <tv-custom-settings> element anywhere on the page with the symbol-url attribute. All widgets on the page automatically pick up this value.

<tv-custom-settings
  symbol-url="https://example.com/stocks?symbol={tvsymbol}&exchange={tvexchange}"
></tv-custom-settings>

<!-- These widgets use the global symbol-url automatically -->
<tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>
<tv-ticker-tag symbol="NASDAQ:MSFT"></tv-ticker-tag>

Using JavaScript

Alternatively, set the URL template in JavaScript before the widgets load. Assign the TradingViewCustomWidgetSettings object on the window:

<script>
  window.TradingViewCustomWidgetSettings = {
    'symbol-url':
      'https://example.com/stocks?symbol={tvsymbol}&exchange={tvexchange}',
  };
</script>

This has the same effect as the <tv-custom-settings> element. Use whichever approach is more convenient for your setup. The JavaScript approach can be useful when you generate the URL template dynamically.

JavaScript event handler

For full control over navigation — such as routing within a single-page application or logging clicks — listen for the tv-link-open event.

Every widget dispatches this event on itself just before opening a symbol link. You can call preventDefault() to stop the default navigation and handle it yourself.

Listening on a single widget

<tv-mini-chart id="chart" symbol="NASDAQ:AAPL"></tv-mini-chart>

<script>
  const widget = document.getElementById('chart');

  widget.addEventListener('tv-link-open', (event) => {
    event.preventDefault(); // Stop the default navigation

    console.log(event.detail.href); // Resolved URL
    console.log(event.detail.context); // { symbol, interval, widget }

    // Navigate your own way
    window.location.href = '/stocks/' + event.detail.context.symbol;
  });
</script>

Listening across all widgets

Because the event bubbles, you can add a single listener on a common ancestor (such as document.body) to handle links from every widget on the page.

<script>
  document.body.addEventListener('tv-link-open', (event) => {
    event.preventDefault();

    const { symbol } = event.detail.context;
    const [exchange, ticker] = symbol.split(':');

    // Example: build a custom URL and open it
    const url = new URL('https://example.com/chart');
    url.searchParams.set('symbol', ticker);
    url.searchParams.set('exchange', exchange);
    window.open(url, '_blank');
  });
</script>

<!-- Both widgets are covered by the single listener above -->
<tv-mini-chart symbol="NASDAQ:AAPL"></tv-mini-chart>
<tv-ticker-tag symbol="NASDAQ:MSFT"></tv-ticker-tag>

Event detail

The tv-link-open event is a CustomEvent with the following detail properties:

The context object contains:

Combining approaches

You can combine a URL template with an event handler. When both are present, the href in the event detail reflects the resolved template URL. This lets you set a default destination via symbol-url while still intercepting specific cases in JavaScript.

<tv-mini-chart
  symbol="NASDAQ:AAPL"
  symbol-url="https://example.com/stocks/{tvsymbol}"
></tv-mini-chart>

<script>
  const widget = document.querySelector('tv-mini-chart');

  widget.addEventListener('tv-link-open', (event) => {
    // event.detail.href is "https://example.com/stocks/AAPL"
    console.log('Navigating to:', event.detail.href);

    // Let the default navigation proceed (don't call preventDefault)
  });
</script>

Decision guide

Troubleshooting

Symbol links still open TradingView

Check that the symbol-url value is a valid https:// or http:// URL and contains at least one placeholder token. If the URL uses an unsupported protocol or cannot be parsed, the widget falls back to the default TradingView link.

Global settings are not picked up

Make sure <tv-custom-settings> or the TradingViewCustomWidgetSettings script is present in the page before the widgets initialize. If a widget already has a symbol-url attribute, the widget-level value takes priority.

​preventDefault()​ doesn’t stop navigation

Confirm you are listening for the tv-link-open event (not click) and that event.preventDefault() is called synchronously inside the handler.