Embed a traffic.cx widget on your website
Put live visitors, visit counts, charts and a revenue badge on your own site, in any website builder or a GitHub README. Steps for each platform.
A widget is a small, live box of your traffic.cx numbers that you place on your own website: "12 people here now" in a header, "48,210 visits this month" in a footer, a chart on a public stats page, or a visitors badge in a GitHub README. For an overview, see the widgets feature page or browse every widget.
Before you start
- The tracker on your site. Widgets show the numbers the traffic.cx tracker records. Install it first; a widget on a site with no visits shows zeros.
- A role that manages the site. Owners and admins make, change and delete widgets. Everyone else on the team can see them and copy their code.
- Revenue, for the revenue badge. Connect your payments if you want to show revenue.
1. Make a widget
- Open your site in the dashboard and choose Widgets in the sidebar, under the site's pages.
- Choose New widget and pick a template. Each card shows it with your site's real numbers.
- Change it in the builder. The preview beside it is exactly what visitors will see:
- Numbers: what to show and over which period (today, last 7 days, last 30 days, this month, this year or all time).
- Style: theme (Auto follows the visitor's light or dark setting; Page has no background and takes your page's text colour), accent and text colours, background, size, corners, shadow and font. By default a widget uses your page's font.
- Layout: add, remove and reorder the blocks: numbers, labels, the live dot, a chart, a list or an icon.
- Visibility: pause the widget, or limit the sites it may appear on.
- Choose Save. The widget gets a permanent ID that starts with
wgt_.
Changes you save later reach every page that shows the widget within about a minute. You don't need to touch your site's code again.
2. Copy its code
Choose Embed on the widget. The dialog has a tab for each platform with the exact code and where to paste it. There are three kinds:
| Kind | Looks like | Use it for | Updates |
|---|---|---|---|
| Script | <script async src="https://traffic.cx/widget.js" data-widget="wgt_…"></script> | Any site that lets you paste HTML | Live counts about every 15 seconds while on screen; totals every minute |
| iframe | <iframe src="https://traffic.cx/embed/#wgt_…" …></iframe> | Builders that only allow iframes, such as Notion | The same as the script |
| Image | https://api.traffic.cx/w/wgt_….svg | GitHub READMEs, docs, Markdown, emails and forums | When the image is reloaded; GitHub refreshes images every few minutes |
The image works for the live pill, the visit counter, the revenue badge and the README badge. The README badge is only an image.
3. Paste it on your site
The script draws the widget where you paste the tag. It loads without slowing the page, and if anything goes wrong it leaves the space empty instead of showing an error.
HTML
Paste the script tag where the widget should appear.
Several widgets on one page
Load the script once, before </body>, without data-widget. Then place <div data-tcx-widget="wgt_…"></div> wherever each widget goes. Each widget has its own div.
React and Next.js
Add the script once in your root layout. In Next.js, use <Script src="https://traffic.cx/widget.js" strategy="afterInteractive" /> from next/script. Then render <div data-tcx-widget="wgt_…" /> wherever the widget goes. The script finds widgets your app adds later by itself, so client-side navigation works.
WordPress
In the block editor, add a Custom HTML block where the widget goes, paste the script tag and update the page.
Webflow
Drag an Embed element (Add panel → Components) where the widget goes, paste the script tag, save and publish.
Framer
Insert an Embed component, choose HTML and paste the script tag. The widget shows in preview and on the published site.
Shopify
In Online Store → Themes → Customize, add a Custom Liquid section or block, paste the script tag and save.
Wix, Squarespace and Ghost
- Wix: Add → Embed code → Embed HTML.
- Squarespace: a Code block.
- Ghost: an HTML card.
Paste the script tag and publish.
Notion and other iframe-only builders
Use the iframe from the Embed dialog. In Notion, type /embed and paste the address from the iframe's src. Change the height if the widget needs more room.
GitHub and Markdown
Paste the Markdown line from the Embed dialog into your README. It links the badge to traffic.cx:
markdown
[](https://traffic.cx/?ref=widget)Change, pause or delete a widget
The Widgets page lists every widget on the site. From there you can open one in the builder, copy its code, duplicate it, pause it, or delete it.
- A paused widget shows nothing until you resume it.
- A deleted widget disappears from every page within about a minute and leaves an empty space, never an error.
- Widgets also show nothing while the site is paused or locked.
Limit where a widget appears
Under Visibility, list the sites a widget may appear on, one per line (example.com, or *.example.com for its subdomains). Leave it empty to allow anywhere. The script and the iframe refuse to draw on other sites.
This stops someone casually showing your widget on their own site. The numbers are still public by your choice, because anyone can ask for them, so don't treat it as a way to hide them.
What a widget shares
- Totals only. Counts, a daily chart and top-five lists of pages, countries or sources. Never anything about one visitor.
- Only what you pick. Nothing is public until you make a widget and choose its numbers. Revenue stays hidden until you switch on Share revenue for that widget.
- The activity ticker names the country of people arriving, never the city, region, device or browser. Pages and sources are off unless you switch them on; even then it only names pages with at least 5 visitors in the last 30 days, and never pages you exclude (
/account*,/admin*,/checkout*,/login*and/reset*by default). It stays empty while fewer than 3 people are on the site. - No cookies, no storage. The widget sets no cookies, stores nothing in the browser and sends nothing about the person viewing it. Their browser only asks traffic.cx for the numbers. You don't need a cookie banner for a widget.
Widget requests go through Cloudflare, like the rest of traffic.cx. See the privacy notice.
The revenue badge
The revenue badge shows revenue for the widget's period, after refunds, in your site's currency, rounded ($12.4k) unless you choose exact numbers. It reads the same payments as your Revenue report. It needs Share revenue switched on, and the builder reminds you that anyone who sees the widget sees the number.
Plans
Widgets are on every plan.
| Free | Paid | |
|---|---|---|
| Templates, restyling, the visual builder and all three kinds of code | Yes | Yes |
| Widgets per site | 3 | 20 |
| Periods | Up to this month | Also this year and all time |
| The small traffic.cx link | Always shown | Can be removed |
| Your own HTML and CSS (code mode) | No | Yes |
| Saved templates for every site in the team | No | Up to 20 |
The traffic.cx link is marked nofollow, so it never passes search ranking from your site. If a paid team moves to Free, its widgets stay up: the link comes back, and code-mode widgets fall back to their nearest template's look, with a note in the builder. See plans and limits.
Troubleshooting
- Nothing shows. Check that the widget isn't paused and that the site you pasted it on is in its Visibility list, if it has one. Builders that strip scripts need the iframe instead.
- It shows zeros. The tracker hasn't recorded visits for the period yet. Verify the tracker.
- A change hasn't appeared. Saved changes take up to a minute to reach your site. GitHub can take a few minutes more to refresh a README badge.
- It doesn't match my page. Choose the Page theme under Style, so the widget has no background and takes your page's text colour, or set the colours yourself.