Announcement Banner — Live Configurator

Announcement Banner Live Configurator

Build one announcement — paste into your theme's Global Code Snippet. Need more? Copy this one's code, click Reset, and build the next — each is uniquely scoped, so any number can be pasted together safely.

Global Code Snippet

Configure one announcement campaign at a time — top ribbon, corner card, or full-page popover — with its own targeting, frequency, and content. Each snippet gets its own unique ID, so you can paste any number of Announcement Banner snippets together into the same Global Code Snippet without them conflicting or overwriting each other. Compatible with Skilljar's HTML sections in pages, courses, and lessons.

Campaign

Internal name (for your reference only, not shown to end users)

Display

Display style

Targeting

Pages

Students

Frequency

How often

Show once per page (instead of once for the whole site)

Useful when Pages targeting is Global or covers multiple URLs — each matching page gets its own “seen” tracking, instead of seeing it once anywhere suppressing it everywhere.

Suppress for (days)

Content

Use custom HTML

Eyebrow (optional)

Headline

Subheadline (optional)

Body (optional)

Button text (blank = no button)

Button URL

Button opens in new tab

Typography

Font family

Font Sizes (px)

Eyebrow

Headline

Subheadline

Body

Button text

Colors

Background color

Text color

Accent / button color

Button text color

Button hover color (auto-suggested from accent until edited)

Box Style

Box style

Shape

Corner radius (px)

Corner Card

Card width (px)

Full-Page Popover

Popover max-width (px)

Backdrop color

Backdrop opacity (%)

Box Padding (px)

Top & bottom

Left & right

Content Spacing (px)

Below eyebrow

Below headline

Below subheadline

Below body

Corner Card Position

Side margin (px)

Bottom margin (px)

Default bottom offset clears Skilljar's default footer bar (feedback widget, language selector, etc.) on course/lesson pages so the card isn’t hidden behind it.

Live Preview

✓ Saved

Site Header

Extend this template with AI Prompts

Paste any of these into your AI chat (with the generated code from Fullscreen / View Code) to extend this announcement banner further.

Before you paste a prompt: grab the AI context file from Lesson 1 of the AI with Skilljar course and paste it into your AI chat. This will teach it the Skilljar HTML, CSS, and JS rules.

✦

Add a scheduled date range

Automatically stop showing an announcement after a certain date.

Copy

✦

Add a second button

A secondary link next to the primary CTA.

Copy

✦

Add an entrance animation

A subtle slide/fade transition on show.

Copy

✦

Add an optional image field

Small image/icon shown beside the text.

Copy

Live Preview

Paste into: Theming → Themes → [Your Theme] → Code Snippets → Global Code Snippet → Custom JavaScript