130 lines
3.7 KiB
HTML
130 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tawk.to Container</title>
|
|
|
|
<link rel="preconnect" href="https://embed.tawk.to">
|
|
<link rel="dns-prefetch" href="https://embed.tawk.to">
|
|
|
|
<style>
|
|
body,
|
|
html {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #001A33;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#tawk-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#loading-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: #001A33;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
z-index: 9999;
|
|
transition: opacity 0.3s ease-out;
|
|
}
|
|
|
|
#loading-overlay.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spinner {
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 2px solid rgba(255, 255, 255, 0.15);
|
|
border-top-color: rgba(255, 255, 255, 0.72);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-size: 14px;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="loading-overlay">
|
|
<div class="spinner"></div>
|
|
<div class="loading-text">正在连接客服...</div>
|
|
</div>
|
|
|
|
<div id="tawk-container"></div>
|
|
|
|
<script type="text/javascript">
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const visitorName = urlParams.get('name') || '';
|
|
const visitorAvatar = urlParams.get('avatar') || '';
|
|
const visitorId = urlParams.get('id') || '';
|
|
const loadingText = urlParams.get('loadingText') || '正在连接客服...';
|
|
|
|
const loadingTextElement = document.querySelector('.loading-text');
|
|
if (loadingTextElement) {
|
|
loadingTextElement.textContent = loadingText;
|
|
}
|
|
|
|
var Tawk_API = Tawk_API || {};
|
|
var Tawk_LoadStart = new Date();
|
|
|
|
Tawk_API.embedded = 'tawk-container';
|
|
|
|
if (visitorName) {
|
|
Tawk_API.visitor = {
|
|
name: visitorName,
|
|
email: visitorId ? visitorId + '@user.com' : undefined
|
|
};
|
|
}
|
|
|
|
Tawk_API.onLoad = function () {
|
|
const loadingOverlay = document.getElementById('loading-overlay');
|
|
if (loadingOverlay) {
|
|
loadingOverlay.classList.add('hidden');
|
|
setTimeout(function () {
|
|
loadingOverlay.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
|
|
if (visitorAvatar || visitorId) {
|
|
try {
|
|
Tawk_API.setAttributes({
|
|
avatar: visitorAvatar || undefined,
|
|
userId: visitorId || undefined
|
|
}, function () { });
|
|
} catch (e) { }
|
|
}
|
|
};
|
|
|
|
(function () {
|
|
var s1 = document.createElement('script'), s0 = document.getElementsByTagName('script')[0];
|
|
s1.async = true;
|
|
s1.src = 'https://embed.tawk.to/6a2b9dc1f0b5881c2ac3ed83/1jqt60fto';
|
|
s1.charset = 'UTF-8';
|
|
s1.setAttribute('crossorigin', '*');
|
|
s0.parentNode.insertBefore(s1, s0);
|
|
})();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|