Free trading session timeline widget
The four major trading sessions on one 24-hour timeline, with the overlaps and a marker for the current time. Compact enough for a sidebar.
Choose light or dark, the language and a fixed height if your layout needs one.
- One glance at the trading day
- Fits narrow columns
- Light, dark or transparent
Configure your session timeline widget
Options
Preview
Embed snippet
Paste it where the widget should appear. Keep the TraderWaves link as it is.
<div class="traderwaves-widget" data-widget="session-timeline"> Session timeline by <a href="https://traderwaves.com/?utm_source=widget&utm_medium=embed&utm_campaign=session-timeline" 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 session timeline widget to my website. Here is the exact embed snippet: ```html <div class="traderwaves-widget" data-widget="session-timeline"> Session timeline by <a href="https://traderwaves.com/?utm_source=widget&utm_medium=embed&utm_campaign=session-timeline" 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 session timeline 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.
Session timeline widget questions.
Which time does the timeline use?
The timeline is drawn in UTC (GMT), so the bars line up the same for every visitor, with a marker at the current time.
Will it fit in my sidebar?
Yes. The timeline adapts to narrow columns and grows to the width you give it.
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.