aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - make widget fully configurable via config.js

Browse Source
This commit is contained in:
Miroslav Pejic
2025-08-08 01:51:25 +02:00
parent dcf3a0bbab
commit 3fb1bccad8
8 changed files with 76 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/config.template.js
+22
View File
@@ -6,6 +6,28 @@ module.exports = {
// Branding and customizations require a license: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
brand: {
htmlInjection: true,
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',
},
},
},
app: {
language: 'en', // https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes
name: 'MiroTalk',
app/src/server.js
+1 -1
View File
@@ -45,7 +45,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.5.52
* @version 1.5.53
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.5.52",
"version": "1.5.53",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.5.52",
"version": "1.5.53",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "10.9.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.5.52",
"version": "1.5.53",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/js/brand.js
+39 -1
View File
@@ -37,6 +37,28 @@ const footer = document.getElementById('footer');
// Brand customizations...
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',
},
},
},
app: {
language: 'en',
name: 'MiroTalk',
@@ -73,7 +95,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.5.52',
title: 'WebRTC P2P v1.5.53',
html: `
<button
id="support-button"
@@ -111,6 +133,8 @@ async function initBrand() {
await getBrand();
handleBrand();
handleWidget();
}
/**
@@ -189,6 +213,20 @@ function handleBrand() {
!brand.html.footer && elementDisplay(footer, false);
}
// WIDGET customize
function handleWidget() {
if (brand.widget?.enabled) {
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.');
}
}
}
/**
* Handle Element display
* @param {object} element
public/js/client.js
+2 -2
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.5.52
* @version 1.5.53
*
*/
@@ -11242,7 +11242,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.5.52',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.5.53',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/js/widget.js
+5 -1
View File
@@ -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
+4 -1
View File
@@ -60,6 +60,10 @@
<!-- sweetalert -->
<script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
<!-- MiroTalk P2P Widget -->
<script defer src="../js/widget.js"></script>
</head>
<body class="has-animations">
<div id="snow-container"></div>
@@ -756,7 +760,6 @@
</div>
</footer>
</div>
<script defer src="../js/utils.js"></script>
<script defer src="../js/common.js"></script>
<script defer src="../js/brand.js"></script>