[mirotalksfu] - improve Widgets
هذا الالتزام موجود في:
Miroslav Pejic
19
widgets/example-0.html
Normal file
19
widgets/example-0.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://sfu.mirotalk.com/js/Widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="support-widget"
|
||||
data-mirotalk-auto
|
||||
data-domain="sfu.mirotalk.com"
|
||||
data-room="support-room"
|
||||
data-theme="light"
|
||||
data-widget-type="support"
|
||||
data-widget-state="normal"
|
||||
data-position="bottom-right"
|
||||
data-check-online="false"
|
||||
></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,738 +1,25 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk SFU - Support Widget</title>
|
||||
<style>
|
||||
.widget-container {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #1f1f2e 0%, #2a2a3e 100%);
|
||||
color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.widget-container:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.online-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
animation: fadeInDown 0.6s ease;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #00e676;
|
||||
margin-right: 8px;
|
||||
animation: pulse 2s infinite;
|
||||
box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
background: #00e676;
|
||||
box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
background: #ff5252;
|
||||
box-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.online-text {
|
||||
color: #00e676;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.offline-text {
|
||||
color: #ff5252;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: fadeInUp 0.6s ease 0.1s both;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24px;
|
||||
color: #e0e0e0;
|
||||
animation: fadeInUp 0.6s ease 0.2s both;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
animation: fadeInUp 0.6s ease 0.3s both;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #333;
|
||||
margin: 0 6px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
color: #bbb;
|
||||
animation: fadeInUp 0.6s ease 0.4s both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #333 0%, #444 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: linear-gradient(135deg, #444 0%, #555 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 230, 118, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.btn:hover .btn-icon {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 24px;
|
||||
animation: fadeInUp 0.6s ease 0.5s both;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: #00e676;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #00c853;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.widget-container {
|
||||
width: 300px;
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.widget-container {
|
||||
width: 280px;
|
||||
padding: 20px;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.widget-container {
|
||||
width: 260px;
|
||||
padding: 18px;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0 3px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
font-size: 13px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 11px 12px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -26px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin-top: 18px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.widget-container {
|
||||
width: 240px;
|
||||
padding: 16px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.online-indicator {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.online-text,
|
||||
.offline-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-size: 16px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.btn-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin-top: 16px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.widget-container {
|
||||
width: 220px;
|
||||
padding: 14px;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.btn-icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -22px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape orientation adjustments */
|
||||
@media (max-height: 600px) and (orientation: landscape) {
|
||||
.widget-container {
|
||||
padding: 12px;
|
||||
width: 280px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* High DPI displays */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.widget-container {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
border-width: 1.5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="https://sfu.mirotalk.com/js/Widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="widget-container">
|
||||
<!-- Online indicator -->
|
||||
<div class="online-indicator">
|
||||
<div class="status-dot" aria-hidden="true"></div>
|
||||
<div class="online-text">We are online</div>
|
||||
<div class="offline-text">We are offline</div>
|
||||
<div class="close-btn" onclick="closeWidget()" aria-label="Close widget" role="button" tabindex="0">
|
||||
×
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main heading -->
|
||||
<h2 class="main-heading">Need a hand?</h2>
|
||||
|
||||
<!-- Subheading -->
|
||||
<p class="subheading">
|
||||
Hop on a <span style="font-weight: bold">Free 1:1 or Group Consultation</span> with a MiroTalk Expert
|
||||
right now!
|
||||
</p>
|
||||
|
||||
<!-- Expert images -->
|
||||
<div class="expert-images">
|
||||
<img src="https://i.pravatar.cc/40?img=1" class="expert-img" alt="Expert consultant 1" loading="lazy" />
|
||||
<img src="https://i.pravatar.cc/40?img=2" class="expert-img" alt="Expert consultant 2" loading="lazy" />
|
||||
<img src="https://i.pravatar.cc/40?img=3" class="expert-img" alt="Expert consultant 3" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="connect-text">connect in < 10 seconds</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<button class="btn" onclick="startAudioCall()" aria-label="Start audio call with expert">
|
||||
<div class="btn-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M6.6,10.8c1.3,2.6,3.5,4.8,6.1,6.1l2-2c0.4-0.4,1-0.5,1.5-0.3c1.6,0.5,3.3,0.8,5,0.8c0.6,0,1,0.4,1,1V21c0,0.6-0.4,1-1,1C10.1,22,2,13.9,2,4c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1c0,1.7,0.3,3.4,0.8,5C7.1,9.8,7,10.4,6.6,10.8z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Audio Call</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="startVideoCall()" aria-label="Start video call with expert">
|
||||
<div class="btn-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17 10.5V7c0-1.1-.9-2-2-2H5C3.9 5 3 5.9 3 7v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-3.5l4 4v-11l-4 4z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Video Call</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="startScreenShare()" aria-label="Start screen sharing with expert">
|
||||
<div class="btn-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"
|
||||
/>
|
||||
<circle cx="12" cy="11" r="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Screen Share</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="joinRoom()" aria-label="Join support room">
|
||||
<div class="btn-icon" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Join Room</span>
|
||||
</button>
|
||||
|
||||
<div class="footer-text">
|
||||
Powered by <a href="#" class="footer-link" onclick="openMiroTalk()">MiroTalk</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const indicator = document.querySelector('.online-indicator');
|
||||
const statusDot = document.querySelector('.status-dot');
|
||||
const onlineText = document.querySelector('.online-text');
|
||||
const offlineText = document.querySelector('.offline-text');
|
||||
|
||||
const domain = 'sfu.mirotalk.com'; // Replace with your MiroTalk server domain
|
||||
|
||||
const roomId = 'test'; // Replace with desired room ID
|
||||
|
||||
const userName = 'guest-' + Math.floor(Math.random() * 10000);
|
||||
|
||||
let isOnline = true; // Replace with actual online status check logic
|
||||
|
||||
checkOnlineStatus(roomId);
|
||||
|
||||
function updateStatusUI(online) {
|
||||
isOnline = online;
|
||||
|
||||
if (online) {
|
||||
statusDot.classList.add('online');
|
||||
statusDot.classList.remove('offline');
|
||||
onlineText.style.display = 'inline';
|
||||
offlineText.style.display = 'none';
|
||||
} else {
|
||||
statusDot.classList.add('offline');
|
||||
statusDot.classList.remove('online');
|
||||
onlineText.style.display = 'none';
|
||||
offlineText.style.display = 'inline';
|
||||
}
|
||||
|
||||
console.log('Room active status:', online);
|
||||
}
|
||||
|
||||
async function checkOnlineStatus(roomId) {
|
||||
return updateStatusUI(isOnline); // For testing, assume always online comment this line to enable real status check
|
||||
|
||||
try {
|
||||
// Enable HOST_PROTECTED mode or OIDC mode on the MiroTalk server otherwise this will return always Unauthorized
|
||||
const response = await fetch(`https://${domain}/isRoomActive`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ roomId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const online = data.message && data.message !== 'Unauthorized';
|
||||
updateStatusUI(online);
|
||||
} catch (error) {
|
||||
console.warn('Failed to check room status:', error.message);
|
||||
updateStatusUI(false);
|
||||
}
|
||||
}
|
||||
|
||||
function closeWidget() {
|
||||
const widget = document.querySelector('.widget-container');
|
||||
widget.style.animation = 'fadeOut 0.3s ease forwards';
|
||||
setTimeout(() => {
|
||||
widget.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function alertOffline() {
|
||||
alert('Sorry, support is currently offline.');
|
||||
}
|
||||
|
||||
function startAudioCall() {
|
||||
if (isOnline) {
|
||||
console.log('Starting audio call...');
|
||||
window.open(
|
||||
`https://${domain}/join?room=${roomId}&name=${userName}&audio=1&video=0&screen=0`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
alertOffline();
|
||||
}
|
||||
}
|
||||
|
||||
function startVideoCall() {
|
||||
if (isOnline) {
|
||||
console.log('Starting video call...');
|
||||
window.open(
|
||||
`https://${domain}/join?room=${roomId}&name=${userName}&audio=0&video=1&screen=0`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
alertOffline();
|
||||
}
|
||||
}
|
||||
|
||||
function startScreenShare() {
|
||||
if (isOnline) {
|
||||
console.log('Starting screen share...');
|
||||
window.open(
|
||||
`https://${domain}/join?room=${roomId}&name=${userName}&audio=0&video=0&screen=1`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
alertOffline();
|
||||
}
|
||||
}
|
||||
|
||||
function joinRoom() {
|
||||
if (isOnline) {
|
||||
console.log('Joining room...');
|
||||
window.open(`https://${domain}/join?room=${roomId}`, '_blank');
|
||||
} else {
|
||||
alertOffline();
|
||||
}
|
||||
}
|
||||
|
||||
function openMiroTalk() {
|
||||
window.open(`https://${domain}`, '_blank');
|
||||
}
|
||||
|
||||
// Add keyboard navigation support
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeWidget();
|
||||
}
|
||||
});
|
||||
|
||||
// Add fade out animation to CSS
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; transform: scale(1); }
|
||||
to { opacity: 0; transform: scale(0.9); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
</script>
|
||||
<div
|
||||
id="support-widget"
|
||||
data-mirotalk-auto
|
||||
data-domain="sfu.mirotalk.com"
|
||||
data-room="support-room"
|
||||
data-theme="dark"
|
||||
data-widget-type="support"
|
||||
data-widget-state="normal"
|
||||
data-position="bottom-right"
|
||||
data-check-online="false"
|
||||
data-heading="Need Help?"
|
||||
data-subheading="Get instant support from our expert team!"
|
||||
data-connect-text="connect in < 5 seconds"
|
||||
data-online-text="We are online"
|
||||
data-offline-text="We are offline"
|
||||
data-powered-by="Powered by MiroTalk"
|
||||
></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,17 +1,44 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk SFU - Simple Iframe Example</title>
|
||||
<script src="https://sfu.mirotalk.com/js/Widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<iframe
|
||||
id="mirotalkIframe"
|
||||
allow="camera; microphone; display-capture; fullscreen; clipboard-read; clipboard-write; web-share; autoplay"
|
||||
src="https://sfu.mirotalk.com/newroom"
|
||||
style="height: 100vh; width: 100vw; border: 0px"
|
||||
></iframe>
|
||||
<script>
|
||||
// Advanced configuration
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof MiroTalkWidget !== 'undefined') {
|
||||
const domain = 'sfu.mirotalk.com';
|
||||
const roomId = 'support-room';
|
||||
const userName = 'guest-' + Math.floor(Math.random() * 10000);
|
||||
|
||||
new MiroTalkWidget(domain, roomId, userName, {
|
||||
theme: 'dark', // or 'light'
|
||||
widgetState: 'normal', // 'normal', 'minimized', 'closed'
|
||||
widgetType: 'support',
|
||||
supportWidget: {
|
||||
position: 'bottom-right', // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
|
||||
expertImages: [
|
||||
'https://i.pravatar.cc/40?img=1',
|
||||
'https://i.pravatar.cc/40?img=2',
|
||||
'https://i.pravatar.cc/40?img=3',
|
||||
],
|
||||
checkOnlineStatus: false, // Check if experts are in the specified room
|
||||
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',
|
||||
},
|
||||
},
|
||||
});
|
||||
} else {
|
||||
console.error('MiroTalkWidget is not defined. Please check Widget.js loading.');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -3,34 +3,819 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk SFU - Embedded Meeting Widget</title>
|
||||
<title>MiroTalk SFU - Custom Support Widget</title>
|
||||
<style>
|
||||
/* Keyframes */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
<script src="https://sfu.mirotalk.com/js/Iframe.js" defer></script>
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const domain = 'sfu.mirotalk.com';
|
||||
const options = {
|
||||
room: 'test',
|
||||
roomPassword: 0,
|
||||
name: 'guest-' + Math.floor(Math.random() * 10000),
|
||||
avatar: 0,
|
||||
audio: 0,
|
||||
video: 0,
|
||||
screen: 0,
|
||||
hide: 0,
|
||||
notify: 0,
|
||||
duration: 'unlimited', // HH:MM:SS
|
||||
token: null,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
parentNode: document.querySelector('#meet'),
|
||||
};
|
||||
const api = new IframeApi(domain, options);
|
||||
});
|
||||
</script>
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Widget Container */
|
||||
.support-widget {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #1f1f2e 0%, #2a2a3e 100%);
|
||||
color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
width: 320px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
z-index: 9999;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.support-widget:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Widget States */
|
||||
.support-widget.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.support-widget.minimized {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Online Indicator */
|
||||
.online-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
animation: fadeInDown 0.6s ease;
|
||||
}
|
||||
|
||||
.widget-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.minimize-btn,
|
||||
.close-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.minimize-btn:hover,
|
||||
.close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Status Dot */
|
||||
.status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
background: #00e676;
|
||||
box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.status-dot.offline {
|
||||
background: #ff5252;
|
||||
box-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.online-text {
|
||||
color: #00e676;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.offline-text {
|
||||
color: #ff5252;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Content Elements */
|
||||
.main-heading {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px;
|
||||
background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
animation: fadeInUp 0.6s ease 0.1s both;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24px;
|
||||
color: #e0e0e0;
|
||||
animation: fadeInUp 0.6s ease 0.2s both;
|
||||
}
|
||||
|
||||
.expert-images {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
animation: fadeInUp 0.6s ease 0.3s both;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #333;
|
||||
margin: 0 6px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.connect-text {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
color: #bbb;
|
||||
animation: fadeInUp 0.6s ease 0.4s both;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #333 0%, #444 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: linear-gradient(135deg, #444 0%, #555 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 230, 118, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.btn:hover .btn-icon {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 24px;
|
||||
animation: fadeInUp 0.6s ease 0.5s both;
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: #00e676;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: #00c853;
|
||||
}
|
||||
|
||||
/* Minimized Button */
|
||||
.minimized-btn {
|
||||
position: fixed;
|
||||
background: linear-gradient(135deg, #1f1f2e 0%, #2a2a3e 100%);
|
||||
color: #fff;
|
||||
padding: 12px 16px;
|
||||
border-radius: 25px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 9998;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
display: none;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.minimized-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.minimized-btn.show {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.minimized-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Reopener Button */
|
||||
.reopener-btn {
|
||||
position: fixed;
|
||||
background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
|
||||
color: #fff;
|
||||
padding: 16px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 16px rgba(0, 230, 118, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 9998;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.reopener-btn:hover {
|
||||
transform: translateY(-2px) scale(1.05);
|
||||
box-shadow: 0 6px 20px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
.reopener-btn.show {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.reopener-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.reopener-content span {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.support-widget {
|
||||
width: 260px;
|
||||
padding: 18px;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0 3px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 11px 12px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -26px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.minimized-btn,
|
||||
.reopener-btn {
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.support-widget {
|
||||
width: 240px;
|
||||
padding: 16px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.main-heading {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.expert-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
margin-left: -24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.minimized-btn,
|
||||
.reopener-btn {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.support-widget,
|
||||
.support-widget *,
|
||||
.minimized-btn,
|
||||
.reopener-btn {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.status-dot.online {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
.minimize-btn:focus,
|
||||
.close-btn:focus,
|
||||
.minimized-btn:focus,
|
||||
.reopener-btn:focus {
|
||||
outline: 2px solid #00e676;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="meet"></div>
|
||||
<!-- Main Support Widget -->
|
||||
<div class="support-widget" id="supportWidget">
|
||||
<!-- Online indicator -->
|
||||
<div class="online-indicator">
|
||||
<div class="status-dot" id="statusDot"></div>
|
||||
<div class="online-text" id="onlineText">We are online</div>
|
||||
<div class="offline-text" id="offlineText">We are offline</div>
|
||||
<div class="widget-controls">
|
||||
<button
|
||||
class="minimize-btn"
|
||||
onclick="WidgetManager.minimize()"
|
||||
aria-label="Minimize widget"
|
||||
title="Minimize"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 13H5v-2h14v2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="close-btn" onclick="WidgetManager.close()" aria-label="Close widget" title="Close">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main heading -->
|
||||
<h2 class="main-heading">Need a hand?</h2>
|
||||
|
||||
<!-- Subheading -->
|
||||
<p class="subheading">
|
||||
Hop on a <span style="font-weight: bold">Free 1:1 or Group Consultation</span> with a MiroTalk Expert
|
||||
right now!
|
||||
</p>
|
||||
|
||||
<!-- Expert images -->
|
||||
<div class="expert-images">
|
||||
<img src="https://i.pravatar.cc/40?img=1" class="expert-img" alt="Expert consultant 1" loading="lazy" />
|
||||
<img src="https://i.pravatar.cc/40?img=2" class="expert-img" alt="Expert consultant 2" loading="lazy" />
|
||||
<img src="https://i.pravatar.cc/40?img=3" class="expert-img" alt="Expert consultant 3" loading="lazy" />
|
||||
</div>
|
||||
|
||||
<div class="connect-text">connect in < 10 seconds</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<button class="btn" onclick="CallManager.startAudioCall()" aria-label="Start audio call with expert">
|
||||
<div class="btn-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M6.6,10.8c1.3,2.6,3.5,4.8,6.1,6.1l2-2c0.4-0.4,1-0.5,1.5-0.3c1.6,0.5,3.3,0.8,5,0.8c0.6,0,1,0.4,1,1V21c0,0.6-0.4,1-1,1C10.1,22,2,13.9,2,4c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1c0,1.7,0.3,3.4,0.8,5C7.1,9.8,7,10.4,6.6,10.8z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Audio Call</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="CallManager.startVideoCall()" aria-label="Start video call with expert">
|
||||
<div class="btn-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M17 10.5V7c0-1.1-.9-2-2-2H5C3.9 5 3 5.9 3 7v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-3.5l4 4v-11l-4 4z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Video Call</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="CallManager.startScreenShare()" aria-label="Start screen sharing with expert">
|
||||
<div class="btn-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z"
|
||||
/>
|
||||
<circle cx="12" cy="11" r="2" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Start Screen Share</span>
|
||||
</button>
|
||||
|
||||
<button class="btn" onclick="CallManager.joinRoom()" aria-label="Join support room">
|
||||
<div class="btn-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="btn-text">Join Room</span>
|
||||
</button>
|
||||
|
||||
<div class="footer-text">
|
||||
Powered by <a href="#" class="footer-link" onclick="CallManager.openMiroTalk()">MiroTalk</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Minimized Button -->
|
||||
<div class="minimized-btn" id="minimizedBtn" onclick="WidgetManager.restore()">
|
||||
<div class="minimized-content">
|
||||
<div class="status-dot" id="minimizedStatusDot"></div>
|
||||
<span>Support</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reopener Button -->
|
||||
<div class="reopener-btn" id="reopenerBtn" onclick="WidgetManager.reopen()">
|
||||
<div class="reopener-content">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="white">
|
||||
<path
|
||||
d="M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4c0 .7.5 1.2 1.2 1.2h16.8c.7 0 1.2-.5 1.2-1.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Support</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Configuration
|
||||
const CONFIG = {
|
||||
domain: 'sfu.mirotalk.com', // Replace with your MiroTalk server domain
|
||||
roomId: 'test', // Replace with desired room ID
|
||||
userName: 'guest-' + Math.floor(Math.random() * 10000),
|
||||
checkOnlineStatus: false, // Set to true to enable real status checking
|
||||
};
|
||||
|
||||
// Widget State Manager
|
||||
const WidgetManager = {
|
||||
state: 'normal', // 'normal', 'minimized', 'closed'
|
||||
elements: {
|
||||
widget: document.getElementById('supportWidget'),
|
||||
minimizedBtn: document.getElementById('minimizedBtn'),
|
||||
reopenerBtn: document.getElementById('reopenerBtn'),
|
||||
statusDot: document.getElementById('statusDot'),
|
||||
minimizedStatusDot: document.getElementById('minimizedStatusDot'),
|
||||
onlineText: document.getElementById('onlineText'),
|
||||
offlineText: document.getElementById('offlineText'),
|
||||
},
|
||||
|
||||
setState(newState) {
|
||||
console.log(`Widget state changing from ${this.state} to ${newState}`);
|
||||
this.state = newState;
|
||||
this.updateUI();
|
||||
},
|
||||
|
||||
updateUI() {
|
||||
const { widget, minimizedBtn, reopenerBtn } = this.elements;
|
||||
|
||||
// Reset all states
|
||||
widget.classList.remove('minimized', 'hidden');
|
||||
minimizedBtn.classList.remove('show');
|
||||
reopenerBtn.classList.remove('show');
|
||||
|
||||
switch (this.state) {
|
||||
case 'normal':
|
||||
// Widget is fully visible
|
||||
break;
|
||||
case 'minimized':
|
||||
widget.classList.add('minimized');
|
||||
minimizedBtn.classList.add('show');
|
||||
break;
|
||||
case 'closed':
|
||||
widget.classList.add('hidden');
|
||||
reopenerBtn.classList.add('show');
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
minimize() {
|
||||
this.setState('minimized');
|
||||
},
|
||||
|
||||
restore() {
|
||||
this.setState('normal');
|
||||
},
|
||||
|
||||
close() {
|
||||
this.setState('closed');
|
||||
},
|
||||
|
||||
reopen() {
|
||||
this.setState('normal');
|
||||
},
|
||||
};
|
||||
|
||||
// Status Manager
|
||||
const StatusManager = {
|
||||
isOnline: true,
|
||||
|
||||
updateStatus(online) {
|
||||
this.isOnline = online;
|
||||
this.updateUI(online);
|
||||
console.log('Online status updated:', online);
|
||||
},
|
||||
|
||||
updateUI(online) {
|
||||
const statusDots = [WidgetManager.elements.statusDot, WidgetManager.elements.minimizedStatusDot];
|
||||
|
||||
statusDots.forEach((dot) => {
|
||||
if (dot) {
|
||||
dot.classList.toggle('online', online);
|
||||
dot.classList.toggle('offline', !online);
|
||||
}
|
||||
});
|
||||
|
||||
const { onlineText, offlineText } = WidgetManager.elements;
|
||||
if (onlineText && offlineText) {
|
||||
onlineText.style.display = online ? 'inline' : 'none';
|
||||
offlineText.style.display = online ? 'none' : 'inline';
|
||||
}
|
||||
},
|
||||
|
||||
async checkOnlineStatus() {
|
||||
if (!CONFIG.checkOnlineStatus) {
|
||||
this.updateStatus(true); // Default to online for demo
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://${CONFIG.domain}/isRoomActive`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ roomId: CONFIG.roomId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const online = data.message && data.message !== 'Unauthorized';
|
||||
this.updateStatus(online);
|
||||
} catch (error) {
|
||||
console.warn('Failed to check room status:', error.message);
|
||||
this.updateStatus(false);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Call Manager
|
||||
const CallManager = {
|
||||
alertOffline() {
|
||||
alert('Sorry, support is currently offline.');
|
||||
},
|
||||
|
||||
startAudioCall() {
|
||||
if (StatusManager.isOnline) {
|
||||
console.log('Starting audio call...');
|
||||
window.open(
|
||||
`https://${CONFIG.domain}/join?room=${CONFIG.roomId}&name=${CONFIG.userName}&audio=1&video=0&screen=0`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
this.alertOffline();
|
||||
}
|
||||
},
|
||||
|
||||
startVideoCall() {
|
||||
if (StatusManager.isOnline) {
|
||||
console.log('Starting video call...');
|
||||
window.open(
|
||||
`https://${CONFIG.domain}/join?room=${CONFIG.roomId}&name=${CONFIG.userName}&audio=0&video=1&screen=0`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
this.alertOffline();
|
||||
}
|
||||
},
|
||||
|
||||
startScreenShare() {
|
||||
if (StatusManager.isOnline) {
|
||||
console.log('Starting screen share...');
|
||||
window.open(
|
||||
`https://${CONFIG.domain}/join?room=${CONFIG.roomId}&name=${CONFIG.userName}&audio=0&video=0&screen=1`,
|
||||
'_blank'
|
||||
);
|
||||
} else {
|
||||
this.alertOffline();
|
||||
}
|
||||
},
|
||||
|
||||
joinRoom() {
|
||||
if (StatusManager.isOnline) {
|
||||
console.log('Joining room...');
|
||||
window.open(`https://${CONFIG.domain}/join?room=${CONFIG.roomId}`, '_blank');
|
||||
} else {
|
||||
this.alertOffline();
|
||||
}
|
||||
},
|
||||
|
||||
openMiroTalk() {
|
||||
window.open(`https://${CONFIG.domain}`, '_blank');
|
||||
},
|
||||
};
|
||||
|
||||
// Event Listeners
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') {
|
||||
WidgetManager.close();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
console.log('Support Widget initialized');
|
||||
|
||||
// Set initial state
|
||||
WidgetManager.setState('normal');
|
||||
|
||||
// Check online status
|
||||
StatusManager.checkOnlineStatus();
|
||||
|
||||
// Periodically check status (every 30 seconds)
|
||||
if (CONFIG.checkOnlineStatus) {
|
||||
setInterval(() => {
|
||||
StatusManager.checkOnlineStatus();
|
||||
}, 30000);
|
||||
}
|
||||
});
|
||||
|
||||
// Global access for debugging
|
||||
window.SupportWidget = {
|
||||
WidgetManager,
|
||||
StatusManager,
|
||||
CallManager,
|
||||
CONFIG,
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
17
widgets/example-4.html
Normal file
17
widgets/example-4.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk SFU - Simple Iframe Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<iframe
|
||||
id="mirotalkIframe"
|
||||
allow="camera; microphone; display-capture; fullscreen; clipboard-read; clipboard-write; web-share; autoplay"
|
||||
src="https://sfu.mirotalk.com/newroom"
|
||||
style="height: 100vh; width: 100vw; border: 0px"
|
||||
></iframe>
|
||||
</body>
|
||||
</html>
|
||||
36
widgets/example-5.html
Normal file
36
widgets/example-5.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk SFU - Embedded Meeting Widget</title>
|
||||
|
||||
<script src="https://sfu.mirotalk.com/js/Iframe.js" defer></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const domain = 'sfu.mirotalk.com';
|
||||
const options = {
|
||||
room: 'test',
|
||||
roomPassword: 0,
|
||||
name: 'guest-' + Math.floor(Math.random() * 10000),
|
||||
avatar: 0,
|
||||
audio: 0,
|
||||
video: 0,
|
||||
screen: 0,
|
||||
hide: 0,
|
||||
notify: 0,
|
||||
duration: 'unlimited', // HH:MM:SS
|
||||
token: null,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
parentNode: document.querySelector('#meet'),
|
||||
};
|
||||
const api = new IframeApi(domain, options);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="meet"></div>
|
||||
</body>
|
||||
</html>
|
||||
702
widgets/maker.html
Normal file
702
widgets/maker.html
Normal file
@@ -0,0 +1,702 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk Widget Maker</title>
|
||||
<link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>"
|
||||
/>
|
||||
<!-- Font Awesome CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #1f1f2e 0%, #2a2a3e 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.header h1::before {
|
||||
content: '\f135';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
margin-right: 15px;
|
||||
background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: #f8f9fa;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.form-section h2 {
|
||||
color: #2a2a3e;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-section h2::before {
|
||||
content: '\f085';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
color: #00e676;
|
||||
}
|
||||
|
||||
.form-section:nth-child(2) h2::before {
|
||||
content: '\f1de';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
color: #00e676;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: #00e676;
|
||||
box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.1);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.checkbox-group input[type='checkbox'] {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
display: inline-block;
|
||||
background: #00e676;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.tooltip::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #2a2a3e;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.tooltip:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.output-section {
|
||||
background: #1f1f2e;
|
||||
color: white;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
grid-column: 1 / -1;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.output-section h2 {
|
||||
color: #00e676;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.output-section h2::before {
|
||||
content: '\f0ea';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
color: #00e676;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
position: relative;
|
||||
background: #0d1117;
|
||||
border: 1px solid #30363d;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.code-header {
|
||||
background: #21262d;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #30363d;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.code-header span {
|
||||
font-size: 12px;
|
||||
color: #8b949e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: #238636;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.copy-btn::before {
|
||||
content: '\f0c5';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #2ea043;
|
||||
}
|
||||
|
||||
.copy-btn.copied {
|
||||
background: #00e676;
|
||||
}
|
||||
|
||||
.copy-btn.copied::before {
|
||||
content: '\f00c';
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#generated-code {
|
||||
background: #0d1117;
|
||||
color: #e6edf3;
|
||||
padding: 20px;
|
||||
font-family: 'Courier New', Consolas, monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
height: calc(500px - 49px);
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
border: none;
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
font-family: 'Font Awesome 6 Free';
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
content: '\f0c7';
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 230, 118, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary::before {
|
||||
content: '\f021';
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.output-section {
|
||||
margin-top: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.code-container {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#generated-code {
|
||||
height: calc(400px - 49px);
|
||||
font-size: 12px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
max-width: 250px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>MiroTalk Widget Maker</h1>
|
||||
<p>Create custom embeddable widgets for your website in seconds</p>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<!-- Configuration Form -->
|
||||
<div class="form-section">
|
||||
<h2>Widget Configuration</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="domain" class="tooltip" data-tooltip="Your MiroTalk server domain">
|
||||
Domain <span style="color: #dc3545">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="domain"
|
||||
value="sfu.mirotalk.com"
|
||||
placeholder="example.com or sfu.mirotalk.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="room">Room ID</label>
|
||||
<input type="text" id="room" value="support-room" placeholder="my-support-room" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="theme">Theme</label>
|
||||
<select id="theme">
|
||||
<option value="dark">Dark Theme</option>
|
||||
<option value="light">Light Theme</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="position">Position</label>
|
||||
<select id="position">
|
||||
<option value="bottom-right">Bottom Right</option>
|
||||
<option value="bottom-left">Bottom Left</option>
|
||||
<option value="top-right">Top Right</option>
|
||||
<option value="top-left">Top Left</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="widget-state" class="tooltip" data-tooltip="Initial state when widget loads">
|
||||
Widget State
|
||||
</label>
|
||||
<select id="widget-state">
|
||||
<option value="normal">Normal (Visible)</option>
|
||||
<option value="minimized">Minimized</option>
|
||||
<option value="closed">Closed (Button Only)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="check-online" />
|
||||
<label for="check-online">Check Online Status <span class="feature-badge">PRO</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customization Form -->
|
||||
<div class="form-section">
|
||||
<h2>Custom Messages</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="heading">Heading</label>
|
||||
<input type="text" id="heading" value="Need Help?" placeholder="Need Help?" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subheading">Subheading</label>
|
||||
<textarea id="subheading" placeholder="Get instant support from our expert team!">
|
||||
Get instant support from our expert team!</textarea
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="connect-text">Connect Text</label>
|
||||
<input
|
||||
type="text"
|
||||
id="connect-text"
|
||||
value="connect in < 5 seconds"
|
||||
placeholder="connect in < 5 seconds"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="online-text">Online Text</label>
|
||||
<input type="text" id="online-text" value="We are online" placeholder="We are online" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="offline-text">Offline Text</label>
|
||||
<input type="text" id="offline-text" value="We are offline" placeholder="We are offline" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="powered-by">Powered By</label>
|
||||
<input
|
||||
type="text"
|
||||
id="powered-by"
|
||||
value="Powered by MiroTalk"
|
||||
placeholder="Powered by MiroTalk"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Generated Code -->
|
||||
<div class="output-section">
|
||||
<h2>Generated Code</h2>
|
||||
<div class="code-container">
|
||||
<div class="code-header">
|
||||
<span>HTML</span>
|
||||
<button class="copy-btn" id="copy-btn">Copy</button>
|
||||
</div>
|
||||
<textarea id="generated-code" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary" id="download-btn">Download HTML</button>
|
||||
<button class="btn btn-secondary" id="reset-btn">Reset Form</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Form elements
|
||||
const form = {
|
||||
domain: document.getElementById('domain'),
|
||||
room: document.getElementById('room'),
|
||||
theme: document.getElementById('theme'),
|
||||
position: document.getElementById('position'),
|
||||
widgetState: document.getElementById('widget-state'),
|
||||
checkOnline: document.getElementById('check-online'),
|
||||
heading: document.getElementById('heading'),
|
||||
subheading: document.getElementById('subheading'),
|
||||
connectText: document.getElementById('connect-text'),
|
||||
onlineText: document.getElementById('online-text'),
|
||||
offlineText: document.getElementById('offline-text'),
|
||||
poweredBy: document.getElementById('powered-by'),
|
||||
};
|
||||
|
||||
const generatedCode = document.getElementById('generated-code');
|
||||
|
||||
// Generate HTML code
|
||||
function generateCode() {
|
||||
const config = {
|
||||
domain: form.domain.value || 'sfu.mirotalk.com',
|
||||
room: form.room.value || 'support-room',
|
||||
theme: form.theme.value,
|
||||
position: form.position.value,
|
||||
widgetState: form.widgetState.value,
|
||||
checkOnline: form.checkOnline.checked,
|
||||
heading: form.heading.value || 'Need Help?',
|
||||
subheading: form.subheading.value || 'Get instant support from our expert team!',
|
||||
connectText: form.connectText.value || 'connect in < 5 seconds',
|
||||
onlineText: form.onlineText.value || 'We are online',
|
||||
offlineText: form.offlineText.value || 'We are offline',
|
||||
poweredBy: form.poweredBy.value || 'Powered by MiroTalk',
|
||||
};
|
||||
|
||||
const html = `<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MiroTalk Widget</title>
|
||||
<script src="https://${config.domain}/js/Widget.js"><\/script>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="mirotalk-widget"
|
||||
data-mirotalk-auto
|
||||
data-domain="${config.domain}"
|
||||
data-room="${config.room}"
|
||||
data-theme="${config.theme}"
|
||||
data-widget-type="support"
|
||||
data-position="${config.position}"
|
||||
data-widget-state="${config.widgetState}"
|
||||
data-check-online="${config.checkOnline}"
|
||||
data-heading="${escapeHtml(config.heading)}"
|
||||
data-subheading="${escapeHtml(config.subheading)}"
|
||||
data-connect-text="${escapeHtml(config.connectText)}"
|
||||
data-online-text="${escapeHtml(config.onlineText)}"
|
||||
data-offline-text="${escapeHtml(config.offlineText)}"
|
||||
data-powered-by="${escapeHtml(config.poweredBy)}"
|
||||
></div>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
generatedCode.value = html;
|
||||
}
|
||||
|
||||
// Escape HTML
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Copy code to clipboard
|
||||
async function copyCode() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(generatedCode.value);
|
||||
const btn = document.getElementById('copy-btn');
|
||||
btn.textContent = 'Copied!';
|
||||
btn.classList.add('copied');
|
||||
|
||||
setTimeout(() => {
|
||||
btn.textContent = 'Copy';
|
||||
btn.classList.remove('copied');
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
// Fallback for older browsers
|
||||
generatedCode.select();
|
||||
document.execCommand('copy');
|
||||
alert('Code copied to clipboard!');
|
||||
}
|
||||
}
|
||||
|
||||
// Download code as HTML file
|
||||
function downloadCode() {
|
||||
const blob = new Blob([generatedCode.value], { type: 'text/html' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `mirotalk-widget-${Date.now()}.html`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// Reset form to defaults
|
||||
function resetForm() {
|
||||
form.domain.value = 'sfu.mirotalk.com';
|
||||
form.room.value = 'support-room';
|
||||
form.theme.value = 'dark';
|
||||
form.position.value = 'bottom-right';
|
||||
form.widgetState.value = 'normal';
|
||||
form.checkOnline.checked = false;
|
||||
form.heading.value = 'Need Help?';
|
||||
form.subheading.value = 'Get instant support from our expert team!';
|
||||
form.connectText.value = 'connect in < 5 seconds';
|
||||
form.onlineText.value = 'We are online';
|
||||
form.offlineText.value = 'We are offline';
|
||||
form.poweredBy.value = 'Powered by MiroTalk';
|
||||
|
||||
generateCode();
|
||||
}
|
||||
|
||||
// Auto-save form data to localStorage
|
||||
function saveFormData() {
|
||||
const data = {};
|
||||
Object.keys(form).forEach((key) => {
|
||||
if (form[key].type === 'checkbox') {
|
||||
data[key] = form[key].checked;
|
||||
} else {
|
||||
data[key] = form[key].value;
|
||||
}
|
||||
});
|
||||
localStorage.setItem('mirotalk-widget-maker', JSON.stringify(data));
|
||||
}
|
||||
|
||||
// Load form data from localStorage
|
||||
function loadFormData() {
|
||||
try {
|
||||
const data = JSON.parse(localStorage.getItem('mirotalk-widget-maker'));
|
||||
if (data) {
|
||||
Object.keys(data).forEach((key) => {
|
||||
if (form[key]) {
|
||||
if (form[key].type === 'checkbox') {
|
||||
form[key].checked = data[key];
|
||||
} else {
|
||||
form[key].value = data[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
generateCode();
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to load saved form data');
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listeners to all form elements
|
||||
Object.values(form).forEach((element) => {
|
||||
element.addEventListener('input', generateCode);
|
||||
element.addEventListener('change', generateCode);
|
||||
element.addEventListener('input', saveFormData);
|
||||
element.addEventListener('change', saveFormData);
|
||||
});
|
||||
|
||||
// Add event listeners for buttons
|
||||
document.getElementById('copy-btn').addEventListener('click', copyCode);
|
||||
document.getElementById('download-btn').addEventListener('click', downloadCode);
|
||||
document.getElementById('reset-btn').addEventListener('click', resetForm);
|
||||
|
||||
// Generate initial code and load saved data
|
||||
generateCode();
|
||||
loadFormData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
المرجع في مشكلة جديدة
حظر مستخدم