Custom Toast Alerts with Sound for Web Apps – SBNotification

SBNotification is a JavaScript notification library that allows you to implement customizable, toast-like notifications on your website. These notifications provide your users with real-time feedback and important updates without disrupting their workflow.

Features:

• Customizable Duration: Control how long notifications appear on screen.
• Sound Alerts: Incorporate audio cues to draw attention to notifications.
• Accent Colors: Customize the notification border and glow to match your website’s design.
• Countdown Timer: Visually indicate the remaining display time of notifications.
• Progress Bar: Show a progress bar for timed notifications.
• Background and Text Color Control: Adjust colors to ensure readability and visual harmony.
• Text Alignment Options: Align text within notifications for optimal presentation.
• Positioning Flexibility: Place notifications in various screen locations.
• Sticky Notifications: Create persistent notifications that require manual dismissal.
• Combine Notifications: Manage similar notifications by combining them to reduce clutter.
• Adjustable Width: Customize the width of notifications to fit different content lengths.

How to use it:

1. Download the library and include the main script ‘sb-notification.min.js’ on the page.

<script src="sb-notification.min.js"></script>

2. Display a basic notification that dismisses after 5 seconds:

SBNotification.show({
  message: 'This is a default notification'
});

3. To play a custom sound when the notification appears, specify the path to your sound file:

SBNotification.show({
  message: 'This is a custom notification'
  sound: '/path/to/sound.wav'
});

4. If you want the notification to remain on screen until manually dismissed, set autoHide to false:

SBNotification.show({
  message: 'This is a custom notification'
  autoHide: false
});

5. Full options to customize the notification’s appearance and behavior:

SBNotification.show({
  // Text to display in the notification (Required)
  message: 'Your message here',
  // Title of the notification
  title: 'Notification Title',
  // Show or hide the title (true for show, false for hide)
  showTitle: false,
  // Time in seconds before the notification disappears (positive number)
  duration: 5,
  // Show a countdown timer in the notification (true for show, false for hide)
  showTime: false,
  // Border and glow color of the notification (any valid CSS color)
  accentColor: '#00ffff',
  // Background color of the notification (any valid CSS color)
  bgColor: '#222',
  // Text color of the notification (any valid CSS color)
  textColor: '#fff',
  // Text alignment of the notification (left, right, center)
  textAlign: 'left',
  // Path to a sound file to play when the notification appears (e.g., 'success.wav', null for no sound)
  sound: null,
  // Position of the notification on the screen (right-top, right-center, left-top, left-center, center-top, center)
  position: 'right-top',
  // Whether the notification should automatically hide after the duration (true for auto-hide, false for sticky)
  autoHide: true,
  // Whether the notification should combine with another notification that has the same text (true for combine, false for not combine)
  combine: true,
  // Width of the notification (any valid CSS width value)
  width: '300px',
  // Callback function to execute when the notification closes
  onClose: null
  
});