How to add a Derived indices ticker tape for live market data

A TradingView Ticker Tape widget is a horizontal strip that shows live price and change for a list of instruments, scrolling or static, across the top of a page. For a Deriv partner, it's a way to put your site's least-used space to work: the header is the most-seen part of any page, and most partner sites leave it static.

Adding a tape of Derived indices does two jobs at once. It shows a reader who came for one instrument — Volatility 100, say — that Deriv's synthetic range is a family, not a single product. 

This article uses the same symbol tape running as the example. You'll learn what the widget shows, where it stops, and how to add it to your own header in four steps.

What should you know about the Derived indices ticker tape?

• A Ticker Tape widget shows live price and change for instruments in one strip, ideal for a site header.
• Adding Derived indices tells a reader in one glance that the range extends beyond whichever instrument brought them to your page.
• The tape only shows price and change — no chart, no timeframe — and its own tiles link to tradingview.com without your partner tag.
• Use Deriv's product names (for example "Volatility 100 (1s)") as the tile titles, not raw TradingView symbols, so readers recognise them.
• Setup takes about ten minutes: paste the embed, set your symbol list, add a partner button underneath, then test on a phone.

Understanding key terms

• TradingView Ticker Tape widget — an embeddable horizontal strip that displays live price and percentage change for a configured list of instruments.
• Symbol list — the widget's symbols array, where each entry pairs a proName (the TradingView symbol) with a title (the label a reader sees).
• displayMode — the configuration option that sets the tape's layout: adaptive (responsive), regular (scrolling), or compact (a tighter static row).
• Derived indices family — Deriv's proprietary synthetic instruments, spanning the Volatility, Boom/Crash, Jump and Step groups, all tradable 24/7.
• 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.
• Attribution line — the "Track all markets on TradingView" credit and link that must stay visible under the embedded tape, per TradingView's terms.

Live: eight Derived indices

‍

‍

How do the Derived indices, symbols, and ticker tape relate?

1. A reader lands on any page of your site and sees the ticker tape in the header, showing live price and change for different Derived indices at once.
2. The breadth of the tape (Volatility, Boom/Crash, Jump, Step side by side) shows the reader the range of instruments available, even if the article itself only discusses one.
3. If the reader clicks a price tile, they're taken to tradingview.com — that click carries no partner attribution, because it's a widget-internal link.
4. If the reader clicks the partner button placed beneath the tape instead, the link carries your Deriv partner link, and any resulting sign-up or trade is attributed to you.
5. On a narrow screen, adaptive mode collapses the tape into a scroller and shows fewer tiles at once.

What is the difference between a TradingView Ticker Tape widget and an Advanced Chart?

The two widgets in this series serve different purposes, and most partner sites benefit from using both:

‍

Which display mode works best for a live Derived indices ticker tape?

‍

How do you add a ticker tape widget to your website header?

Follow this four-step process to embed a live TradingView Ticker Tape of eight Deriv Derived indices in your site header, with a Deriv partner link placed beneath it.

Why does it matter for your Deriv business? A header that shows real, moving prices signals — before the reader has read a word — that your site covers markets that never close, and it does so on every page, not just the one the reader landed on.

Step 1: Copy the block into your header template

Place it above the navigation or directly below it.

html

<div style="height:46px">
  <!-- 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-ticker-tape.js" async>
{
  "symbols": [
    {
      "proName": "DERIV:VOLATILITY_10_INDEX",
      "title": "Volatility 10"
    },
    {
      "proName": "DERIV:VOLATILITY_10_1S_INDEX",
      "title": "Volatility 10 (1s)"
    },
    {
      "proName": "DERIV:VOLATILITY_100_INDEX",
      "title": "Volatility 100"
    },
    {
      "proName": "DERIV:VOLATILITY_100_1S_INDEX",
      "title": "Volatility 100 (1s)"
    },
    {
      "proName": "DERIV:BOOM_1000_INDEX",
      "title": "Boom 1000"
    },
    {
      "proName": "DERIV:CRASH_1000_INDEX",
      "title": "Crash 1000"
    },
    {
      "proName": "DERIV:JUMP_100_INDEX",
      "title": "Jump 100"
    },
    {
      "proName": "DERIV:STEP_INDEX",
      "title": "Step Index"
    }
  ],
  "showSymbolLogo": true,
  "isTransparent": true,
  "displayMode": "adaptive",
  "colorTheme": "light",
  "locale": "en"
}
    </script>
  </div>
  <!-- TradingView Widget END -->
</div>

‍

Set "displayMode": "regular" for a scrolling tape, or "compact" for a tighter static row.

Step 2: Replace or reorder symbols

Every entry needs a proName (the TradingView symbol) and a title (what readers see). Confirm each symbol's page exists on tradingview.com before adding it — the same check described in article 1 of this series.

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 and test on a phone

Give the wrapper a fixed height of 46–72px so the header doesn't jump when the tape loads. Behind it, list the instrument names as plain links to their TradingView pages — that's your fallback. If the tape scrolls, check that it doesn't fight with the page's own scroll.

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

Where can you verify Volatility indices and Deriv market data?

TradingView's own Ticker Tape widget documentation sets out the three displayMode options used above and confirms that adaptive mode is designed to adjust tile count to the available width. As with the Advanced Chart widget in article 1, every symbol listed here was confirmed directly on its own page at tradingview.com, not taken from a third-party list.

A Ticker Tape widget turns a site's most-seen, least-used space — the header — into a live signal that Deriv's Derived indices trade around the clock, across a whole family of instruments rather than one. Use Deriv's product names as titles, place your partner link beneath the tape rather than inside it, and ship a fallback for when the script is blocked. From here, the next article in this series shows how to use a comparison chart to illustrate the asymmetry between Boom 1000 and Crash 1000.

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.