/ Frequently asked questions / Adding many widgets

Adding many widgets

Consider you want to add multiple Symbol Info (or any other) widgets to your website to show different stocks. To do this, you should embed the widget code on each page. By default, the widget is configured to show the AAPL stock. Therefore, you will need to adjust the "symbol" option for each widget to show the required symbol. For instance, to display the details for NVDA instead of AAPL, you should update the "symbol" value accordingly:

JS
{
    /* ... Other widget options ...*/
    "symbol": "NASDAQ:NVDA" /* ← Changed from NASDAQ:AAPL */
}

Updating code for each widget manually can be time-consuming. To streamline this process, consider using one of the approaches outlined below:

Query string

With this frontend approach, you do not need to change the symbol manually. Instead, you use the tvwidgetsymbol query parameter that TradingView widgets can detect without any additional JavaScript configuration.

When the widgets try to load, they determine the tvwidgetsymbol value, which contains the requested symbol name. If the symbol exists, widgets use this symbol name as a symbol value. For example, using https://example.com/?tvwidgetsymbol=NASDAQ:AAPL will display the Apple stock on the widget.

While you can use a custom parameter and JavaScript to set the symbol manually, the tvwidgetsymbol parameter is specifically designed for single-symbol widgets, such as those listed below. It does not apply to multiple-symbol widgets, such as Ticker Tape.

Backend HTML templates

HTML templates are used to create multiple pages with similar layouts. A template contains the common elements of your pages, such as headers and navigation, and special placeholder variables. These placeholders are replaced with actual content when the server processes the request.

You can include the widget code in your template and specify a variable for the "symbol" option value. Consider the code sample below that demonstrates a template for the Symbol Info widget. Note that your templates and code might be different depending on the templating language and backend implementation.

HTML
<!DOCTYPE html>
<html>
<!-- Your page code -->


    <!-- 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 nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js" async>
        {
            "symbol": {{ symbolname }},
            "width": 550,
            "locale": "en",
            "colorTheme": "light",
            "isTransparent": false
        }
        </script>
    </div>
    <!-- TradingView Widget END -->


</html>

The input object should contain the symbol name.

JS
{
    symbolname: "NASDAQ:NVDA",
}

As a result, the HTML page sent to the client’s browser will contain the correct symbol name. When the widget loads, it will show the requested symbol.

JS
{
    /* ... Other widget options ...*/
    "symbol": "NASDAQ:NVDA",
}

TradingView naming convention

The "symbol" option should contain a symbol name in the {EXCHANGE}:{NAME} format. Ensure that the symbol names you provide follow this format, otherwise, the widgets will not load.

If you have a few symbols, you can search for their correct names on tradingview.com. For a large dataset (thousands of symbols), you should implement a mapping on your side, as some symbols may not follow an intuitive naming pattern. Contact us via the form for further guidance.