Skip to content
traffic.cx

Explore traffic.cx

Already have an account?Log in

Custom widget templates with HTML, CSS and placeholders

Write a traffic.cx widget in your own HTML and CSS with placeholders for live visitors, totals, lists and the ticker, and save it for every site in your team.

Updated 5 November 20264 min read

Code mode lets you write a widget in your own HTML and CSS. You put placeholders such as {{visitors}} where the numbers go, and traffic.cx fills them in, every time the widget draws. Code mode and saved templates are on paid plans. For the basics of making and embedding a widget, start with Embed a widget.

Switch to code mode

  1. Open a widget in the builder and choose the Code tab.
  2. Turn on code mode. The boxes start with a small example that shows a live dot, the live count, visitors for the period and a chart.
  3. Edit the HTML and CSS. The preview redraws as you type, and the builder lists any unknown placeholder or unclosed list beside the box, with a suggestion when you've made a typo.
  4. Choose Save.

The widget's period and number style still come from the Numbers tab: choose there which period {{visitors}} covers and whether it reads 48.2k or 48,210.

Placeholders

Each placeholder becomes one value, as text. Values are escaped before they go in, so a page title can never add markup to your widget.

PlaceholderBecomes
{{live}}People on the site now (a pageview in the last 5 minutes)
{{visitors}}Unique visitors in the period
{{visits}}Visits in the period
{{pageviews}}Pageviews in the period
{{revenue}}Revenue in the period, in your site's currency. Needs Share revenue on
{{change.visitors}}The change against the previous period of the same length, such as +12%. Also {{change.visits}}, {{change.pageviews}} and {{change.revenue}}
{{period}}The period's name: "today", "last 30 days", "this month"…
{{site}}The site's name
{{milestone}}The last round number of visitors passed, such as 25,000

Lists

A list repeats the HTML between its opening and closing tags once per row, up to five rows:

html

<ul>
  {{#each top_pages}}
    <li>{{name}}: {{visitors}}</li>
  {{/each}}
</ul>
ListNames you can use inside
top_pagesname (the page's path), visitors
top_countriesname (the country, with its flag), visitors
top_sourcesname (the source, such as Google), visitors
tickercountry, page, source, ago ("just now", "2 min ago")

The ticker follows the same privacy rules as the ticker template: countries only, pages and sources only when you switch them on in Numbers, and nothing while fewer than 3 people are on the site. See what a widget shares.

traffic.cx elements

Three elements draw things you can't write in plain HTML:

ElementDraws
<tcx-live-dot></tcx-live-dot>The breathing green live dot
<tcx-sparkline></tcx-sparkline>A small line chart of daily visitors for the period
<tcx-branding></tcx-branding>The traffic.cx link, where you place it. On the Free plan it's added at the end if you leave it out; on paid plans you can switch it off

What HTML and CSS are allowed

Your widget draws inside its own sealed box (a Shadow DOM), so your CSS can't change the rest of the page, and the page's CSS can't break your widget. What you write is cleaned when you save and again every time it draws.

  • Allowed tags: div, span, p, a, strong, em, b, i, small, br, hr, h1 to h6, ul, ol, li, figure, figcaption, section, header, footer, img, simple SVG (svg, g, path, circle, rect, line, polyline), and the three traffic.cx elements.
  • Allowed attributes: class, id, title, alt, role, aria-*, width, height and SVG drawing attributes. Links must use https: or mailto:, and images https:.
  • Removed: scripts, <style> inside the HTML, iframes, forms and inputs, on… event attributes, javascript: and data: links, and the style attribute. Put your styles in the CSS box.
  • CSS: no @import, no url() except https:, and no expression().

JavaScript never runs in a widget, whatever you write.

Save it as a template

Choose Save as a template in the builder to keep a design in your team's library, up to 20. It then appears at the top of the gallery, for every site in the team.

A saved template is a copy: editing it later doesn't change widgets already made from it, and changing a widget doesn't change the template. Delete a template from the gallery when you no longer need it.

On the Free plan

If a paid team moves to Free, its code-mode widgets stay up: they fall back to the look of the template they started from, and the traffic.cx link comes back. Upgrade again and your HTML and CSS return as you left them.