🔔 Easy Setup Example

Drop-in notification settings panel

📋 How to Use:

1. Configure your preferences below
2. Open another tab/window
3. Click "Trigger Notification" button
4. Switch to the other tab → you'll hear a sound!

⚙️ Notification Settings

💡 Integration Code

To add this to your webchat, just include these scripts:

<!-- Load Howler.js -->
<script src="./howler.min.js"></script>

<!-- Load WebchatNotifications -->
<script src="./notification.js"></script>

<!-- Initialize -->
<script>
  let notifier = null;
  
  window.addEventListener('DOMContentLoaded', async () => {
    notifier = new WebchatNotifications({
      soundPath: './sounds',
      soundName: 'level3',
      defaultVolume: 0.7
    });
    await notifier.init();
    
    // Trigger on new messages
    socket.on('message', () => {
      notifier.notify();
    });
  });
</script>

<!-- Load Settings Panel (optional but recommended) -->
<script>
  fetch('./settings-panel.html')
    .then(r => r.text())
    .then(html => {
      document.getElementById('settings-container').innerHTML = html;
    });
</script>