How to keep visitors on your site with a grouped Derived Indices watchlist

A TradingView Market Overview widget is an embeddable watchlist that groups instruments into tabs, showing price, change and a small sparkline for each row. For a Deriv partner, it can solve a problem the other widgets in this series don't: Deriv's Derived range is a family of instruments with genuinely different behaviours, and a flat, alphabetical list hides that from a reader who doesn't yet know the difference.

This article uses the same three-tab watchlist running on this page — Volatility, Boom & Crash, and Jump & Step — as the example. You'll learn what the widget teaches, what it can't do on its own, and how to reproduce it with clicks routed to your own site.

How does the grouped watchlist work on your site?

• The Market Overview widget groups Derived indices into tabs (Volatility, Boom & Crash, Jump & Step) instead of one flat list.
• Sparklines let readers recognise instrument behaviour by shape — noise for Volatility, a staircase for Step, a climb-and-drop for Crash — before they know any single index.
• Setting largeChartUrl to your own chart page keeps row clicks on your site, next to your partner button, instead of sending readers to tradingview.com.
• Confirm all eight symbols before publishing; other Derived index families follow the same s/d pattern but must be checked first.

Key TradingView features and concepts

• TradingView Market Overview widget — an embeddable watchlist that organises instruments into tabs, with each row showing price, change and a sparkline.
• tabs — the widget's configuration array of {title, symbols} objects, one per grouped view (here: Volatility, Boom & Crash, Jump & Step).
• largeChartUrl — the option that sets the destination for a row click; left empty, TradingView defaults to its own chart page.
• dateRange — controls the sparkline's time window, set to "1D" in this example.
• Derived index family — a grouping of Deriv's synthetic instruments by shared behaviour: Volatility (constant volatility), Boom & Crash (spikes against a drift), Jump & Step (distinct jump or staircase patterns).
• Deriv partner link — a partner's unique tracking URL, provided by Deriv's Partnerships team, that attributes a referred sign-up or trade back to their account.

Live: Derived indices by family

‍

How do Derived Indices families connect to TradingView watchlists?

1. A reader lands on your page and sees the Market Overview widget, with three tabs sorting eight Derived indices by family.
2. Selecting a tab reveals that family's symbols, each with a sparkline whose shape signals its behaviour — a reader starts recognising instruments visually before reading any explanation.
3. Clicking a row triggers largeChartUrl. Left empty, the click opens tradingview.com and carries no partner attribution. Set to your own chart page, the click keeps the reader on your site.
4. The partner button placed beneath the widget carries your Deriv partner link regardless — but setting largeChartUrl means every row click, not just the button click, can lead back toward your own content and CTA.

How does the TradingView market overview widget compare with other widgets?

‍

How do you embed a grouped Derived Indices watchlist on your site?

Follow this four-step process to embed a TradingView Market Overview widget, grouped into three tabs, with row clicks routed to your own site and a Deriv partner link placed beneath it.

Why does it matter for your Deriv business? A reader who understands the family structure picks an instrument with intent instead of guessing — and if you set largeChartUrl, every row click can lead back to your own content and partner CTA instead of away to tradingview.com.

Step 1: Confirm every symbol page

The eight symbols used here are confirmed. Volatility 25/50/75, Boom/Crash 300–900 and Jump 10–75 follow the same naming pattern but must be checked on their own tradingview.com symbol page before you add them to a tab.

Step 2: Paste the block and set largeChartUrl

tabs is a list of {title, symbols} objects; each symbol needs s (the TradingView symbol) and d (display name). Set largeChartUrl to your own chart page. TradingView appends ?tvwidgetsymbol=DERIV:VOLATILITY_100_1S_INDEX to that URL, which your page can read to preselect the right chart.

html

<div style="height:480px">
  <!-- TradingView Widget BEGIN -->
  <div class="tradingview-widget-container" style="height:100%;width:100%">
    <div class="tradingview-widget-container__widget" style="height:100%;width:100%"></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-market-overview.js" async>
{
  "colorTheme": "light",
  "dateRange": "1D",
  "showChart": true,
  "locale": "en",
  "width": "100%",
  "height": "100%",
  "largeChartUrl": "https://YOUR-SITE.example/tradingview/volatility-100-chart",
  "isTransparent": true,
  "showSymbolLogo": true,
  "showFloatingTooltip": false,
  "tabs": [
    {
      "title": "Volatility",
      "symbols": [
        {
          "s": "DERIV:VOLATILITY_10_INDEX",
          "d": "Volatility 10"
        },
        {
          "s": "DERIV:VOLATILITY_10_1S_INDEX",
          "d": "Volatility 10 (1s)"
        },
        {
          "s": "DERIV:VOLATILITY_100_INDEX",
          "d": "Volatility 100"
        },
        {
          "s": "DERIV:VOLATILITY_100_1S_INDEX",
          "d": "Volatility 100 (1s)"
        }
      ]
    },
    {
      "title": "Boom & Crash",
      "symbols": [
        {
          "s": "DERIV:BOOM_1000_INDEX",
          "d": "Boom 1000"
        },
        {
          "s": "DERIV:CRASH_1000_INDEX",
          "d": "Crash 1000"
        }
      ]
    },
    {
      "title": "Jump & Step",
      "symbols": [
        {
          "s": "DERIV:JUMP_100_INDEX",
          "d": "Jump 100"
        },
        {
          "s": "DERIV:STEP_INDEX",
          "d": "Step Index"
        }
      ]
    }
  ]
}
    </script>
  </div>
  <!-- TradingView Widget END -->
</div>

‍

Step 3: Add your partner button next to the widget, not inside it

Place a button directly under the widget that points to Deriv's TradingView page with your tracking token. Deriv's Partnerships team provides the exact link format for your account — don't construct one from memory.

html

<a href="https://deriv.com/trading-platforms/tradingview?t=YOUR_PARTNER_TOKEN"
   target="_blank" rel="noopener">Trade on TradingView with Deriv</a>

‍

Then test it: open the link in a private window, complete a sign-up on a demo account, and confirm the referral appears in your partner dashboard.

Step 4: Reserve height, write the fallback, test both clicks

Reserve 440–520px for the widget. For the fallback, list the three family names as headings with their instruments as plain links. Test the partner button, and separately test that a row click opens your own page rather than tradingview.com.

Pre-publish checklist:

• Widget renders on desktop, and on a phone in portrait
• Price is moving (Derived indices never close, so a flat value means the feed isn't live)
• Fallback text appears with the TradingView script blocked
• Attribution line is visible and links to TradingView
• Partner button opens Deriv and the referral shows in your dashboard
• Page still makes sense with images and scripts off

Which sources support the Derived Indices watchlist information?

TradingView's own Market Overview widget documentation describes tabs and largeChartUrl exactly as used above, and confirms that largeChartUrl receives a tvwidgetsymbol query parameter identifying the clicked instrument — which is what lets your own chart page preselect the right symbol. As with the other widgets in this series, every symbol listed here was confirmed directly on its own page at tradingview.com.

A Market Overview widget sorts Deriv's Derived index range the way a newcomer actually thinks about it — by family, not alphabetically — and lets you decide where a row click leads. Group your tabs by family, confirm every symbol first, set largeChartUrl to your own chart page, and place your partner link beneath the widget. From here, the next article in this series covers a technical gauge on Volatility 10 (1s), including its caveats.

Market data and widgets are provided by TradingView and are subject to TradingView's terms. Deriv Derived indices are proprietary instruments offered by Deriv; prices shown in a TradingView widget may differ from prices in a Deriv trading account. This article is educational and is not investment advice. Trading CFDs carries a high level of risk.