How to add a Step Index card with TradingView widgets

A Symbol Info + Mini Chart card is a compact, two-part TradingView embed that packs an instrument's current price, its day's change, and a one-day sparkline into a box about the size of a photograph. For a Deriv partner writing a long strategy post, it solves a real trade-off: a post mentioning an instrument a dozen times can't embed a full chart at every mention without becoming heavy, but mentioning it with no visual at all leaves the reader guessing what the price is doing while they read.

This article uses the same card running on this page as the example. You'll learn what the card shows, where it comes from a widget built for stocks, and how to reproduce it inline in your own posts.

What is the Step Index card and why use it?

• A Symbol Info + Mini Chart card packs price, change and a one-day sparkline into a compact box, sized to sit inside a paragraph rather than as a full chart.
• Symbol Info was originally built for stocks — check for blank equity fields (market cap, sector) on a synthetic index, and swap to Single Ticker if they appear.
• Neither widget in the card links to Deriv; both link to tradingview.com without your partner tag, so the partner button sits beneath the card, not inside it.

What are the main Step Index and TradingView components?

• Symbol Info widget — a compact TradingView widget showing an instrument's current price and daily change, originally designed for stocks and their associated fields.
• Mini Chart widget — a compact TradingView widget showing a small sparkline over a configurable date range.
• Step Index — a Deriv Derived index that moves in fixed 0.1 increments, with equal probability of moving up or down at each step.
• Single Ticker widget — the alternative to Symbol Info for instruments without equity-specific data, embedded via embed-widget-single-quote.js.
• dateRange — the Mini Chart option controlling the sparkline's time window, set to "1D" in this example.
• 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.

How does a Step Index card connect the market, chart, and blog post?

1. A reader partway through a long strategy post reaches a paragraph mentioning the Step Index; the inline card shows its price, change and sparkline without breaking the reading flow the way a full chart would.
2. The card stacks two widgets: Symbol Info on top, Mini Chart below. Because Symbol Info was built for stocks, it can show blank rows for equity-specific fields on a synthetic index — which is why you check for this during testing and swap to Single Ticker if needed.
3. Neither widget's own links carry partner attribution; both point to tradingview.com. That's why the partner button sits beneath the card, carrying your Deriv partner link, rather than being expected from the widgets themselves.

Live: Step Index card

‍

Which TradingView widget fits each section of a blog post?

Each widget suits a different amount of reader attention:

‍

What is the difference between a TradingView Symbol Info widget and Single Ticker?

‍

How do you add a Step Index card to a blog post?

Follow this four-step process to embed a compact, two-widget card — Symbol Info plus Mini Chart — for the Step Index inline in your content, with a Deriv partner link placed beneath it.

Why does it matter for your Deriv business? It lets you reference the Step Index's price and movement throughout a long post without repeating a full chart, keeping the reader oriented and the page light.

Step 1: Confirm the page and check how Symbol Info renders

The Step Index symbol page is confirmed. If empty equity fields appear when you test Symbol Info on your synthetic index, swap it for Single Ticker, which uses the same symbol option.

Step 2: Paste both blocks inside one wrapper

Give the wrapper a total height of about 400px so it sits as a card.

html

<div class="tv-card" style="max-width:420px">
  <div style="height:180px">
    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
      <div class="tradingview-widget-container__widget"></div>
      <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-symbol-info.js" async>
{
  "symbol": "DERIV:STEP_INDEX",
  "width": "100%",
  "locale": "en",
  "colorTheme": "light",
  "isTransparent": true
}
      </script>
    </div>
    <!-- TradingView Widget END -->
  </div>
  <div style="height:220px">
    <!-- 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/symbols/DERIV-STEP_INDEX/" rel="noopener nofollow" target="_blank"><span class="blue-text">STEP_INDEX chart</span></a> by TradingView</div>
      <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-mini-symbol-overview.js" async>
{
  "symbol": "DERIV:STEP_INDEX",
  "width": "100%",
  "height": "100%",
  "locale": "en",
  "dateRange": "1D",
  "colorTheme": "light",
  "isTransparent": true,
  "autosize": true,
  "largeChartUrl": ""
}
      </script>
    </div>
    <!-- TradingView Widget END -->
  </div>
</div>

‍

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

Place a button directly under the card 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: Write the fallback and test

Write one sentence describing the Step Index and a link to its TradingView page as the fallback.

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

What sources support the TradingView Step Index widget setup?

TradingView's own Mini Chart widget documentation confirms the available dateRange options and colour settings used in the snippet above. The equity-field caveat on Symbol Info isn't a documented limitation so much as a practical one worth confirming yourself: render the widget on your own synthetic index during testing, and swap to Single Ticker if blank rows for fields like market cap or sector appear.

A Symbol Info + Mini Chart card gives a long strategy post a way to keep referencing the Step Index's price and shape without repeating a full chart at every mention, and the Step Index's fixed, equal-probability steps make that shape legible even at card size. Confirm Symbol Info renders cleanly on your instrument, keep the partner button beneath the card rather than inside it, and ship a one-line fallback. That completes this series: you now have a header tape, a full chart, a comparison, a grouped watchlist, a technical gauge and this inline card — everything needed to assemble a complete Derived indices page, starting from article 1.