How to embed a live Volatility 100 (1s) chart on your website

A TradingView Advanced Chart widget is an embeddable, live price chart that you place directly on your own site, so a visitor sees a real, moving market without leaving your page. For a Deriv partner writing about Derived indices, that matters because most articles describe a chart in words and then send the reader elsewhere to see it — and a reader who leaves is a reader you may not get back.

This article uses Deriv's Volatility 100 (1s) Index as the example, because it's the instrument most partners commonly write about. It ticks every second and trades 24 hours a day, seven days a week, so there's always movement on your page, whatever time a reader lands.

You'll learn what the widget can and cannot do, which indicators are better suited to Derived indices, and how to embed it alongside your own Deriv partner link.

What are the key steps to embed a live volatility chart?

• An embedded Advanced Chart widget keeps readers on your page instead of sending them to TradingView to see the market you're describing.
• Volatility 100 (1s) is a strong first instrument: it updates every second, runs 24/7, and is the index most partners already write about.
• The widget is for analysis only. Trading happens on tradingview.com once the reader connects a Deriv account, so a partner button belongs directly under the embed, not inside it.
• Volume-based, session-base d, gap-based, and fundamental indicators don't apply to Derived indices. Bollinger Bands, RSI/Stochastic, and ATR do, with caveats.
• No TradingView account and no approval from Deriv are needed to embed the widget — you just need your Deriv partner link.

Which platforms, symbols, and widgets are involved?

• TradingView Advanced Chart widget — an embeddable, interactive price chart from TradingView that supports candlesticks, multiple timeframes, indicators, and drawing tools.
• Volatility 100 (1s) Index — a Deriv-derived index with a constant 100% annualised volatility target, generating a new price every second, 24 hours a day.
• Derived indices — Deriv's proprietary synthetic instruments, priced independently of any real financial market, available to trade around the clock.
• 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.
• allow_symbol_change — a widget configuration option that controls whether a site visitor can switch the embedded chart to a different instrument.
• Attribution line — the "by TradingView" credit and link that must remain visible under an embedded widget, per TradingView's terms.

Live: Volatility 100 (1s) Index

This is the real TradingView widget, not a screenshot. Change the timeframe, add an indicator from the toolbar, draw on it. Everything you do here, your clients can do on your page.

‍

How do TradingView widgets, symbols, and partner links work together?

The pieces work together in a set order, and each step depends on the one before it:

1. A reader lands on your article and sees the Volatility 100 (1s) Index moving inside a TradingView Advanced Chart widget, embedded directly on your page.
2. Because the widget is for analysis only, it cannot process a trade — so a Deriv partner CTA sits directly beneath it, not inside it.
3. The reader clicks that CTA, which carries your Deriv partner link, and is taken to Deriv's TradingView page to connect an account.
4. Once the reader trades, the referral is attributed to you through the partner link — a step the widget's own internal links (which point back to tradingview.com) cannot perform.

Not every TradingView indicator is meaningful on a Derived index, and the answer differs by instrument family:

‍

Rule of thumb: Indicators that rely on volume, trading sessions, gaps, or fundamentals are generally not well suited to Derived indices. Indicators based on recent price movement tend to be more applicable.How to embed a TradingView widget on your website.

How to embed a TradingView chart on your website

Follow this four-step process to add a live TradingView Advanced Chart of a Deriv Derived Index to your own page, with your Deriv partner link attached.

Why does it matter for your Deriv business? A reader who watches the market you're describing on your own page is more engaged and more likely to act on the CTA next to it than a reader you send away to see the same thing.

Step 1: Pick the instrument and confirm the symbol

Derived indices on TradingView use the DERIV: prefix. Confirm a symbol exists before you embed it by opening https://www.tradingview.com/symbols/DERIV-SYMBOL/. If the page loads with a chart and a "Get widget" link, the symbol is embeddable.

Step 2: Paste the embed

Keep the attribution line — it's a condition of using the widgets. Set the wrapper's height in your CSS, because autosize fills whatever height the parent has. hide_volume is switched on because Derived indices have no volume; a tick-count histogram would only mislead readers.

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/symbols/DERIV-VOLATILITY_100_1S_INDEX/" rel="noopener nofollow" target="_blank"><span class="blue-text">VOLATILITY_100_1S_INDEX chart</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js" async>
{
  "autosize": true,
  "symbol": "DERIV:VOLATILITY_100_1S_INDEX",
  "interval": "5",
  "timezone": "Etc/UTC",
  "theme": "light",
  "style": "1",
  "locale": "en",
  "allow_symbol_change": false,
  "calendar": false,
  "hide_volume": true,
  "support_host": "https://www.tradingview.com"
}
    </script>
  </div>
  <!-- TradingView Widget END -->
</div>

‍

"interval" accepts 1, 5, 15, 60, 240, D, W. "style" 1 is candles, 3 a line, 8 Heikin Ashi. Add "studies": ["RSI@tv-basicstudies"] to preload an indicator — but only one from the "use" column of the table above.

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 space, add a fallback, then check it on a phone

Give the wrapper a fixed height so the page doesn't jump when the chart arrives. Behind the widget, write two or three sentences describing the instrument and linking to its TradingView page, so the article still works if the widget doesn't load. Then open your page on a phone — if the chart is shorter than about 340px, the toolbar swallows it.

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 TradingView chart embed instructions?

TradingView's own Advanced Chart widget documentation confirms that the autosize parameter fills whatever height and width its parent container provides — which is exactly why setting a fixed-height wrapper in your own CSS, as in step 2, is necessary rather than optional. The symbol table above reflects pages checked directly on tradingview.com, not a third-party list, so it's worth re-confirming any symbol you haven't embedded before at its own tradingview.com/symbols/DERIV-SYMBOL/ page, since availability can change.

Embedding a TradingView Advanced Chart widget turns Volatility 100 (1s) from something you describe into something your reader can watch move, on your own page, every second of every day. Use the correct symbol, keep the widget for analysis only, place your Deriv partner link next to it rather than inside it, and include a fallback in case the script is blocked. From there, the same four steps apply to any Derived index — explore the rest of this series to extend the approach to a ticker tape, a watchlist, and other instruments.

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.