diff --git a/widgets/README.md b/widgets/README.md
new file mode 100644
index 00000000..95c463d8
--- /dev/null
+++ b/widgets/README.md
@@ -0,0 +1,3 @@
+# MiroTalk SFU Widgets
+
+This directory contains embeddable example widgets for MiroTalk SFU that can be integrated into any website or application.
diff --git a/widgets/example-1.html b/widgets/example-1.html
new file mode 100644
index 00000000..7133f485
--- /dev/null
+++ b/widgets/example-1.html
@@ -0,0 +1,738 @@
+<!doctype html>
+<html lang="en">
+    <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>
+    </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">
+                    &times;
+                </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 &lt; 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>
+    </body>
+</html>
diff --git a/widgets/example-2.html b/widgets/example-2.html
new file mode 100644
index 00000000..791b4ead
--- /dev/null
+++ b/widgets/example-2.html
@@ -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>
diff --git a/widgets/example-3.html b/widgets/example-3.html
new file mode 100644
index 00000000..c315cd61
--- /dev/null
+++ b/widgets/example-3.html
@@ -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>
