Next Tab Notifications

A powerful Next.js / React hook that changes the tab title and favicon when the user switches to another tab. Perfect for notifications, alerts, and user engagement.

Preview & ControlsInactive

Ready to start

Configuration

When enabled, the tab title will only change when you manually start the notification (not on tab switch).
When enabled, the favicon will only change when you manually start the notification (not on tab switch).
Enter a single title or enable cycling to rotate between multiple titles separated by ",".
Choose between emoji-based or image URL-based favicons for your notification.
Enter one or more emojis, separated by commas, to animate as your favicon.
Set the background color for your emoji favicon.
Adjust how quickly the favicon cycles through your list.

Quick Guide

  1. Adjust your notification settings in the configuration panel
  2. Click "Start Notification" to preview the changes
  3. Switch tabs to see it in action (if manual trigger is off)
  4. Try different emojis and colors for unique notifications
  5. Add and configure sounds for audio notifications

Code Example

const { isActive, startNotification } = useTabNotification({
  titles: "📢 Come back to the app!",
  favicons: [
  {
    "emoji": "🔔",
    "backgroundColor": "#0078d4",
    "size": 32
  },
  {
    "emoji": "📬",
    "backgroundColor": "#0078d4",
    "size": 32
  },
  {
    "emoji": "🔔",
    "backgroundColor": "#0078d4",
    "size": 32
  },
  {
    "emoji": "📬",
    "backgroundColor": "#0078d4",
    "size": 32
  }
],
  faviconInterval: 800,
  titleInterval: 2000,
  manualTrigger: false,
});