Announcement Bar Element

Overview

The <hype-announcement-bar> is a global component for displaying site-wide messages. It is not meant to be placed statically in your theme. Instead, it should be dynamically created and injected into the page with JavaScript, using the configuration from the Hype admin.

The primary use case is to show a global announcement when a Hype campaign becomes active. To do this, you should listen for events from the HypeSDK and use the global Hype window objects to get the bar's configuration.

Manual Usage

For prerequisites and an explanation of the integration patterns, please see the UI Elements Overview.

To display an announcement bar, listen for a HypeSDK event and then use the data from the global window objects to create, configure, and append the element to the page.

Example

This script shows how to display an announcement bar that you have already configured in the Hype admin. It listens for the hype:campaigns-loaded event, finds the active campaign and its associated announcement bar configuration, and then displays it.

For a full list of available SDK events, please refer to the HypeSDK Documentation.

document.addEventListener('hype:campaigns-loaded', () => {
	// Get data from the global window objects
	const activeCampaigns = window.Hype?.campaigns || [];
	const uiBlockSchemas = window.HypeUIBlocksSchema || {};

	for (const campaign of activeCampaigns) {
		const campaignBlocks = uiBlockSchemas[campaign.campaignId];
		if (!campaignBlocks) continue;

		// Find the specific announcement bar block you configured
		const announcementBlock = campaignBlocks.find(
			(block) => block.type === 'announcement-bar'
		);
		if (!announcementBlock) continue;

		// 1. Create the element
		const bar = document.createElement('hype-announcement-bar');

		// 2. Configure it using the settings from your Hype admin
		bar.setAttribute('message', announcementBlock.settings.message);
		bar.setAttribute('icon-name', announcementBlock.settings.icon.name);
		bar.setAttribute('icon-type', announcementBlock.settings.icon.type);
		bar.setAttribute(
			'background-style',
			announcementBlock.settings.background_style
		);

		if (announcementBlock.settings.show_close_btn) {
			bar.setAttribute('show-close-btn', 'true');
		}
		if (announcementBlock.settings.show_on_scroll) {
			bar.setAttribute('show-on-scroll', 'true');
		}

		// 3. Add it to the top of the page
		document.body.insertAdjacentElement('afterbegin', bar);
	}
});

Attributes

When creating the element in JavaScript, you configure it with these attributes.

Attribute	Type	Description	Default
message	string	The text content to display in the announcement bar.	null
icon-name	string	The name of the icon to display.	null
icon-type	filled | outline	The type of icon set to use.	filled
background-style	string	solid or a gradient variable (e.g., --magic-gradient).	solid
show-close-btn	boolean	If this attribute is present, a close button is displayed.	false
show-on-scroll	boolean	If this attribute is present, the bar will stick to the top on scroll.	false

Styling with CSS Custom Properties

Property	Description	Default
--background-color	The background color of the bar (used when background-style is solid).	#000
--text-color	The color of the message text and icon.	#fff
--font-size	The font size of the message text.	14px
--padding	The vertical padding of the bar.	8px
--font-weight	The font weight of the message text.	normal

Advanced Styling with Shadow Parts

For more granular control, you can directly style internal elements of the component using the ::part() CSS pseudo-element.

Example

/* Add a border to the bottom of the bar */
hype-announcement-bar::part(announcement-bar) {
	border-bottom: 2px solid blue;
}

/* Make the message text italic */
hype-announcement-bar::part(message) {
	font-style: italic;
}

Available Parts

Part Name	Element Description
placeholder	An empty element that takes up the bar's height when show-on-scroll is true.
announcement-bar	The main wrapper for the entire component.
content-wrap	The container for the icon and message.
message	The <p> element that contains the announcement text.
close-btn-wrap	The container for the close button.