[mirotalk] - update widgets
This commit is contained in:
Miroslav Pejic
+1
-1
@@ -45,7 +45,7 @@ dependencies: {
|
||||
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
|
||||
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
|
||||
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
|
||||
* @version 1.5.49
|
||||
* @version 1.5.50
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "mirotalk",
|
||||
"version": "1.5.49",
|
||||
"version": "1.5.50",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "mirotalk",
|
||||
"version": "1.5.49",
|
||||
"version": "1.5.50",
|
||||
"license": "AGPL-3.0",
|
||||
"dependencies": {
|
||||
"@mattermost/client": "10.9.0",
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mirotalk",
|
||||
"version": "1.5.49",
|
||||
"version": "1.5.50",
|
||||
"description": "A free WebRTC browser-based video call",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
|
||||
@@ -0,0 +1,849 @@
|
||||
/* Keyframes */
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main Widget Styles */
|
||||
.mirotalk-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;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* Light Theme Overrides */
|
||||
.mirotalk-support-widget.light-theme {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
color: #333;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Position Classes */
|
||||
.mirotalk-support-widget.bottom-right,
|
||||
.mirotalk-minimized-btn.bottom-right,
|
||||
.mirotalk-reopener-btn.bottom-right {
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.bottom-left,
|
||||
.mirotalk-minimized-btn.bottom-left,
|
||||
.mirotalk-reopener-btn.bottom-left {
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-right,
|
||||
.mirotalk-minimized-btn.top-right,
|
||||
.mirotalk-reopener-btn.top-right {
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-left,
|
||||
.mirotalk-minimized-btn.top-left,
|
||||
.mirotalk-reopener-btn.top-left {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
/* Widget Hover Effects */
|
||||
.mirotalk-support-widget:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme:hover {
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Online Indicator */
|
||||
.mirotalk-support-widget .online-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
animation: fadeInDown 0.6s ease;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot,
|
||||
.mirotalk-support-widget .status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot.online,
|
||||
.mirotalk-support-widget .status-dot.online {
|
||||
background: #00e676;
|
||||
box-shadow: 0 0 8px rgba(0, 230, 118, 0.4);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot.offline,
|
||||
.mirotalk-support-widget .status-dot.offline {
|
||||
background: #ff5252;
|
||||
box-shadow: 0 0 8px rgba(255, 82, 82, 0.4);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .online-text {
|
||||
color: #00e676;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .offline-text {
|
||||
color: #ff5252;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Widget Controls */
|
||||
.mirotalk-support-widget .widget-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .minimize-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;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .minimize-btn {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .minimize-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .minimize-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .close-btn {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .close-btn {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .close-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Content Elements */
|
||||
.mirotalk-support-widget .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;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .main-heading {
|
||||
background: linear-gradient(135deg, #333 0%, #555 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 24px;
|
||||
color: #e0e0e0;
|
||||
animation: fadeInUp 0.6s ease 0.2s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .subheading {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-images {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
animation: fadeInUp 0.6s ease 0.3s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .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);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .expert-img {
|
||||
border: 3px solid #e0e0e0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .connect-text {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
color: #bbb;
|
||||
animation: fadeInUp 0.6s ease 0.4s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .connect-text {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.mirotalk-support-widget .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);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .btn {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
color: #333;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn:hover {
|
||||
background: linear-gradient(135deg, #444 0%, #555 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .btn:hover {
|
||||
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .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;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn:hover .btn-icon {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 16px rgba(0, 230, 118, 0.4);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.mirotalk-support-widget .footer-text {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-top: 24px;
|
||||
animation: fadeInUp 0.6s ease 0.5s both;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .footer-text {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .footer-link {
|
||||
color: #00e676;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .footer-link:hover {
|
||||
color: #00c853;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .mirotalk-powered-by {
|
||||
color: #00e676;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.light-theme .mirotalk-powered-by {
|
||||
color: #00c853;
|
||||
}
|
||||
|
||||
/* Widget States */
|
||||
.mirotalk-support-widget.minimized {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Minimized Button */
|
||||
.mirotalk-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);
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn.light-theme {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
|
||||
color: #333;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn.light-theme:hover {
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .minimized-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Reopener Button - Fully Rounded */
|
||||
.mirotalk-reopener-btn {
|
||||
position: fixed;
|
||||
background: linear-gradient(135deg, #23233a 0%, #2a2a3e 100%);
|
||||
color: #fff;
|
||||
padding: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
z-index: 9998;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid rgba(255, 255, 255, 0.15);
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.02em;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.light-theme {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
color: #222;
|
||||
border: 2px solid rgba(0, 0, 0, 0.13);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn:hover {
|
||||
transform: translateY(-4px) scale(1.07);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
|
||||
background: linear-gradient(135deg, #2a2a3e 0%, #23233a 100%);
|
||||
color: #00e676;
|
||||
border-color: #00e676;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.light-theme:hover {
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
|
||||
background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
|
||||
color: #00c853;
|
||||
border-color: #00c853;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn .reopener-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn .reopener-content span {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 300px;
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 280px;
|
||||
padding: 20px;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 260px;
|
||||
padding: 18px;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.bottom-left,
|
||||
.mirotalk-support-widget.top-left {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-right,
|
||||
.mirotalk-support-widget.top-left {
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 14px;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-images {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
margin: 0 3px;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .connect-text {
|
||||
font-size: 13px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 11px 12px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
margin-left: -26px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.bottom-right {
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.bottom-left {
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.top-right {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.top-left {
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 240px;
|
||||
padding: 16px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.bottom-left,
|
||||
.mirotalk-support-widget.top-left {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-right,
|
||||
.mirotalk-support-widget.top-left {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .online-indicator {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot .mirotalk-support-widget .status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .online-text,
|
||||
.mirotalk-support-widget .offline-text {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .close-btn {
|
||||
font-size: 16px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 13px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-images {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .connect-text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 6px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
margin-left: -24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .footer-text {
|
||||
margin-top: 16px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.bottom-right {
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.bottom-left {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.top-right {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.mirotalk-reopener-btn.top-left {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.mirotalk-support-widget {
|
||||
width: 220px;
|
||||
padding: 14px;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.bottom-left,
|
||||
.mirotalk-support-widget.top-left {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget.top-right,
|
||||
.mirotalk-support-widget.top-left {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn-text {
|
||||
margin-left: -22px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape Orientation */
|
||||
@media (max-height: 600px) and (orientation: landscape) {
|
||||
.mirotalk-support-widget {
|
||||
padding: 12px;
|
||||
width: 280px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .main-heading {
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .subheading {
|
||||
font-size: 13px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-images {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .connect-text {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .footer-text {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* High DPI Displays */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.mirotalk-support-widget {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .btn {
|
||||
border-width: 0.5px;
|
||||
}
|
||||
|
||||
.mirotalk-support-widget .expert-img {
|
||||
border-width: 1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility - Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.mirotalk-support-widget,
|
||||
.mirotalk-support-widget *,
|
||||
.mirotalk-minimized-btn,
|
||||
.mirotalk-reopener-btn {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
|
||||
.mirotalk-minimized-btn .status-dot.online,
|
||||
.mirotalk-support-widget .status-dot.online {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Focus States for Accessibility */
|
||||
.mirotalk-support-widget .btn:focus,
|
||||
.mirotalk-support-widget .minimize-btn:focus,
|
||||
.mirotalk-support-widget .close-btn:focus,
|
||||
.mirotalk-minimized-btn:focus,
|
||||
.mirotalk-reopener-btn:focus {
|
||||
outline: 2px solid #00e676;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.mirotalk-support-widget,
|
||||
.mirotalk-minimized-btn,
|
||||
.mirotalk-reopener-btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -73,7 +73,7 @@ let brand = {
|
||||
},
|
||||
about: {
|
||||
imageUrl: '../images/mirotalk-logo.gif',
|
||||
title: 'WebRTC P2P v1.5.49',
|
||||
title: 'WebRTC P2P v1.5.50',
|
||||
html: `
|
||||
<button
|
||||
id="support-button"
|
||||
|
||||
+2
-2
@@ -15,7 +15,7 @@
|
||||
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
|
||||
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
|
||||
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
|
||||
* @version 1.5.49
|
||||
* @version 1.5.50
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -11242,7 +11242,7 @@ function showAbout() {
|
||||
Swal.fire({
|
||||
background: swBg,
|
||||
position: 'center',
|
||||
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.5.49',
|
||||
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.5.50',
|
||||
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
|
||||
customClass: { image: 'img-about' },
|
||||
html: `
|
||||
|
||||
@@ -0,0 +1,726 @@
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* MiroTalk Widget Factory - Main class for creating and managing widgets
|
||||
*/
|
||||
class MiroTalkWidget {
|
||||
static DEFAULT_OPTIONS = {
|
||||
autoJoin: true,
|
||||
theme: 'dark',
|
||||
widgetState: 'normal', // 'normal', 'minimized', 'closed'
|
||||
widgetType: 'support', // 'support', 'meeting', 'chat' (future)
|
||||
supportWidget: {
|
||||
position: 'bottom-right',
|
||||
expertImages: [
|
||||
'https://i.pravatar.cc/40?img=1',
|
||||
'https://i.pravatar.cc/40?img=2',
|
||||
'https://i.pravatar.cc/40?img=3',
|
||||
],
|
||||
checkOnlineStatus: false,
|
||||
isOnline: true,
|
||||
customMessages: {
|
||||
heading: 'Need a hand?',
|
||||
subheading:
|
||||
'Hop on a <span style="font-weight: bold">Free 1:1 or Group Consultation</span> with a MiroTalk Expert right now!',
|
||||
connectText: 'connect in < 10 seconds',
|
||||
onlineText: 'We are online',
|
||||
offlineText: 'We are offline',
|
||||
poweredBy: 'Powered by <span class="mirotalk-powered-by">MiroTalk</span>',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
constructor(domain, roomId, userName, options = {}) {
|
||||
this.validateRequiredParams(domain, roomId, userName);
|
||||
|
||||
this.protocol = 'https';
|
||||
this.domain = domain;
|
||||
this.roomId = roomId;
|
||||
this.userName = userName;
|
||||
this.options = this.mergeDeep(MiroTalkWidget.DEFAULT_OPTIONS, options);
|
||||
|
||||
// Initialize widget state and status
|
||||
this.widgetState = this.options.widgetState;
|
||||
this.isOnline = this.options.supportWidget.isOnline;
|
||||
|
||||
// Initialize widget registry
|
||||
this.initWidgetRegistry();
|
||||
|
||||
if (this.options.autoJoin) {
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// INITIALIZATION METHODS
|
||||
// ============================================================================
|
||||
|
||||
validateRequiredParams(domain, roomId, userName) {
|
||||
if (!domain) throw new Error('Domain is required');
|
||||
if (!roomId) throw new Error('Room ID is required');
|
||||
if (!userName) throw new Error('User name is required');
|
||||
}
|
||||
|
||||
initWidgetRegistry() {
|
||||
if (!window.miroTalkWidgets) {
|
||||
window.miroTalkWidgets = new Map();
|
||||
}
|
||||
}
|
||||
|
||||
mergeDeep(target, source) {
|
||||
const result = { ...target };
|
||||
for (const key in source) {
|
||||
if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
|
||||
result[key] = this.mergeDeep(target[key] || {}, source[key]);
|
||||
} else {
|
||||
result[key] = source[key];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
init() {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', () => this.createWidget());
|
||||
} else {
|
||||
this.createWidget();
|
||||
}
|
||||
}
|
||||
|
||||
async createWidget() {
|
||||
try {
|
||||
await this.loadWidgetAssets();
|
||||
|
||||
const widget = this.createWidgetHTML();
|
||||
const parentNode = this.getParentNode() || document.body;
|
||||
|
||||
if (parentNode !== document.body) {
|
||||
this.clearParentNode(parentNode);
|
||||
}
|
||||
|
||||
parentNode.appendChild(widget);
|
||||
this.widgetState = 'normal';
|
||||
|
||||
// Initialize widget based on configured state
|
||||
setTimeout(() => this.initWidgetState(this.options.widgetState), 200);
|
||||
|
||||
// Start status checking if enabled
|
||||
this.initStatusChecking();
|
||||
|
||||
console.log(`${this.options.widgetType} widget created successfully`);
|
||||
} catch (error) {
|
||||
console.error('Failed to create widget:', error);
|
||||
}
|
||||
}
|
||||
|
||||
initWidgetState(state) {
|
||||
const stateActions = {
|
||||
minimized: () => this.minimizeWidget(),
|
||||
closed: () => this.closeWidget(),
|
||||
normal: () => {}, // Already in normal state
|
||||
};
|
||||
|
||||
const action = stateActions[state];
|
||||
if (action) action();
|
||||
}
|
||||
|
||||
initStatusChecking() {
|
||||
if (this.options.supportWidget.checkOnlineStatus) {
|
||||
this.checkOnlineStatus();
|
||||
setInterval(() => this.checkOnlineStatus(), 30000); // Check every 30s
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// WIDGET CREATION METHODS
|
||||
// ============================================================================
|
||||
|
||||
async loadWidgetAssets() {
|
||||
const assetLoaders = {
|
||||
support: () => this.loadSupportWidgetAssets(),
|
||||
// Future widget types can be added here
|
||||
// 'meeting': () => this.loadMeetingWidgetAssets(),
|
||||
// 'chat': () => this.loadChatWidgetAssets(),
|
||||
};
|
||||
|
||||
const loader = assetLoaders[this.options.widgetType];
|
||||
if (loader) {
|
||||
await loader();
|
||||
} else {
|
||||
throw new Error(`Unknown widget type: ${this.options.widgetType}`);
|
||||
}
|
||||
}
|
||||
|
||||
async loadSupportWidgetAssets() {
|
||||
await this.injectExternalCSS(
|
||||
`${this.protocol}://${this.domain}/css/widgets/support.css`,
|
||||
'mirotalk-support-css'
|
||||
);
|
||||
}
|
||||
|
||||
createWidgetHTML() {
|
||||
const widgetCreators = {
|
||||
support: () => this.createSupportWidgetHTML(),
|
||||
// Future widget types can be added here
|
||||
// 'meeting': () => this.createMeetingWidgetHTML(),
|
||||
// 'chat': () => this.createChatWidgetHTML(),
|
||||
};
|
||||
|
||||
const creator = widgetCreators[this.options.widgetType];
|
||||
if (creator) {
|
||||
return creator();
|
||||
} else {
|
||||
throw new Error(`Unknown widget type: ${this.options.widgetType}`);
|
||||
}
|
||||
}
|
||||
|
||||
createSupportWidgetHTML() {
|
||||
const { supportWidget, theme } = this.options;
|
||||
const { customMessages, expertImages, position } = supportWidget;
|
||||
|
||||
const widget = document.createElement('div');
|
||||
widget.className = `mirotalk-support-widget ${position} ${theme === 'light' ? 'light-theme' : ''}`;
|
||||
widget.innerHTML = this.getSupportWidgetTemplate({ customMessages, expertImages });
|
||||
|
||||
const widgetId = this.generateWidgetId('widget');
|
||||
this.registerWidget(widgetId, widget);
|
||||
|
||||
return widget;
|
||||
}
|
||||
|
||||
getSupportWidgetTemplate({ customMessages, expertImages }) {
|
||||
return `
|
||||
<div class="online-indicator">
|
||||
<div class="status-dot ${this.isOnline ? 'online' : 'offline'}"></div>
|
||||
<div class="online-text" style="display: ${this.isOnline ? 'inline' : 'none'}">${customMessages.onlineText}</div>
|
||||
<div class="offline-text" style="display: ${this.isOnline ? 'none' : 'inline'}">${customMessages.offlineText}</div>
|
||||
<div class="widget-controls">
|
||||
<button class="minimize-btn" onclick="miroTalkWidgetAction('minimize', this)" title="Minimize">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M19 13H5v-2h14v2z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="close-btn" onclick="miroTalkWidgetAction('close', this)" title="Close">×</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="main-heading">${customMessages.heading}</h2>
|
||||
<p class="subheading">${customMessages.subheading}</p>
|
||||
<div class="expert-images">
|
||||
${expertImages
|
||||
.map(
|
||||
(img, i) => `
|
||||
<img src="${img}" class="expert-img" alt="Expert consultant ${i + 1}" loading="lazy" />
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="connect-text">${customMessages.connectText}</div>
|
||||
${this.createActionButtons()}
|
||||
<div class="footer-text">${customMessages.poweredBy}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createActionButtons() {
|
||||
const buttons = [
|
||||
{ action: 'startAudioCall', icon: this.getAudioIcon(), text: 'Start Audio Call' },
|
||||
{ action: 'startVideoCall', icon: this.getVideoIcon(), text: 'Start Video Call' },
|
||||
{ action: 'startScreenShare', icon: this.getScreenIcon(), text: 'Start Screen Share' },
|
||||
{ action: 'joinRoom', icon: this.getJoinIcon(), text: 'Join Room' },
|
||||
];
|
||||
|
||||
return buttons
|
||||
.map(
|
||||
(btn) => `
|
||||
<button class="btn" onclick="miroTalkWidgetAction('${btn.action}', this)">
|
||||
<div class="btn-icon">${btn.icon}</div>
|
||||
<span class="btn-text">${btn.text}</span>
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// STATE MANAGEMENT METHODS
|
||||
// ============================================================================
|
||||
|
||||
minimizeWidget() {
|
||||
const widget = document.querySelector('.mirotalk-support-widget');
|
||||
if (!widget) {
|
||||
console.warn('Widget not found for minimizing');
|
||||
return;
|
||||
}
|
||||
|
||||
widget.classList.add('minimized');
|
||||
this.widgetState = 'minimized';
|
||||
this.createMinimizedButton();
|
||||
console.log('Widget minimized');
|
||||
}
|
||||
|
||||
restoreWidget() {
|
||||
const widget = document.querySelector('.mirotalk-support-widget');
|
||||
const minimizedBtn = document.querySelector('.mirotalk-minimized-btn');
|
||||
|
||||
if (widget) {
|
||||
widget.classList.remove('minimized');
|
||||
this.widgetState = 'normal';
|
||||
}
|
||||
if (minimizedBtn) {
|
||||
minimizedBtn.remove();
|
||||
}
|
||||
console.log('Widget restored');
|
||||
}
|
||||
|
||||
closeWidget() {
|
||||
this.removeAllWidgetElements();
|
||||
this.widgetState = 'closed';
|
||||
this.createReopenerButton();
|
||||
console.log('Widget closed');
|
||||
}
|
||||
|
||||
reopenWidget() {
|
||||
const reopenerBtn = document.querySelector('.mirotalk-reopener-btn');
|
||||
if (reopenerBtn) reopenerBtn.remove();
|
||||
this.createWidget();
|
||||
console.log('Widget reopened');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// BUTTON CREATION METHODS
|
||||
// ============================================================================
|
||||
|
||||
createMinimizedButton() {
|
||||
this.removeExistingElement('.mirotalk-minimized-btn');
|
||||
|
||||
if (!this.options.supportWidget?.position) {
|
||||
console.error('Support widget position not defined');
|
||||
return;
|
||||
}
|
||||
|
||||
const minimizedBtn = this.createElement('div', {
|
||||
className: this.buildClassNames([
|
||||
'mirotalk-minimized-btn',
|
||||
this.options.supportWidget.position,
|
||||
this.options.theme === 'light' ? 'light-theme' : '',
|
||||
]),
|
||||
});
|
||||
|
||||
const widgetId = this.generateWidgetId('minimized');
|
||||
this.registerWidget(widgetId, minimizedBtn);
|
||||
|
||||
const content = this.createMinimizedContent();
|
||||
minimizedBtn.appendChild(content);
|
||||
minimizedBtn.addEventListener('click', () => this.restoreWidget());
|
||||
|
||||
document.body.appendChild(minimizedBtn);
|
||||
console.log('Minimized button created');
|
||||
}
|
||||
|
||||
createMinimizedContent() {
|
||||
const contentDiv = this.createElement('div', { className: 'minimized-content' });
|
||||
const statusDot = this.createElement('div', {
|
||||
className: `status-dot ${this.isOnline ? 'online' : 'offline'}`,
|
||||
});
|
||||
const textSpan = this.createElement('span', { textContent: 'Support' });
|
||||
|
||||
contentDiv.appendChild(statusDot);
|
||||
contentDiv.appendChild(textSpan);
|
||||
return contentDiv;
|
||||
}
|
||||
|
||||
createReopenerButton() {
|
||||
this.removeExistingElement('.mirotalk-reopener-btn');
|
||||
|
||||
if (!this.options.supportWidget?.position) {
|
||||
console.error('Support widget position not defined');
|
||||
return;
|
||||
}
|
||||
|
||||
const reopenerBtn = this.createElement('div', {
|
||||
className: this.buildClassNames([
|
||||
'mirotalk-reopener-btn',
|
||||
this.options.supportWidget.position,
|
||||
this.options.theme === 'light' ? 'light-theme' : 'dark-theme',
|
||||
]),
|
||||
});
|
||||
|
||||
const widgetId = this.generateWidgetId('reopener');
|
||||
this.registerWidget(widgetId, reopenerBtn);
|
||||
|
||||
reopenerBtn.innerHTML = `
|
||||
<div class="reopener-content" style="display: flex; flex-direction: column; align-items: center;">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<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 style="font-size: 13px; font-weight: 500; margin-top: 4px;">Support</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
reopenerBtn.addEventListener('click', () => this.reopenWidget());
|
||||
document.body.appendChild(reopenerBtn);
|
||||
console.log('Reopener button created');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// STATUS MANAGEMENT METHODS
|
||||
// ============================================================================
|
||||
|
||||
async checkOnlineStatus() {
|
||||
try {
|
||||
const response = await fetch(`${this.protocol}://${this.domain}/isRoomActive`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ roomId: this.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.updateOnlineStatus(online);
|
||||
} catch (error) {
|
||||
console.warn('Failed to check room status:', error.message);
|
||||
this.updateOnlineStatus(false);
|
||||
}
|
||||
}
|
||||
|
||||
updateOnlineStatus(online) {
|
||||
this.isOnline = online;
|
||||
|
||||
const elementsToUpdate = ['.mirotalk-support-widget', '.mirotalk-minimized-btn'];
|
||||
|
||||
elementsToUpdate.forEach((selector) => {
|
||||
const element = document.querySelector(selector);
|
||||
if (element) {
|
||||
this.updateStatusInElement(element, online);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Online status updated:', online);
|
||||
}
|
||||
|
||||
updateStatusInElement(element, online) {
|
||||
const statusDot = element.querySelector('.status-dot');
|
||||
const onlineText = element.querySelector('.online-text');
|
||||
const offlineText = element.querySelector('.offline-text');
|
||||
|
||||
if (statusDot) {
|
||||
statusDot.classList.toggle('online', online);
|
||||
statusDot.classList.toggle('offline', !online);
|
||||
}
|
||||
|
||||
if (onlineText && offlineText) {
|
||||
onlineText.style.display = online ? 'inline' : 'none';
|
||||
offlineText.style.display = online ? 'none' : 'inline';
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ACTION METHODS
|
||||
// ============================================================================
|
||||
|
||||
startAudioCall() {
|
||||
if (this.isOnline) {
|
||||
console.log('Starting audio call...');
|
||||
this.openMeetingWindow({ audio: 1, video: 0, screen: 0 });
|
||||
} else {
|
||||
this.supportOffline();
|
||||
}
|
||||
}
|
||||
|
||||
startVideoCall() {
|
||||
if (this.isOnline) {
|
||||
console.log('Starting video call...');
|
||||
this.openMeetingWindow({ audio: 0, video: 1, screen: 0 });
|
||||
} else {
|
||||
this.supportOffline();
|
||||
}
|
||||
}
|
||||
|
||||
startScreenShare() {
|
||||
if (this.isOnline) {
|
||||
console.log('Starting screen share...');
|
||||
this.openMeetingWindow({ audio: 0, video: 0, screen: 1 });
|
||||
} else {
|
||||
this.supportOffline();
|
||||
}
|
||||
}
|
||||
|
||||
joinRoom() {
|
||||
if (this.isOnline) {
|
||||
console.log('Joining room...');
|
||||
window.open(`${this.protocol}://${this.domain}/join?room=${this.roomId}`, '_blank');
|
||||
} else {
|
||||
this.supportOffline();
|
||||
}
|
||||
}
|
||||
|
||||
openMiroTalk() {
|
||||
window.open(`https://${this.domain}`, '_blank');
|
||||
}
|
||||
|
||||
openMeetingWindow(params) {
|
||||
const queryParams = new URLSearchParams({
|
||||
room: this.roomId,
|
||||
name: this.userName,
|
||||
...params,
|
||||
});
|
||||
window.open(`${this.protocol}://${this.domain}/join?${queryParams}`, '_blank');
|
||||
}
|
||||
|
||||
supportOffline() {
|
||||
alert('Sorry, support is currently offline.');
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// UTILITY METHODS
|
||||
// ============================================================================
|
||||
|
||||
async injectExternalCSS(url, id) {
|
||||
if (document.getElementById(id)) return Promise.resolve();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const link = document.createElement('link');
|
||||
link.id = id;
|
||||
link.rel = 'stylesheet';
|
||||
link.href = url;
|
||||
link.onload = () => {
|
||||
console.log(`CSS loaded successfully: ${url}`);
|
||||
resolve();
|
||||
};
|
||||
link.onerror = () => {
|
||||
console.error(`Failed to load CSS: ${url}`);
|
||||
reject(new Error(`Failed to load CSS: ${url}`));
|
||||
};
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
createElement(tag, properties = {}) {
|
||||
const element = document.createElement(tag);
|
||||
Object.assign(element, properties);
|
||||
return element;
|
||||
}
|
||||
|
||||
generateWidgetId(prefix = 'widget') {
|
||||
return `${prefix}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||
}
|
||||
|
||||
registerWidget(widgetId, element) {
|
||||
window.miroTalkWidgets.set(widgetId, this);
|
||||
element.setAttribute('data-widget-id', widgetId);
|
||||
}
|
||||
|
||||
buildClassNames(classes) {
|
||||
return classes.filter(Boolean).join(' ');
|
||||
}
|
||||
|
||||
removeExistingElement(selector) {
|
||||
const existingElement = document.querySelector(selector);
|
||||
if (existingElement) existingElement.remove();
|
||||
}
|
||||
|
||||
removeAllWidgetElements() {
|
||||
const selectors = ['.mirotalk-support-widget', '.mirotalk-minimized-btn', '.mirotalk-reopener-btn'];
|
||||
selectors.forEach((selector) => {
|
||||
document.querySelectorAll(selector).forEach((element) => element.remove());
|
||||
});
|
||||
}
|
||||
|
||||
getParentNode() {
|
||||
return document.querySelector('#mirotalk-widget') || document.body;
|
||||
}
|
||||
|
||||
clearParentNode(parentNode) {
|
||||
parentNode.innerHTML = '';
|
||||
}
|
||||
|
||||
getWidgetFromElement(element) {
|
||||
const widget = element.closest('.mirotalk-support-widget, .mirotalk-minimized-btn, .mirotalk-reopener-btn');
|
||||
if (widget) {
|
||||
const widgetId = widget.getAttribute('data-widget-id');
|
||||
return window.miroTalkWidgets ? window.miroTalkWidgets.get(widgetId) : this;
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ICON METHODS
|
||||
// ============================================================================
|
||||
|
||||
getAudioIcon() {
|
||||
return `<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>`;
|
||||
}
|
||||
|
||||
getVideoIcon() {
|
||||
return `<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>`;
|
||||
}
|
||||
|
||||
getScreenIcon() {
|
||||
return `<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>`;
|
||||
}
|
||||
|
||||
getJoinIcon() {
|
||||
return `<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>`;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// PUBLIC API METHODS
|
||||
// ============================================================================
|
||||
|
||||
join() {
|
||||
if (!this.getParentNode()) {
|
||||
this.createWidget();
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.removeAllWidgetElements();
|
||||
|
||||
const parentNode = this.getParentNode();
|
||||
if (parentNode && parentNode !== document.body) {
|
||||
this.clearParentNode(parentNode);
|
||||
}
|
||||
|
||||
if (window.miroTalkWidgets) {
|
||||
for (const [key, widget] of window.miroTalkWidgets.entries()) {
|
||||
if (widget === this) {
|
||||
window.miroTalkWidgets.delete(key);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Widget destroyed');
|
||||
}
|
||||
|
||||
updateRoom(newRoomId) {
|
||||
this.roomId = newRoomId;
|
||||
this.createWidget();
|
||||
}
|
||||
|
||||
updateUser(newUserName) {
|
||||
this.userName = newUserName;
|
||||
this.createWidget();
|
||||
}
|
||||
|
||||
getState() {
|
||||
return this.widgetState;
|
||||
}
|
||||
|
||||
isVisible() {
|
||||
return this.widgetState === 'normal';
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// GLOBAL ACTION HANDLER
|
||||
// ============================================================================
|
||||
|
||||
window.miroTalkWidgetAction = function (action, element) {
|
||||
try {
|
||||
const widgetElement = element.closest(
|
||||
'.mirotalk-support-widget, .mirotalk-minimized-btn, .mirotalk-reopener-btn'
|
||||
);
|
||||
|
||||
if (!widgetElement) {
|
||||
console.error('Widget element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
const widgetId = widgetElement.getAttribute('data-widget-id');
|
||||
const widget = window.miroTalkWidgets?.get(widgetId);
|
||||
|
||||
if (!widget) {
|
||||
console.error('Widget instance not found');
|
||||
return;
|
||||
}
|
||||
|
||||
const actions = {
|
||||
minimize: () => widget.minimizeWidget(),
|
||||
close: () => widget.closeWidget(),
|
||||
restore: () => widget.restoreWidget(),
|
||||
reopen: () => widget.reopenWidget(),
|
||||
startAudioCall: () => widget.startAudioCall(),
|
||||
startVideoCall: () => widget.startVideoCall(),
|
||||
startScreenShare: () => widget.startScreenShare(),
|
||||
joinRoom: () => widget.joinRoom(),
|
||||
};
|
||||
|
||||
const actionHandler = actions[action];
|
||||
if (actionHandler) {
|
||||
actionHandler();
|
||||
} else {
|
||||
console.warn('Unknown action:', action);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error executing widget action:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// ============================================================================
|
||||
// AUTO-INITIALIZATION
|
||||
// ============================================================================
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const autoInit = document.querySelector('[data-mirotalk-auto]');
|
||||
if (!autoInit) return;
|
||||
|
||||
try {
|
||||
const config = {
|
||||
domain: autoInit.getAttribute('data-domain'),
|
||||
roomId: autoInit.getAttribute('data-room') || 'support-room',
|
||||
userName: autoInit.getAttribute('data-user') || `guest-${Math.floor(Math.random() * 10000)}`,
|
||||
theme: autoInit.getAttribute('data-theme') || MiroTalkWidget.DEFAULT_OPTIONS.theme,
|
||||
widgetState: autoInit.getAttribute('data-widget-state') || MiroTalkWidget.DEFAULT_OPTIONS.widgetState,
|
||||
position: autoInit.getAttribute('data-position') || MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.position,
|
||||
checkOnline: autoInit.getAttribute('data-check-online') === 'true',
|
||||
customMessages: {
|
||||
heading:
|
||||
autoInit.getAttribute('data-heading') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.heading,
|
||||
subheading:
|
||||
autoInit.getAttribute('data-subheading') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.subheading,
|
||||
connectText:
|
||||
autoInit.getAttribute('data-connect-text') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.connectText,
|
||||
onlineText:
|
||||
autoInit.getAttribute('data-online-text') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.onlineText,
|
||||
offlineText:
|
||||
autoInit.getAttribute('data-offline-text') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.offlineText,
|
||||
poweredBy:
|
||||
autoInit.getAttribute('data-powered-by') ||
|
||||
MiroTalkWidget.DEFAULT_OPTIONS.supportWidget.customMessages.poweredBy,
|
||||
},
|
||||
};
|
||||
|
||||
if (config.domain) {
|
||||
new MiroTalkWidget(config.domain, config.roomId, config.userName, {
|
||||
widgetState: config.widgetState,
|
||||
theme: config.theme,
|
||||
supportWidget: {
|
||||
...MiroTalkWidget.DEFAULT_OPTIONS.supportWidget,
|
||||
position: config.position,
|
||||
checkOnlineStatus: config.checkOnline,
|
||||
customMessages: config.customMessages,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to auto-initialize MiroTalk Widget:', error);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://p2p.mirotalk.com/js/widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="support-widget"
|
||||
data-mirotalk-auto
|
||||
data-domain="p2p.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>
|
||||
+19
-815
@@ -1,821 +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 P2P - 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;
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
@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>
|
||||
<script src="https://p2p.mirotalk.com/js/widget.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 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: '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
|
||||
};
|
||||
|
||||
// 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>
|
||||
<div
|
||||
id="support-widget"
|
||||
data-mirotalk-auto
|
||||
data-domain="p2p.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>
|
||||
|
||||
+37
-10
@@ -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 - Simple Iframe Example</title>
|
||||
<script src="https://p2p.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://p2p.mirotalk.com/newcall"
|
||||
style="height: 100vh; width: 100vw; border: 0px"
|
||||
></iframe>
|
||||
<script>
|
||||
// Advanced configuration
|
||||
window.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof MiroTalkWidget !== 'undefined') {
|
||||
const domain = 'p2p.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>
|
||||
|
||||
+810
-23
@@ -3,32 +3,819 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk P2P Iframe Demo</title>
|
||||
<title>MiroTalk P2P - 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://p2p.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 = 'p2p.mirotalk.com';
|
||||
const options = {
|
||||
room: 'test',
|
||||
name: 'guest-' + Math.floor(Math.random() * 10000),
|
||||
avatar: 0,
|
||||
audio: 0,
|
||||
video: 0,
|
||||
screen: 0,
|
||||
hide: 0,
|
||||
notify: 0,
|
||||
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: '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
|
||||
};
|
||||
|
||||
// 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>
|
||||
|
||||
@@ -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 P2P - Simple Iframe Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<iframe
|
||||
id="mirotalkIframe"
|
||||
allow="camera; microphone; display-capture; fullscreen; clipboard-read; clipboard-write; web-share; autoplay"
|
||||
src="https://p2p.mirotalk.com/newcall"
|
||||
style="height: 100vh; width: 100vw; border: 0px"
|
||||
></iframe>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk P2P Iframe Demo</title>
|
||||
|
||||
<script src="https://p2p.mirotalk.com/js/iframe.js" defer></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const domain = 'p2p.mirotalk.com';
|
||||
const options = {
|
||||
room: 'test',
|
||||
name: 'guest-' + Math.floor(Math.random() * 10000),
|
||||
avatar: 0,
|
||||
audio: 0,
|
||||
video: 0,
|
||||
screen: 0,
|
||||
hide: 0,
|
||||
notify: 0,
|
||||
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>
|
||||
Reference in New Issue
Block a user