[mirotalksfu] - make widget fully configurable via config.js and .env

public/js/Brand.js

@@ -34,6 +34,28 @@ const guestJoinRoomButton = document.getElementById('guestJoinRoomButton');
 
 // app/src/config.js - ui.brand
 let BRAND = {
+    widget: {
+        enabled: false,
+        theme: 'dark',
+        widgetState: 'minimized',
+        widgetType: 'support',
+        supportWidget: {
+            position: 'top-right',
+            expertImages: [
+                'https://photo.cloudron.pocketsolution.net/uploads/original/95/7d/a5f7f7a2c89a5fee7affda5f013c.jpeg',
+            ],
+            checkOnlineStatus: false,
+            isOnline: true,
+            customMessages: {
+                heading: 'Need Help?',
+                subheading: 'Get instant support from our expert team!',
+                connectText: 'connect in < 5 seconds',
+                onlineText: 'We are online',
+                offlineText: 'We are offline',
+                poweredBy: 'Powered by MiroTalk SFU',
+            },
+        },
+    },
     app: {
         language: 'en',
         name: 'MiroTalk SFU',
@@ -76,7 +98,7 @@ let BRAND = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.9.24</strong>',
+        title: '<strong>WebRTC SFU v1.9.25</strong>',
         html: `
             <button 
                 id="support-button" 
@@ -119,6 +141,8 @@ async function initialize() {
 
     customizeApp();
 
+    customizeWidget();
+
     customizeWhoAreYou();
 
     checkBrand();
@@ -193,6 +217,22 @@ function customizeApp() {
     }
 }
 
+// WIDGET customize
+function customizeWidget() {
+    if (BRAND.widget?.enabled) {
+        window.addEventListener('DOMContentLoaded', function () {
+            if (typeof MiroTalkWidget !== 'undefined') {
+                const domain = window.location.host;
+                const roomId = 'support-room';
+                const userName = 'guest-' + Math.floor(Math.random() * 10000);
+                new MiroTalkWidget(domain, roomId, userName, BRAND.widget);
+            } else {
+                console.error('MiroTalkWidget is not defined. Please check Widget.js loading.');
+            }
+        });
+    }
+}
+
 // SITE metadata
 function customizeSite() {
     if (title && BRAND.site?.title) {

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.9.24
+ * @version 1.9.25
  *
  */
 
@@ -5528,7 +5528,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.24',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.9.25',
         html: `
             <br />
             <div id="about">

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.9.24
+ * @version 1.9.25
  *
  */
 

public/js/Widget.js

@@ -693,7 +693,11 @@ document.addEventListener('DOMContentLoaded', function () {
             position: autoInit.getAttribute('data-position') || MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.position,
             checkOnline: autoInit.getAttribute('data-check-online') === 'true',
             expertImages: autoInit.getAttribute('data-expert-images')
-                ? autoInit.getAttribute('data-expert-images').split(',').map(url => url.trim()).filter(Boolean)
+                ? autoInit
+                      .getAttribute('data-expert-images')
+                      .split(',')
+                      .map((url) => url.trim())
+                      .filter(Boolean)
                 : MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.expertImages,
             customMessages: {
                 heading:

public/views/landing.html

@@ -48,6 +48,7 @@
         <!-- Js scripts -->
         <script defer src="../js/Brand.js"></script>
         <script async src="../js/Umami.js"></script>
+        <script defer src="../js/Widget.js"></script>
 
         <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
         <script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>