代码是通过ai写的,有点粗糙,就是将代码放在“自定义js”代码里即可,然后就会在首页右下角显示一个图标,图标可以自定义,点击会唤醒对话框,调用腾讯对话平台的代码,而腾讯对话平台是对接网上免费的网盘搜索api。
截图:
以下是完整AI写的:
<script> document.addEventListener('DOMContentLoaded', () => { // ========================= // 配置项 // ========================= const CONFIG = { iconUrl: 'https://i.imgs.ovh/2025/08/24/m5sSt.png', // 悬浮图标 URL scriptUrl: 'https://chatbot.weixin.qq.com/mmspraiweb_node/dist/static/script/FLOAT_WINDOW_INIT.min.js', // 远程脚本 URL floatWindowUrl: 'https://chatbot.weixin.qq.com/webapp/VMMaBfwcRFiEV6pLY10zudRdLbXcH8?isFloat=true&robotName=%E7%BD%91%E7%9B%98%E5%8A%A9%E6%89%8B' // 浮窗初始化地址 }; // ========================= // 工具函数 // ========================= /** * 动态注入 CSS 样式(防止重复添加) */ function injectStyle() { if (document.getElementById('float-icon-style')) return; const style = document.createElement('style'); style.id = 'float-icon-style'; style.textContent = ` .float-icon { position: fixed; right: 30px; bottom: 20px; width: 50px; height: 50px; background: url('${CONFIG.iconUrl}') no-repeat center center; background-size: cover; border-radius: 50%; cursor: pointer; z-index: 1000; border: none; outline: none; } .float-icon.loading { background: #f0f0f0 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23007aff" stroke-width="5" stroke-dasharray="31.4 31.4" transform="rotate(-90 25 25)"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" from="0 25 25" to="360 25 25"/></circle></svg>') no-repeat center center; background-size: 30px 30px; } `; document.head.appendChild(style); } /** * 动态加载 JS 脚本,返回 Promise * @param {string} src - 脚本地址 * @returns {Promise<void>} */ function loadScript(src) { return new Promise((resolve, reject) => { if (document.querySelector(`script[src="${src}"]`)) { resolve(); // 已加载过,不再重复加载 return; } const script = document.createElement('script'); script.src = src; script.async = true; script.onload = resolve; script.onerror = () => reject(new Error(`加载脚本失败:${src}`)); document.body.appendChild(script); }); } /** * 显示错误提示 * @param {string} msg - 错误信息 */ function showError(msg) { alert(msg || '加载失败,请稍后再试'); } // ========================= // 核心逻辑 // ========================= /** * 加载浮窗逻辑 */ function loadFloatWindow() { const btn = document.querySelector('.float-icon'); if (!btn) return; btn.classList.add('loading'); // 显示加载动画 loadScript(CONFIG.scriptUrl) .then(() => { btn.classList.remove('loading'); if (typeof window._FLOAT_WINDOWA_INIT_ === 'function') { window._FLOAT_WINDOWA_INIT_(CONFIG.floatWindowUrl); } else { showError('初始化函数未找到,请检查脚本'); } }) .catch(err => { btn.classList.remove('loading'); console.error(err); showError('加载悬浮窗脚本失败'); }); } /** * 初始化悬浮按钮 */ function initFloatIcon() { // 防止重复初始化 if (document.querySelector('.float-icon')) return; injectStyle(); // 注入样式 const floatIcon = document.createElement('button'); floatIcon.className = 'float-icon'; floatIcon.setAttribute('aria-label', '打开聊天悬浮窗'); floatIcon.addEventListener('click', loadFloatWindow); document.body.appendChild(floatIcon); } // ========================= // 初始化 // ========================= initFloatIcon(); }); </script>
以下是原始腾讯对话平台代码:
动手能力强的小伙伴可以嵌入到自己网站,如果有更好的嵌入方法可以分享以下哦!
new Promise((r,j)=>{const s=document.createElement('script');s.src='https://chatbot.weixin.qq.com/mmspraiweb_node/dist/static/script/FLOAT_WINDOW_INIT.min.js';s.onload=r;s.onerror=j;document.body.append(s)}).then(()=>window._FLOAT_WINDOWA_INIT_('https://chatbot.weixin.qq.com/webapp/VMMaBfwcRFiEV6pLY10zudRdLbXcH8?isFloat=true&robotName=%E7%BD%91%E7%9B%98%E5%8A%A9%E6%89%8B')).catch(console.error)