/ Components
/ Conference banner

Conference banner

Display a dismissible banner for conferences, events, or important notices.

Message type

Variant

Title*

Body*

Dismissible?

Enabled

How to use this template

Click "Sign up" above to create a free Knock account.

Navigate to the "Message types" section in the dashboard and click "Create message type." Give your message type a name and key.

Next, copy and paste the "Preview template" and "Schema" content from the "Message type" popup above into their respective fields in the dashboard. Save and commit your changes.

Navigate to the "Components" section in the dashboard and click "Create component." Give it a unique name and key, and then you can edit its targeting rules.

Next, click 'Edit content' to create your messaging and select your message type. Configure your component content using the visual editor, then save and commit your changes when ready.

In your application, implement the `KnockGuideProvider` component. Copy and paste the "Code" from the component preview above into its own component, and implement that component within the `KnockGuideProvider`.

Activate the component in the dashboard to render it in your application.

What this component solves

Provides a lightweight, reusable UI mechanism to drive awareness of time-sensitive announcements (e.g. upcoming events, maintenance windows, promotions) directly inside your application, maximizing engagement among active users.
Enables non-intrusive, but persistent, visibility. Users see the banner once per session (or until dismiss), reducing reliance on noisy email/Slack blasts.

When to use this component

Use this component when:

You need to notify users about an event, announcement, or limited-time offer as soon as they open your app.
The message is important but not urgent enough to warrant a direct message, modal, or other interruptive UI element.
The message has a short lifespan (e.g. a few days or weeks).

How it works

Inputs

title: The banner headline (string).
body: The announcement copy or description (string or HTML).
dismissible: Boolean indicating if the user can dismiss the banner.
primary_button.text: Text for the primary action button (e.g. "Learn more", "Register now").
primary_button.action: URL or action that the primary button triggers.
secondary_button.text: Text for the optional secondary action button.
secondary_button.action: URL or action that the secondary button triggers.

Behavior

On app load or page render, check if the guide/banner should be displayed based on targeting conditions.
Render a banner at the top of the page with title and body content.
Display primary and/or secondary action buttons if configured.
Show dismiss "×" button if dismissible is true.
On primary button click → navigate to the specified action URL and mark as interacted.
On secondary button click → navigate to the specified action URL and mark as interacted.
On dismiss → hide banner and mark as archived to prevent re-display.

Best practices

Keep messaging concise and actionable. Banners are attention-grabbers, so long copy can dilute their impact. Use 1–2 short sentences with a clear CTA.
Use CTAs with urgency or value. For example, “Register now for early-bird pricing by Sep 30” gives reason and time sensitivity.
Align with accessibility standards. Ensure banner has proper ARIA roles, dismiss button accessible via keyboard, contrast and readability for visibility.
Responsive cross-platform support. Banner should render appropriately on mobile, tablet, desktop, handling varying viewport widths gracefully.

Common mistakes to avoid

Leaving the banner active too long. Old announcements that aren’t relevant anymore create confusion and signal that the interface isn’t being maintained.
Overusing banners. When multiple banners stack or appear too frequently, users begin to ignore them and trust erodes. Limit usage to avoid banner fatigue.
Making banners non-dismissible. Forced persistence frustrates users and makes the banner feel like an obstruction rather than a notice. Ensure dismiss logic works reliably, and once dismissed, don’t re-show until content changes to avoid user irritation or perceived spamminess.

FAQ

Should we show the banner to all users or only a subset (admins, new users, etc.)?
Depends on the message. For global announcements (events, maintenance), you likely want everyone. For targeted notices (beta program, feature opt-in), filter by user role or segment and use conditional rendering logic.

How long should the banner stay visible?
Only show the banner for as long as the announcement is relevant. For events, this is typically until the event date with a short buffer. Avoid leaving old banners active indefinitely.

What if a user clears cookies / storage or switches device — will the banner reappear?
Yes, unless you persist dismissal state server-side (e.g. per user preference). Decide whether persistence should be per device/session or global per user based on your engagement goals.

Is there a risk of banner fatigue if we use this often?
Yes. Banners are high-signal UI, so overusing them dilutes impact, annoys users, and can reduce overall engagement. Use sparingly and strategically.

Banner title

Copy about a feature or an action that the user should be aware of.

Browse more components

Feature announcement

Announce new features with an in-app card including image and action buttons.