Announcement

The Announcement component is a flexible notification bar that can be displayed at the top of your webpage. It's perfect for displaying important messages, alerts, or promotional content to your users.

Features

• Multiple types: info, success, warning, and error
• Fully responsive design
• Auto-dismissal after a specified duration
• Optional close button
• Smooth animations
• Customizable colors and content
• Pushes page content down when displayed

Installation

import { Announcement } from './path-to/announcement';

Basic Usage

// Initialize with default settings
const announcement = new Announcement({
  tracker: yourTrackerInstance,
  title: 'New Feature!',
  message: 'Check out our latest update',
  type: 'info',
  autoShow: true
});

Configuration Options

Option	Type	Default	Description
tracker	SystemTracker	Required	The tracker instance for analytics
title	string	''	The title of the announcement
message	string	''	The main message content
type	`'info'	'success'	'warning'
themeColor	string	'#3b82f6'	Custom color for 'info' type announcements
linkUrl	string	'https://rojastudio.xyz'	URL for the optional link
linkText	string	'Más información'	Text for the optional link
autoShow	boolean	true	Whether to show the announcement automatically
duration	number	0	Auto-hide after milliseconds (0 = don't auto-hide)
dismissible	boolean	true	Whether to show close button
pushBody	boolean	true	Whether to push page content down

Methods

show()

Manually display the announcement.

announcement.show();

hide()

Manually hide the announcement.

announcement.hide();

Examples

Success Message

new Announcement({
  tracker: yourTrackerInstance,
  title: 'Success!',
  message: 'Your changes have been saved.',
  type: 'success',
  duration: 5000 // Auto-hide after 5 seconds
});

Error Message with Custom Link

new Announcement({
  tracker: yourTrackerInstance,
  title: 'Error',
  message: 'Something went wrong. Please try again.',
  type: 'error',
  linkUrl: '/help',
  linkText: 'Get Help',
  dismissible: false // Force users to acknowledge the error
});

Styling

The component includes default styles but can be customized using the following CSS classes:

• .pt-announcement - Main container
• .pt-announcement.visible - When announcement is visible
• .pt-announcement-inner - Inner content wrapper
• .pt-announcement-text - Text container
• .pt-announcement-close - Close button

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• IE11+ (with polyfills)