311 lines
9.2 KiB
HTML
311 lines
9.2 KiB
HTML
|
|
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>忆语智能客服</title>
|
|
<link
|
|
rel="preload"
|
|
href="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.19/libs/cn/index.js"
|
|
as="script"
|
|
crossorigin
|
|
/>
|
|
<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.19/libs/cn/index.js"></script>
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.customer-service-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #fdf8f2 0%, #f5ede3 100%);
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.customer-service-container::before {
|
|
content: '点击下方按钮开始对话';
|
|
position: absolute;
|
|
top: 30%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #8b7355;
|
|
text-align: center;
|
|
animation: fadeInDown 1s ease-out;
|
|
z-index: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.customer-service-container::after {
|
|
content: '忆语智能客服 · 24小时在线';
|
|
position: absolute;
|
|
top: calc(30% + 35px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 14px;
|
|
color: #999;
|
|
text-align: center;
|
|
animation: fadeInDown 1s ease-out 0.2s both;
|
|
z-index: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
div[style*='position: fixed'] {
|
|
position: fixed !important;
|
|
top: 55% !important;
|
|
left: 50% !important;
|
|
right: auto !important;
|
|
bottom: auto !important;
|
|
transform: translate(-50%, -50%) scale(1.3) !important;
|
|
cursor: pointer !important;
|
|
transition: all 0.3s ease !important;
|
|
filter: drop-shadow(0 8px 24px rgba(139, 115, 85, 0.3)) !important;
|
|
animation: pulse 2s ease-in-out infinite !important;
|
|
z-index: 10 !important;
|
|
}
|
|
|
|
div[style*='position: fixed']:active {
|
|
transform: translate(-50%, -50%) scale(1.2) !important;
|
|
}
|
|
|
|
div[style*='position: fixed'] img {
|
|
width: 70px !important;
|
|
height: 70px !important;
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(1.3);
|
|
}
|
|
50% {
|
|
transform: translate(-50%, -50%) scale(1.35);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.customer-service-container::before {
|
|
font-size: 18px;
|
|
top: 32%;
|
|
}
|
|
|
|
.customer-service-container::after {
|
|
font-size: 13px;
|
|
top: calc(32% + 30px);
|
|
}
|
|
|
|
div[style*='position: fixed'] {
|
|
top: 58% !important;
|
|
transform: translate(-50%, -50%) scale(1.2) !important;
|
|
}
|
|
|
|
div[style*='position: fixed'] img {
|
|
width: 65px !important;
|
|
height: 65px !important;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
transform: translate(-50%, -50%) scale(1.2);
|
|
}
|
|
50% {
|
|
transform: translate(-50%, -50%) scale(1.25);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="customer-service-container"></div>
|
|
<script>
|
|
(function () {
|
|
var chatClient = null;
|
|
|
|
function getQueryParam(name) {
|
|
try {
|
|
var url = new URL(window.location.href);
|
|
return url.searchParams.get(name);
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function loadCozeConfig() {
|
|
var configUrl = 'https://fhapp.ddn-ai.cloud/api/config/coze';
|
|
var controller = new AbortController();
|
|
var timeoutId = setTimeout(function () {
|
|
controller.abort();
|
|
}, 10000);
|
|
|
|
return fetch(configUrl, {
|
|
method: 'GET',
|
|
signal: controller.signal,
|
|
headers: {
|
|
Accept: 'application/json',
|
|
},
|
|
})
|
|
.then(function (res) {
|
|
clearTimeout(timeoutId);
|
|
if (!res.ok) {
|
|
throw new Error('HTTP ' + res.status);
|
|
}
|
|
return res.json();
|
|
})
|
|
.then(function (data) {
|
|
return (data && data.data) || data || {};
|
|
});
|
|
}
|
|
|
|
function init() {
|
|
var userId = getQueryParam('userId') || 'anonymous_' + Date.now();
|
|
console.log('Customer service initialized for user:', userId);
|
|
|
|
loadCozeConfig()
|
|
.then(function (cozeConfig) {
|
|
if (!cozeConfig || !cozeConfig.enabled) {
|
|
console.error('Coze customer service is disabled');
|
|
return;
|
|
}
|
|
|
|
var botId = cozeConfig.botId;
|
|
var token = cozeConfig.token;
|
|
|
|
if (!botId || !token) {
|
|
console.error('Coze config missing botId or token');
|
|
return;
|
|
}
|
|
|
|
if (!window.CozeWebSDK) {
|
|
console.error('CozeWebSDK not found');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
chatClient = new window.CozeWebSDK.WebChatClient({
|
|
config: {
|
|
bot_id: botId,
|
|
isIframe: false,
|
|
user_id: userId,
|
|
},
|
|
auth: {
|
|
type: 'token',
|
|
token: token,
|
|
onRefreshToken: function () {
|
|
return token;
|
|
},
|
|
},
|
|
ui: {
|
|
chatBot: {
|
|
title: '忆语',
|
|
uploadable: true,
|
|
isNeedAudio: false,
|
|
},
|
|
base: {
|
|
lang: 'zh-CN',
|
|
icon: 'https://fhapp.ddn-ai.cloud/logo.png',
|
|
},
|
|
footer: {
|
|
isShow: true,
|
|
expressionText: 'Powered by {{name}}',
|
|
linkvars: {
|
|
name: {
|
|
text: '忆语智能客服',
|
|
link: 'http://ddn-ai.cn/',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
console.log('Coze chat client initialized successfully');
|
|
|
|
var buttonClicked = false;
|
|
|
|
function findAndClickNewChatButton() {
|
|
if (buttonClicked) return true;
|
|
|
|
var svgs = document.querySelectorAll('svg[width="18"][height="18"]');
|
|
for (var i = 0; i < svgs.length; i++) {
|
|
var svg = svgs[i];
|
|
var button = svg.closest ? svg.closest('button') : null;
|
|
if (button) {
|
|
console.log('Auto-clicking new conversation button');
|
|
button.click();
|
|
buttonClicked = true;
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
findAndClickNewChatButton();
|
|
|
|
var observer = new MutationObserver(function () {
|
|
if (findAndClickNewChatButton()) {
|
|
observer.disconnect();
|
|
}
|
|
});
|
|
|
|
observer.observe(document.body, {
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
|
|
setTimeout(function () {
|
|
observer.disconnect();
|
|
if (!buttonClicked) {
|
|
console.log('Failed to auto-click new conversation button');
|
|
}
|
|
}, 2000);
|
|
} catch (error) {
|
|
console.error('Failed to initialize Coze chat client:', error);
|
|
}
|
|
})
|
|
.catch(function (e) {
|
|
console.error('Failed to load Coze config:', e);
|
|
});
|
|
}
|
|
|
|
function destroy() {
|
|
if (chatClient && chatClient.destroy) {
|
|
try {
|
|
chatClient.destroy();
|
|
} catch (e) {
|
|
console.error('Failed to destroy chat client:', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', init);
|
|
window.addEventListener('beforeunload', destroy);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|