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

هذا الالتزام موجود في:
Miroslav Pejic
2025-08-08 01:34:20 +02:00
الأصل 72fbecc8d0
التزام 1d88a19c03
10 ملفات معدلة مع 105 إضافات و9 حذوفات

عرض الملف

@@ -223,6 +223,22 @@ AWS_REGION= # AWS region (e.g., us-east-2,
# Branding injection
BRAND_HTML_INJECTION=true # Enable HTML injection for branding (true|false)
# Widget Configuration
WIDGET_ENABLED=false # Enable branding widget (true|false)
WIDGET_THEME=dark # Widget theme (dark|light)
WIDGET_STATE=minimized # Widget initial state (normal|minimized|closed)
WIDGET_TYPE=support # Widget type (support)
WIDGET_SUPPORT_POSITION=top-right # Support widget position (top-right|top-left|bottom-right|bottom-left)
WIDGET_SUPPORT_EXPERT_IMAGES= # Comma-separated expert image URLs comma-separated
WIDGET_SUPPORT_CHECK_ONLINE_STATUS=false # Check online room status (true|false)
WIDGET_SUPPORT_IS_ONLINE=true # Is support online (true|false)
WIDGET_SUPPORT_HEADING=Need Help? # Support widget heading
WIDGET_SUPPORT_SUBHEADING=Get instant support from our expert team! # Support widget subheading
WIDGET_SUPPORT_CONNECT_TEXT=connect in < 5 seconds # Connect text
WIDGET_SUPPORT_ONLINE_TEXT=We are online # Online text
WIDGET_SUPPORT_OFFLINE_TEXT=We are offline # Offline text
WIDGET_SUPPORT_POWERED_BY=Powered by MiroTalk SFU # Powered by text
# App
UI_LANGUAGE=en # Interface language (en, es, fr, etc.)
APP_NAME=MiroTalk SFU # Application name

عرض الملف

@@ -64,7 +64,7 @@ dev dependencies: {
* @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
*
*/

عرض الملف

@@ -988,6 +988,41 @@ module.exports = {
*/
htmlInjection: process.env.BRAND_HTML_INJECTION !== 'false',
/**
* Widget Configuration
* --------------------
* Controls the appearance and behavior of the support widget.
* Supports dynamic configuration via environment variables.
*/
widget: {
enabled: process.env.BRAND_WIDGET_ENABLED === 'true',
domain: process.env.WIDGET_DOMAIN || null, // sfu.mirotalk.com
theme: process.env.BRAND_WIDGET_THEME || 'dark',
widgetState: process.env.BRAND_WIDGET_STATE || 'minimized',
widgetType: process.env.BRAND_WIDGET_TYPE || 'support',
supportWidget: {
position: process.env.BRAND_WIDGET_SUPPORT_POSITION || 'top-right',
expertImages: process.env.BRAND_WIDGET_SUPPORT_EXPERT_IMAGES
? process.env.BRAND_WIDGET_SUPPORT_EXPERT_IMAGES.split(splitChar)
.map((url) => url.trim())
.filter(Boolean)
: [
'https://photo.cloudron.pocketsolution.net/uploads/original/95/7d/a5f7f7a2c89a5fee7affda5f013c.jpeg',
],
checkOnlineStatus: process.env.BRAND_WIDGET_SUPPORT_CHECK_ONLINE_STATUS === 'true',
isOnline: process.env.BRAND_WIDGET_SUPPORT_IS_ONLINE !== 'false',
customMessages: {
heading: process.env.BRAND_WIDGET_SUPPORT_HEADING || 'Need Help?',
subheading:
process.env.BRAND_WIDGET_SUPPORT_SUBHEADING || 'Get instant support from our expert team!',
connectText: process.env.BRAND_WIDGET_SUPPORT_CONNECT_TEXT || 'connect in < 5 seconds',
onlineText: process.env.BRAND_WIDGET_SUPPORT_ONLINE_TEXT || 'We are online',
offlineText: process.env.BRAND_WIDGET_SUPPORT_OFFLINE_TEXT || 'We are offline',
poweredBy: process.env.BRAND_WIDGET_SUPPORT_POWERED_BY || 'Powered by MiroTalk SFU',
},
},
},
app: {
language: process.env.UI_LANGUAGE || 'en',
name: process.env.APP_NAME || 'MiroTalk SFU',

4
package-lock.json مولّد
عرض الملف

@@ -1,12 +1,12 @@
{
"name": "mirotalksfu",
"version": "1.9.24",
"version": "1.9.25",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalksfu",
"version": "1.9.24",
"version": "1.9.25",
"license": "AGPL-3.0",
"dependencies": {
"@aws-sdk/client-s3": "^3.863.0",

عرض الملف

@@ -1,6 +1,6 @@
{
"name": "mirotalksfu",
"version": "1.9.24",
"version": "1.9.25",
"description": "WebRTC SFU browser-based video calls",
"main": "Server.js",
"scripts": {

عرض الملف

@@ -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) {

عرض الملف

@@ -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">

عرض الملف

@@ -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
*
*/

عرض الملف

@@ -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:

عرض الملف

@@ -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>