Documentation

Install, style, and understand the bar.

Install

Create a site in the dashboard to get your site id, then paste the tag anywhere in your HTML:

<script async src="https://cdn.honorable.app/v1/ticker.js" data-site="YOUR_SITE_ID"></script>

The bar renders in place of the tag and reserves 36 px of height as soon as the script runs. Because the tag is async, it can run after your page first paints; to guarantee zero layout shift, reserve the space yourself:

<div id="honorable-board" style="height:36px"></div>

When that element exists, the bar mounts inside it. Paid lines are always labeled Ad in every display mode.

Attribute	Meaning
`data-site`	Required. Your site id from the dashboard.
`data-position="top"`	Optional. Pins the bar to the very top of `<body>` instead of rendering in place.

That is the whole contract. Themes, labels, speed, and what the bar says are all changed from the dashboard and take effect within 30 seconds. You never re-paste.

Platforms

Ghost: Settings → Code injection → Site header. Add data-position="top" for a top bar.
WordPress: a Custom HTML block where you want the bar, or your theme’s header via a “header and footer scripts” plugin.
Hugo, Jekyll, Astro, Eleventy: your base layout, right after <body> or wherever it should sit.
Squarespace: Settings → Advanced → Code injection (Header) with data-position="top", or a Code block on a page.
Webflow: Project settings → Custom code, or an Embed element.
Carrd: an Embed element set to “code”.
Docusaurus, MkDocs, Sphinx: the base template or the “extra scripts” setting.

Content-Security-Policy

If your site sends a strict CSP, allow the one host the bar talks to:

script-src  'self' https://cdn.honorable.app;
connect-src 'self' https://cdn.honorable.app;

The bar never loads images, fonts, frames, or third-party scripts, so nothing else needs allowing.

Look

Colors: Ink (dark bar, paper text), Paper (light bar, ink text), Ribbon (blue), or your own three hex values.
Label: the small caps prefix, “Honorable mention” by default. Up to 24 characters, or blank to hide it.
Speed: slow, normal, or fast. The bar pauses on hover and has a pause button.
Position: in place, or pinned to the top of the page.

Styles live inside a closed Shadow DOM: your CSS cannot restyle the bar and the bar cannot restyle your page. The host element is a plain <div data-honorable="…"> that you can position or hide with your own CSS if you need to.

Displays & visitor controls

The same tag can render four machines. Pick one in the dashboard; it changes on your site within 30 seconds.

Ticker: the scrolling line. Pauses on hover and with the pause button.
Split-flap: a departures board. Messages are paged to the width of the bar, and every changed letter spins through a few characters before landing. Uppercase, like the real thing.
LED dots: a dot-matrix sign drawn on a canvas, lit in your accent color, scrolling at your speed. Browsers without a 2D canvas get the ticker instead.
Tiles: a letter board of square tiles; each page arrives as a wave of flips.

Colors. Three values do everything: the bar, the text, and the accent (label, LED dots, tiles). Use a preset or your own hex colors.

Visitor controls. Two switches add small buttons to the bar: one cycles the display, the other cycles your palettes. This makes the bar something readers can play with, within limits you set. Their choice lasts one page view; nothing is written to their browser, in keeping with the privacy promise.

Under prefers-reduced-motion, every display shows one message at a time with no spinning, scrolling, or waves.

The bar is a role="marquee" region labeled with your label text.
Motion pauses on hover and via a pause/play button with proper aria-pressed state.
Visitors with prefers-reduced-motion get a static rotation: one line at a time, swapped every seven seconds, no scrolling.
Every theme meets WCAG AA contrast for its text.

Privacy & data

The bar makes two kinds of requests, both to cdn.honorable.app:

GET /v1/s/<site> — fetches what to show. Public, cached, no credentials.
POST /v1/e — one beacon when the bar has been at least half visible for one second (a viewable impression), and one per click. The payload is your site id and the line ids. We check the request’s Origin header against your registered domain, then discard it.

No cookies, no local storage, no identifiers, no IP addresses stored. Counts are aggregated per day. This keeps you outside consent-banner territory in most jurisdictions, but you know your own obligations best.

The exchange

Turn it on per site. Your bar then carries up to three mentions of other members’ sites, and your mention scrolls on theirs.
Your mention is one line and a link, and it goes into review before it appears anywhere. Edits go back into review.
Mentions rotate every hour so everyone gets a turn. Fairness by balance (show more, be shown more) is coming.
Mentions link with rel="nofollow"; the point is readers, not PageRank.
Leaving is one switch. Your mention stops everywhere within the hour.

Sections: banner, card, hero

Beyond the line, the same tag can fill sections you control from the dashboard. Create one, then put its placeholder where it should sit:

<div data-honorable-slot="SLOT_ID" style="height:120px"></div>

Banner (120 px): headline, a sentence, a button, optional image on either side.
Card (300 px): image on top, title, text, link. Fits a sidebar or a grid cell.
Hero (360 px): large type with an image beside or behind it.

Heights are fixed so nothing on your page moves. Images are uploaded to Honorable and served from our storage, never hot-linked from elsewhere, because a hot-linked image is a tracking pixel. The section renderer loads only on pages that have a placeholder, so the loader stays small. Sections are yours alone: the exchange and sponsored lines never appear in them.

API & integrations

The payload the bar renders is public JSON: GET https://cdn.honorable.app/v1/s/<site>. It contains v, theme, label, speed, position, an items array of { id, text, href, kind }, and slots. You can render it yourself if you prefer, but only the official loader counts impressions.

Board API

Create a token in the dashboard (Integrations). Then:

POST https://cdn.honorable.app/v1/line
Authorization: Bearer hb_k_…
Content-Type: application/json

{"text": "New issue is out", "href": "https://yoursite.com/12", "ttl": 604800}

GET /v1/line returns the current line(s); DELETE /v1/line turns the line off. One update every 10 seconds per site; ttl (seconds) expires the line automatically. Changes are live within 30 seconds.

Webhook

A second kind of token gives you a URL that accepts a plain-text body, so Zapier, Make, n8n, Apple Shortcuts, Home Assistant, or a GitHub Action can post a line with no field mapping. A trailing https:// link becomes the link.

curl -X POST https://cdn.honorable.app/in/hb_w_… --data "Order #1042 shipped https://yoursite.com/orders"

Google Sheets

Publish a sheet to the web as CSV and paste the link in the dashboard; row 1 (or row 2 under a header row) is read every five minutes with the columns text, link, start, end. For instant updates, add the Apps Script shown in the dashboard, which posts to your webhook on every edit.

Slack

With the Honorable Slack app, /board link <API token> connects a channel to a board; then /board set Your line https://link, /board clear, and /board status.

Removing it

Delete the tag. Or pause the site in the dashboard, which makes the bar collapse to nothing on the next page load. Deleting a site deletes its lines and its numbers.