Announcement bar element

<hype-announcement-bar> is a full-width message strip that Hype injects at the top of <body>. It takes all of its content from attributes, so it is the one campaign element you can create entirely from JavaScript.

How it is normally injected

The Hype: Announcement Bar app embed does the work. When hype:campaigns-loaded fires it walks the loaded campaigns, looks each one up in window.HypeUIBlocksSchema, finds the block whose type is announcement-bar, creates the element with the block's message and icon, and inserts it as the first child of <body>. One bar per campaign, and each campaign is rendered once.

Two behaviors are worth knowing:

• If the block's show only when first applied setting is on, the embed records hype-announcement-bar-shown-<campaignId> in localStorage and skips the bar on later visits.
• Inside the theme editor the embed injects a placeholder bar instead of a live one, so you can style it with no active campaign.

Creating one yourself

Turn the app embed off first, or you will get two bars. Then build the element and insert it:

document.addEventListener('hype:campaigns-loaded', (event) => {  const campaign = event.detail[0]  if (!campaign) return  const blocks = window.HypeUIBlocksSchema[campaign.campaignId] || []  const block = blocks.find((entry) => entry.type === 'announcement-bar')  if (!block) return  const bar = document.createElement('hype-announcement-bar')  bar.id = 'my-hype-bar'  bar.setAttribute('message', block.settings.message)  bar.setAttribute('icon-type', block.settings.icon.type)  bar.setAttribute('icon-name', block.settings.icon.name)  bar.setAttribute('background-style', '--magic-gradient')  bar.setAttribute('show-close-btn', 'true')  document.body.insertAdjacentElement('afterbegin', bar)})

You can also write the tag directly into Liquid, since it needs no identifier. Do that only for a message that should always show — the element itself does not check whether a campaign is active.

Attributes

show-close-btn and show-on-scroll are matched by their value in CSS, not by their presence. An empty attribute does nothing — you must write show-close-btn="true".

The nine gradient names accepted by background-style are the ones listed in Product banner element.

Icon names

icon-type must be filled or outlined for a named icon. The names are built from a base name plus the set suffix, for example Confetti2Filled or Timer3Outlined.

Base names: MegaPhone1, MegaPhone2, Heart1, Heart2, Confetti1, Confetti2, Globe1, Globe2, HandShake1, HandShake2, Dollar1, Dollar2, Dollar3, Dollar4, Diamond1, Diamond2, Bell1, Bell2, Timer1, Timer2, Timer3, Timer4, Percentage1, Percentage2, Percentage3, Percentage4, ThumbsUp1, ThumbsUp2, Shipping1, Check1.

Every base name exists in both sets. There is one extra outlined icon, Check2Outlined, with no filled counterpart — 30 filled icons and 31 outlined ones.

An unknown name renders nothing at all, so check the spelling and the suffix. With icon-type="emoji", put the emoji in icon-name. With icon-type="none", leave icon-name empty.

Sticky behavior and dismissal

With show-on-scroll="true" the bar is fixed to the top of the viewport at z-index: 9999, and the placeholder part becomes visible to reserve the same height in the document flow so your header does not jump. The element measures itself when it connects and writes the result to --bar-height, falling back to 30px.

Clicking the close button slides the bar up and removes it after 400ms, and stores hype-announcement-bar-closed in sessionStorage. Any bar created later in the same session removes itself immediately. Because the flag is in session storage, the bar comes back in a new tab or a new session.

CSS custom properties

Parts

Styling example

<style>  #my-hype-bar {    --background-color: #111827;    --text-color: #f9fafb;    --font-size: 13px;    --padding: 12px;    --font-weight: bold;  }  #my-hype-bar::part(announcement-bar) {    box-shadow: none;    border-bottom: 1px solid #1f2937;  }  #my-hype-bar::part(message) {    text-transform: uppercase;    letter-spacing: 0.08em;  }  #my-hype-bar::part(close-btn-wrap) {    right: 20px;  }</style>

The bar carries a drop shadow and 30px of inline padding around its content by default; both are reachable through ::part(announcement-bar) and ::part(content-wrap).

Related

• Toast element
• Campaign elements overview
• Announcement bar