diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js
index f93f24dd..bc30520e 100644
--- a/public/js/RoomClient.js
+++ b/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.28
+ * @version 1.9.29
*
*/
diff --git a/public/js/Widget.js b/public/js/Widget.js
index 0b0e83f0..d771e7d8 100644
--- a/public/js/Widget.js
+++ b/public/js/Widget.js
@@ -16,6 +16,13 @@ class MiroTalkWidget {
'https://i.pravatar.cc/40?img=2',
'https://i.pravatar.cc/40?img=3',
],
+ buttons: {
+ audio: true,
+ video: true,
+ screen: true,
+ chat: true,
+ join: true,
+ },
checkOnlineStatus: false,
isOnline: true,
customMessages: {
@@ -223,21 +230,28 @@ class MiroTalkWidget {
}
createActionButtons() {
- const buttons = [
- { action: 'startAudioCall', icon: this.getAudioIcon(), text: 'Start Audio Call' },
- { action: 'startVideoCall', icon: this.getVideoIcon(), text: 'Start Video Call' },
- ];
+ const flags = this.options.supportWidget.buttons || {};
+ const buttons = [];
- // Only show "Start Screen Share" if displayMedia is supported
- if (navigator.mediaDevices && typeof navigator.mediaDevices.getDisplayMedia === 'function') {
+ if (flags.audio) {
+ buttons.push({ action: 'startAudioCall', icon: this.getAudioIcon(), text: 'Start Audio Call' });
+ }
+ if (flags.video) {
+ buttons.push({ action: 'startVideoCall', icon: this.getVideoIcon(), text: 'Start Video Call' });
+ }
+ if (flags.screen && navigator.mediaDevices && typeof navigator.mediaDevices.getDisplayMedia === 'function') {
buttons.push({ action: 'startScreenShare', icon: this.getScreenIcon(), text: 'Start Screen Share' });
}
+ if (flags.chat) {
+ buttons.push({ action: 'startChat', icon: this.getChatIcon(), text: 'Start Chat' });
+ }
+ if (flags.join) {
+ buttons.push({ action: 'joinRoom', icon: this.getJoinIcon(), text: 'Join Room' });
+ }
- // Add chat button
- buttons.push({ action: 'startChat', icon: this.getChatIcon(), text: 'Start Chat' });
-
- // Insert "Start Screen Share" before "Join Room" if present
- buttons.push({ action: 'joinRoom', icon: this.getJoinIcon(), text: 'Join Room' });
+ if (!buttons.length) {
+ return `
No actions available
`;
+ }
return buttons
.map(
@@ -245,8 +259,7 @@ class MiroTalkWidget {
- `
+ `
)
.join('');
}
@@ -709,6 +722,21 @@ document.addEventListener('DOMContentLoaded', function () {
if (!autoInit) return;
try {
+ const buttonsAttr = autoInit.getAttribute('data-buttons');
+ let buttonsConfig = { ...MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.buttons };
+ if (buttonsAttr) {
+ // Normalize and map
+ const requested = buttonsAttr
+ .split(',')
+ .map((b) => b.trim().toLowerCase())
+ .filter(Boolean);
+ // Start all false then enable requested valid keys
+ buttonsConfig = { audio: false, video: false, screen: false, chat: false, join: false };
+ requested.forEach((key) => {
+ if (key in buttonsConfig) buttonsConfig[key] = true;
+ });
+ }
+
const config = {
domain: autoInit.getAttribute('data-domain') || window.location.host,
roomId: autoInit.getAttribute('data-room') || 'support-room',
@@ -756,6 +784,7 @@ document.addEventListener('DOMContentLoaded', function () {
expertImages: config.expertImages,
checkOnlineStatus: config.checkOnline,
customMessages: config.customMessages,
+ buttons: buttonsConfig,
},
});
}
diff --git a/widgets/example-1.html b/widgets/example-1.html
index a2326189..e2ce4588 100644
--- a/widgets/example-1.html
+++ b/widgets/example-1.html
@@ -15,6 +15,7 @@
data-position="bottom-right"
data-check-online="false"
data-expert-images="https://i.pravatar.cc/40?img=1,https://i.pravatar.cc/40?img=2,https://i.pravatar.cc/40?img=3"
+ data-buttons="audio,video,screen,chat,join"
data-heading="Need Help?"
data-subheading="Get instant support from our expert team!"
data-connect-text="connect in < 5 seconds"
diff --git a/widgets/maker.html b/widgets/maker.html
index 714825a5..a926e12c 100644
--- a/widgets/maker.html
+++ b/widgets/maker.html
@@ -346,6 +346,63 @@
display: none;
}
+ .button-toggle-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+ gap: 10px 14px;
+ margin-top: 8px;
+ }
+
+ .toggle {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 13px;
+ font-weight: 600;
+ background: #eef1f4;
+ border: 1px solid #d5dade;
+ padding: 8px 10px 8px 40px;
+ border-radius: 8px;
+ cursor: pointer;
+ user-select: none;
+ transition:
+ background 0.25s,
+ border-color 0.25s;
+ }
+
+ .toggle input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .toggle::before {
+ content: '';
+ position: absolute;
+ left: 10px;
+ width: 20px;
+ height: 20px;
+ border-radius: 6px;
+ background: linear-gradient(135deg, #9aa0a6, #7e858c);
+ box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
+ transition: background 0.25s;
+ }
+
+ .toggle.checked {
+ background: #e5faf0;
+ border-color: #00c853;
+ color: #116d3d;
+ }
+
+ .toggle.checked::before {
+ background: linear-gradient(135deg, #00e676, #00c853);
+ }
+
+ .toggle:active {
+ transform: scale(0.97);
+ }
+
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
@@ -453,6 +510,30 @@