feat: add setting timer notification + test alert button

README.md

@@ -24,7 +24,12 @@ The following will list basic installation instructions, assuming you're already
 - Save the newly created overlay
 - Share your StreamElements Account ID and JWT Token with your coach at Ulule to finish activating the widget
 
-⚠️ If you were using the widget prior to July 2026, you must copy the new `index.html` content into your StreamElements **HTML** tab AND the new `fields.json` content into your **Fields** tab. Older installs still load the previous direct socket script and will not receive the new broadcast events correctly. The external HTML/JS cannot save those fields automatically.
+⚠️ If you were using the widget prior to August 2026, you must copy the new `index.html` content into your StreamElements **HTML** tab AND the new `fields.json` content into your **Fields** tab. Older installs still load the previous direct socket script and will not receive the new broadcast events correctly. The external HTML/JS cannot save those fields automatically.
+
+August 2026 update note:
+
+- You can now configure the alert display duration.
+- You can now test the alert using a button in the Notification settings.
 
 ### Advanced configuration:
 

src/alert/fields.json

@@ -1,4 +1,12 @@
 {
+  "notificationScreenTime": {
+    "label": "Temps d'affichage de la notification en secondes",
+    "type": "number",
+    "value": 3,
+    "min": 1,
+    "step": 1,
+    "group": "Notification"
+  },
   "notificationSoundEnabled": {
     "label": "Son de notification",
     "type": "checkbox",
@@ -10,6 +18,12 @@
     "type": "sound-input",
     "group": "Notification"
   },
+  "testNotification": {
+    "label": "Tester la notification",
+    "type": "button",
+    "value": "test",
+    "group": "Notification"
+  },
   "enableFreeTierAlert": {
     "label": "Alerte lors d'un abonnement gratuit",
     "type": "checkbox",

src/alert/index.js

@@ -12,6 +12,44 @@ window.addEventListener('onWidgetLoad', (obj) => {
   function handleEventReceived(obj = {}) {
     const detail = obj.detail || {}
 
+    const listener = obj.detail.listener
+    const data = obj.detail.event
+
+    if (data.listener === 'widget-button') {
+      if (data.field === 'testNotification') {
+        const emulated = new CustomEvent('onEventReceived', {
+          detail: {
+            listener: 'order',
+            event: {
+              currency: '€',
+              order_total: '35',
+              project: {
+                lang: 'fr',
+                title: {
+                  fr: 'Un chouette projet',
+                  en: 'A nice project',
+                },
+              },
+              rewards: [
+                {
+                  price: '30',
+                  title: {
+                    fr: 'Le pack découverte',
+                    en: 'Discovery pack',
+                  },
+                },
+              ],
+              tip: '5',
+              user: {
+                user_name: 'Jane Doe',
+              },
+            },
+          },
+        })
+        window.dispatchEvent(emulated)
+      }
+    }
+
     if (detail.listener !== 'order') {
       return
     }
@@ -161,7 +199,7 @@ window.addEventListener('onWidgetLoad', (obj) => {
 
     setTimeout(() => {
       element.remove()
-    }, 5000)
+    }, settings.notificationScreenTime * 1000)
   }
 
   function logo() {
@@ -196,6 +234,7 @@ function normalizeSettings(fieldData) {
     highlightFontWeight: fieldData.highlightFontWeight || '700',
     notificationSound: fieldData.notificationSound,
     notificationSoundEnabled: booleanOrDefault(fieldData.notificationSoundEnabled, false),
+    notificationScreenTime: numberOrDefault(fieldData.notificationScreenTime, 3),
   }
 }