diff --git a/widgets/example-1.html b/widgets/example-1.html
index 13e9ea82..65626296 100644
--- a/widgets/example-1.html
+++ b/widgets/example-1.html
@@ -3,57 +3,9 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>MiroTalk - Support Widget</title>
+        <title>MiroTalk SFU - Custom 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 */
             @keyframes pulse {
                 0% {
                     transform: scale(1);
@@ -91,6 +43,126 @@
                 }
             }
 
+            @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;
@@ -101,26 +173,10 @@
                 color: #ff5252;
                 font-weight: 600;
                 font-size: 14px;
+                display: none;
             }
 
-            .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);
-            }
-
+            /* Content Elements */
             .main-heading {
                 font-size: 24px;
                 font-weight: 700;
@@ -165,6 +221,7 @@
                 animation: fadeInUp 0.6s ease 0.4s both;
             }
 
+            /* Buttons */
             .btn {
                 display: flex;
                 align-items: center;
@@ -236,54 +293,87 @@
                 color: #00c853;
             }
 
-            @media (max-width: 1200px) {
-                .widget-container {
-                    width: 300px;
-                    padding: 22px;
-                }
+            /* 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);
             }
 
-            @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;
-                }
+            .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) {
-                .widget-container {
+                .support-widget {
                     width: 260px;
                     padding: 18px;
                     bottom: 12px;
@@ -302,10 +392,6 @@
                     line-height: 1.4;
                 }
 
-                .expert-images {
-                    margin-bottom: 10px;
-                }
-
                 .expert-img {
                     width: 36px;
                     height: 36px;
@@ -313,11 +399,6 @@
                     border-width: 2px;
                 }
 
-                .connect-text {
-                    font-size: 13px;
-                    margin-bottom: 18px;
-                }
-
                 .btn {
                     padding: 11px 12px;
                     font-size: 14px;
@@ -335,70 +416,37 @@
                     font-size: 14px;
                 }
 
-                .footer-text {
-                    margin-top: 18px;
-                    font-size: 11px;
+                .minimized-btn,
+                .reopener-btn {
+                    bottom: 12px;
+                    right: 12px;
                 }
             }
 
             @media (max-width: 480px) {
-                .widget-container {
+                .support-widget {
                     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 {
@@ -406,126 +454,66 @@
                     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;
+                .minimized-btn,
+                .reopener-btn {
+                    bottom: 10px;
+                    right: 10px;
                 }
             }
 
-            @media (max-width: 360px) {
-                .widget-container {
-                    width: 220px;
-                    padding: 14px;
-                    bottom: 8px;
-                    right: 8px;
+            /* 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;
                 }
 
-                .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;
+                .status-dot.online {
+                    animation: none;
                 }
             }
 
-            /* 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;
-                }
+            .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 class="widget-container">
+        <!-- Main Support Widget -->
+        <div class="support-widget" id="supportWidget">
             <!-- 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">
-                    &times;
+                <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">
+                        &times;
+                    </button>
                 </div>
             </div>
 
@@ -547,9 +535,9 @@
 
             <div class="connect-text">connect in &lt; 10 seconds</div>
 
-            <!-- Buttons -->
-            <button class="btn" onclick="startAudioCall()" aria-label="Start audio call with expert">
-                <div class="btn-icon" aria-hidden="true">
+            <!-- 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"
@@ -559,8 +547,8 @@
                 <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">
+            <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"
@@ -570,8 +558,8 @@
                 <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">
+            <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"
@@ -582,8 +570,8 @@
                 <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">
+            <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"
@@ -594,145 +582,240 @@
             </button>
 
             <div class="footer-text">
-                Powered by <a href="#" class="footer-link" onclick="openMiroTalk()">MiroTalk</a>
+                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>
-            const indicator = document.querySelector('.online-indicator');
-            const statusDot = document.querySelector('.status-dot');
-            const onlineText = document.querySelector('.online-text');
-            const offlineText = document.querySelector('.offline-text');
+            // Configuration
+            const CONFIG = {
+                domain: 'p2p.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
+            };
 
-            const domain = 'p2p.mirotalk.com'; // Replace with your MiroTalk server domain
+            // 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'),
+                },
 
-            const roomId = 'test'; // Replace with desired room ID
+                setState(newState) {
+                    console.log(`Widget state changing from ${this.state} to ${newState}`);
+                    this.state = newState;
+                    this.updateUI();
+                },
 
-            const userName = 'guest-' + Math.floor(Math.random() * 10000);
+                updateUI() {
+                    const { widget, minimizedBtn, reopenerBtn } = this.elements;
 
-            let isOnline = true; // Replace with actual online status check logic
+                    // Reset all states
+                    widget.classList.remove('minimized', 'hidden');
+                    minimizedBtn.classList.remove('show');
+                    reopenerBtn.classList.remove('show');
 
-            checkOnlineStatus(roomId);
+                    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;
+                    }
+                },
 
-            function updateStatusUI(online) {
-                isOnline = online;
+                minimize() {
+                    this.setState('minimized');
+                },
 
-                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';
-                }
+                restore() {
+                    this.setState('normal');
+                },
 
-                console.log('Room active status:', online);
-            }
+                close() {
+                    this.setState('closed');
+                },
 
-            async function checkOnlineStatus(roomId) {
-                return updateStatusUI(isOnline); // For testing, assume always online comment this line to enable real status check
+                reopen() {
+                    this.setState('normal');
+                },
+            };
 
-                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 }),
+            // 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);
+                        }
                     });
 
-                    if (!response.ok) {
-                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                    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;
                     }
 
-                    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);
-                }
-            }
+                    try {
+                        const response = await fetch(`https://${CONFIG.domain}/isRoomActive`, {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ roomId: CONFIG.roomId }),
+                        });
 
-            function closeWidget() {
-                const widget = document.querySelector('.widget-container');
-                widget.style.animation = 'fadeOut 0.3s ease forwards';
-                setTimeout(() => {
-                    widget.style.display = 'none';
-                }, 300);
-            }
+                        if (!response.ok) {
+                            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+                        }
 
-            function alertOffline() {
-                alert('Sorry, support is currently offline.');
-            }
+                        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);
+                    }
+                },
+            };
 
-            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();
-                }
-            }
+            // Call Manager
+            const CallManager = {
+                alertOffline() {
+                    alert('Sorry, support is currently offline.');
+                },
 
-            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();
-                }
-            }
+                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();
+                    }
+                },
 
-            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();
-                }
-            }
+                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();
+                    }
+                },
 
-            function joinRoom() {
-                if (isOnline) {
-                    console.log('Joining room...');
-                    window.open(`https://${domain}/join?room=${roomId}`, '_blank');
-                } else {
-                    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();
+                    }
+                },
 
-            function openMiroTalk() {
-                window.open(`https://${domain}`, '_blank');
-            }
+                joinRoom() {
+                    if (StatusManager.isOnline) {
+                        console.log('Joining room...');
+                        window.open(`https://${CONFIG.domain}/join?room=${CONFIG.roomId}`, '_blank');
+                    } else {
+                        this.alertOffline();
+                    }
+                },
 
-            // Add keyboard navigation support
+                openMiroTalk() {
+                    window.open(`https://${CONFIG.domain}`, '_blank');
+                },
+            };
+
+            // Event Listeners
             document.addEventListener('keydown', function (e) {
                 if (e.key === 'Escape') {
-                    closeWidget();
+                    WidgetManager.close();
                 }
             });
 
-            // 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);
+            // 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>
