Skip to content

JavaScript embed

The JavaScript embed is the normal way to put a ticker on a page. It works on any site that lets you paste a <script> tag: a CMS, a static site, a landing page builder.

Copy it from the ticker’s Embed dialog; it already carries the right ticker id.

<script defer
src="https://cdn.livetickr.io/embed.js"
id="livetickr-feed"
data-ticker-id="YOUR_TICKER_ID"></script>

Paste it into your page where the feed should appear. The script renders the ticker in place of the tag, so its position in the markup is the position on the page.

Attribute What it does
src Loads the embed script, and tells it which host to fetch the feed from. Both come from the same origin, which is what keeps the embed cookieless.
id livetickr-feed, by convention. The script does not look itself up by this id, so a different one breaks nothing; keeping it makes the tag recognisable in a page full of other scripts.
data-ticker-id Which ticker to show.
defer Lets the page finish parsing first. The embed never blocks your page.
data-max-width Optional. Caps how wide the feed renders. See below.

Do not change src by hand. Whichever host serves embed.js also serves the feed behind it, so a hand-edited URL breaks both halves at once.

Left alone, the feed takes the full width of the element you pasted the snippet into. data-max-width caps it:

<script defer
src="https://cdn.livetickr.io/embed.js"
id="livetickr-feed"
data-ticker-id="YOUR_TICKER_ID"
data-max-width="800"></script>
Value Result
omitted Full width of the element you pasted the snippet into. This is the default.
auto or none Same as omitting it: no cap.
800 800 pixels.
800px 800 pixels. Same as 800.
80% 80% of the surrounding element’s width.

Three things worth knowing about how it behaves.

It is a maximum, not a fixed width. data-max-width="800" inside a 300 pixel column renders at 300 pixels, not 800, so a value chosen for your desktop layout will not overflow on a phone.

A capped feed centres itself in the space available. At full width there is nothing to centre.

An unusable value is ignored, and the feed falls back to full width. The browser console names the value that was rejected. Only plain numbers, px and % are accepted; units like vw, em and rem are not.

The script loads the most recent 10 updates and renders them. Load more adds 10 at a time.

It then re-checks the feed on a cadence the server decides and sends with every response, so the interval can be tuned without anyone touching a snippet. A live ticker is currently re-checked about every half minute. A closed one, whose event is over, far more rarely: nothing can be written to it any more, and its page may stay online for years.

A new update you publish therefore appears on every page that embeds the ticker within that window, with no rebuild and no cache to clear on your side.

Nothing is written to the reader’s browser for the feed itself: no cookie is set, and readers are not identified across pages or devices.

If an update embeds a post from somewhere else, a tweet or a video, that content is not loaded straight away. The reader sees a placeholder, and the third party is contacted only once they opt in.

The opt-in covers the whole feed, is remembered in the reader’s own browser, and can be switched back off. This is on by default; a workspace can turn it off in its appearance settings, in which case third-party content loads immediately.

A workspace has to register the domain its tickers are embedded on. Until it has, no feed is served anywhere, and the Embed dialog withholds the snippet rather than hand out code that provably renders nothing.

A workspace admin registers it under Workspace settings → General. From then on the feed renders on that domain and on all of its subdomains. Anywhere else, the snippet renders a short notice instead of the feed and records no statistics, so one snippet cannot be lifted onto another site.

localhost and 127.0.0.1 always render, registered domain or not, so you can build the integration before any domain exists and keep a local copy of your site working.

During the beta a workspace can register two domains: the live site, plus one more for a staging or preview host that is not a subdomain of it. Subdomains need no slot of their own, and a domain we grant on request does not count against the allowance.

Registration is write-once. There is no self-service edit or removal, which is what keeps one subscription from being walked from site to site a month at a time. A correction or a third domain goes through support; every change is kept in the workspace’s domain history either way.

If the embed renders a single line of grey text instead of the feed, the domain check answered it, and which sentence it is says what to do. (The one other notice a reader can meet, for a ticker that was withdrawn, is further down.)

Notice What it means
This ticker’s workspace has no domain registered yet. Nothing is registered. Register the domain under Workspace settings → General and the feed appears.
This ticker isn’t authorised on this domain. A domain is registered, but this is not it, nor a subdomain of it. Check for a typo, and remember that a genuinely different host needs its own registration.
This preview runs in a sandboxed frame, which has no domain to authorise. The page sits in a sandboxed iframe, as some CMS previews and online code editors do. Such a frame has no domain to check against. The same snippet works on the published page.

If nothing renders at all, it is almost always one of three things:

The ticker is still a draft. Drafts are not served, that being what draft means, so the snippet is correct and there is simply nothing to show. Set the ticker live.

The ticker id is wrong. A mistyped or non-existent id answers 404, and embed.js says so in the browser console. Copy the snippet from the Embed dialog again rather than editing it by hand.

The ticker was taken offline. A ticker that was live and is now back to draft answers 410, not 404, and readers see a short “no longer available” notice instead of an empty space. If that was not intentional, set it live again.

The distinction matters when you are debugging: 404 means the snippet is wrong, 410 means the snippet is right and the feed was withdrawn.