Skip to content
TraderWaves Just Got a New Look and More Powerful ChartsNew Look. More Powerful Charts.
TraderWaves
MARKET SESSIONS WIDGET

Free forex market sessions widget

A live world map of the four forex sessions. Visitors see which markets are open, when the next one opens or closes, and when sessions overlap.

Pick light or dark, the language and the time zone the clock shows. The map keeps itself up to date in the visitor’s browser.

  • Live open and close countdowns
  • Session overlaps at a glance
  • Any time zone, 37 languages

Configure your market sessions widget

Options

ThemeLight or dark, to match your site.
LanguageEnglish by default. "Visitor’s browser language" follows each visitor.
Transparent backgroundLet your page background show through.
HeightAuto fits the content. A fixed height is 120–2000 px.
Time zoneEach visitor’s own zone by default, or one fixed zone.

Preview

Embed snippet

Paste it where the widget should appear. Keep the TraderWaves link as it is.

<div class="traderwaves-widget" data-widget="session-map">
  Market sessions by <a href="https://traderwaves.com/?utm_source=widget&utm_medium=embed&utm_campaign=session-map" rel="noopener" target="_blank">TraderWaves</a>
</div>
<script async src="https://traderwaves.com/app/embed/v1/loader.js"></script>

Prompt for your AI assistant

Paste it into ChatGPT, Claude or your site builder’s assistant to add the widget for you.

Add the TraderWaves market sessions widget to my website.

Here is the exact embed snippet:

```html
<div class="traderwaves-widget" data-widget="session-map">
  Market sessions by <a href="https://traderwaves.com/?utm_source=widget&utm_medium=embed&utm_campaign=session-map" rel="noopener" target="_blank">TraderWaves</a>
</div>
<script async src="https://traderwaves.com/app/embed/v1/loader.js"></script>
```

Rules:
- Paste the snippet unchanged: keep every class and data-* attribute as written.
- Keep the <a> link to TraderWaves exactly as it is: same text, same href and same rel. Leave it visible, and do not add rel="nofollow", "sponsored" or "ugc". It is the condition for using the widget for free.
- Load the loader script once per page, even when the page shows several widgets.
- Do not wrap the widget in an <iframe> of your own. The loader creates its frame.
- Put the widget where it can take the width of its column. It adapts to narrow sidebars.

How to add it, by platform:
- Plain HTML: paste the <div> where the widget should appear and the <script> once, before </body>.
- WordPress: use a Custom HTML block (or your page builder’s HTML widget), not a Paragraph block, which strips the script.
- React or Vite: render the <div> as JSX (use className instead of class and keep the data-* attributes), and add the loader script once: in index.html, or from a useEffect that appends it if it is not on the page yet.
- Next.js (App Router): render the <div> in the page or component, and load the script once in the root layout with next/script and strategy="afterInteractive".
- Other site builders (Webflow, Wix, Squarespace and similar): use their custom code or embed element and paste the full snippet.

If it is not clear where on my site the widget should go, ask me before you change anything.

When you are done, check that:
1. The page shows the market sessions widget.
2. The TraderWaves link is in the page, inside the widget container, with rel="noopener": in View source for a plain HTML or WordPress page, or in the browser's element inspector when the site renders in the browser (React, Vite).
3. The loader script appears only once on the page, and widgets added later (another tab or a client-side page change) still appear.
QUESTIONS, ANSWERED

Market sessions widget questions.

Which sessions does the map show?

Sydney, Tokyo, London and New York, with daylight saving handled for each market. The map highlights the sessions that are open now and counts down to the next change.

Which time does the widget show?

Each visitor’s own time zone by default. You can fix one zone instead, for example when your audience follows London time.

Are the widgets really free?

Yes. Every widget is free on any website, with no API key, account or usage limit for your visitors. The one condition is the small TraderWaves link under each widget, which must stay visible and unchanged.

Why does the widget carry a TraderWaves link?

The link is how the widget stays free. It sits in your page’s own HTML under the widget, points to traderwaves.com, and cannot be turned off. Keep its text, address and rel attribute as they are.

Where does the data come from, and how fresh is it?

The economic calendar uses the same event data as the TraderWaves app, refreshed throughout the day, with actual, forecast and previous values as they are released. The session widgets run in the visitor’s browser from each market’s trading hours, so they are always current.

Does it work with WordPress, React or Next.js?

Yes. The snippet is plain HTML, so it works on any site that lets you add custom HTML: a WordPress Custom HTML block, a page builder’s HTML element, React or Vite, Next.js, Webflow and others. Each widget page also gives you a prompt that tells an AI assistant exactly how to add it.

Will it slow my page down or track my visitors?

The loader is a small script that loads after your page. Each widget runs in its own frame from traderwaves.com, with no cookies and no third-party trackers. We count how often widgets load and how often their link is clicked, never who your visitors are.

More free widgets

Free Forex Market Sessions Widget | TraderWaves