伪装客服代码

<!-- ================= 观序悬浮客服 · 整段粘到 </body> 前 ================= -->
<script>
(function () {
  'use strict';
  if (window.__KEFU2_FLOAT__) return;      // 一个页面只装一次
  window.__KEFU2_FLOAT__ = true;

  var CFG = {
    src:    'https://kefu2.jias.cc/',  // 客服单页地址（入口）
    title:  '在线客服',
    color:  '#4d7cfe',
    color2: '#8b5cf6',
    side:   'right',                   // right | left
    label:  '在线客服',                 // 只留圆按钮就写 ''
    teaser: '有问题？点我就能问',        // 首次提示，不要就写 ''
    z:      2147483000
  };

  var host = document.createElement('div');
  host.setAttribute('data-kefu2-float', '');
  host.style.cssText = 'position:fixed;z-index:' + CFG.z + ';'
    + (CFG.side === 'left' ? 'left:20px;' : 'right:20px;') + 'bottom:20px;display:block;';
  var root = host.attachShadow ? host.attachShadow({ mode: 'open' }) : host;

  var css = ''
    + ':host{all:initial}'
    + '*{box-sizing:border-box;margin:0;padding:0}'
    + '.wrap{position:relative;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}'
    + '.btn{display:flex;align-items:center;gap:8px;height:52px;padding:0 18px;border:0;cursor:pointer;'
    + 'border-radius:26px;color:#fff;font-size:15px;font-weight:600;letter-spacing:.2px;'
    + 'background:linear-gradient(135deg,' + CFG.color + ',' + CFG.color2 + ');'
    + 'box-shadow:0 10px 26px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.12);'
    + 'transition:transform .18s ease,box-shadow .18s ease;user-select:none}'
    + '.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.26)}'
    + '.btn:active{transform:translateY(0)}'
    + '.btn svg{width:22px;height:22px;flex:none}'
    + '.btn .c{display:none}'
    + '.btn.on .chat{display:none}.btn.on .c{display:block}'
    + (CFG.label === '' ? '.btn{padding:0;width:56px;height:56px;border-radius:50%;justify-content:center}' : '')
    + '.teaser{position:absolute;bottom:64px;' + (CFG.side === 'left' ? 'left:2px' : 'right:2px') + ';'
    + 'background:#fff;color:#1f2937;font-size:13.5px;line-height:1.5;padding:9px 13px;border-radius:12px;'
    + 'box-shadow:0 8px 24px rgba(0,0,0,.16);white-space:nowrap;opacity:0;transform:translateY(6px);'
    + 'transition:opacity .25s ease,transform .25s ease;pointer-events:none}'
    + '.teaser.on{opacity:1;transform:translateY(0)}'
    + '.panel{position:absolute;bottom:68px;' + (CFG.side === 'left' ? 'left:0' : 'right:0') + ';'
    + 'width:390px;height:min(640px,calc(100vh - 130px));min-height:420px;'
    + 'background:#0b0e14;border-radius:16px;overflow:hidden;'
    + 'box-shadow:0 24px 64px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08);'
    + 'opacity:0;transform:translateY(10px) scale(.98);'
    + 'transform-origin:' + (CFG.side === 'left' ? 'bottom left' : 'bottom right') + ';'
    + 'transition:opacity .2s ease,transform .2s ease;pointer-events:none}'
    + '.panel.on{opacity:1;transform:none;pointer-events:auto}'
    + '.panel iframe{width:100%;height:100%;border:0;display:block;background:#0b0e14}'
    + '.load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;'
    + 'background:#0b0e14;color:#8b98b8;font-size:13px;transition:opacity .25s ease}'
    + '.load.off{opacity:0;pointer-events:none}'
    + '@media (max-width:520px){'
    + '.panel{position:fixed;left:0;right:0;top:0;bottom:80px;width:100%;height:auto;min-height:0;border-radius:0}'
    + '}';

  root.innerHTML = '<style>' + css + '</style>'
    + '<div class="wrap">'
    + '<div class="teaser"></div>'
    + '<div class="panel"><div class="load">正在连接客服…</div></div>'
    + '<button class="btn" type="button" aria-label="' + CFG.title + '">'
    + '<svg class="chat" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-3.4-.6L3 21l1.7-4.6A8.2 8.2 0 0 1 3 11.5 8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5z"></path></svg>'
    + '<svg class="c" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12"></path><path d="M18 6 6 18"></path></svg>'
    + '</button>'
    + '</div>';

  var btn = root.querySelector('.btn');
  var panel = root.querySelector('.panel');
  var load = root.querySelector('.load');
  var teaserEl = root.querySelector('.teaser');
  if (CFG.label) {
    var sp = document.createElement('span');
    sp.textContent = CFG.label;
    btn.appendChild(sp);
  }

  var iframe = null, opened = false;

  function ensure() {
    if (iframe) return;
    iframe = document.createElement('iframe');
    iframe.setAttribute('title', CFG.title);
    iframe.setAttribute('allow', 'microphone; clipboard-write');
    iframe.src = CFG.src;
    iframe.addEventListener('load', function () { load.classList.add('off'); });
    panel.appendChild(iframe);
  }
  function open() {
    ensure();
    opened = true;
    panel.classList.add('on');
    btn.classList.add('on');
    teaserEl.classList.remove('on');
  }
  function close() {
    opened = false;
    panel.classList.remove('on');
    btn.classList.remove('on');
  }
  btn.addEventListener('click', function () { opened ? close() : open(); });
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && opened) close(); });

  document.body.appendChild(host);

  if (CFG.teaser) {
    setTimeout(function () {
      if (opened) return;
      teaserEl.textContent = CFG.teaser;
      teaserEl.classList.add('on');
      setTimeout(function () { teaserEl.classList.remove('on'); }, 6000);
    }, 1500);
  }

  window.Kefu2Float = { open: open, close: close };
})();
</script>
<!-- ================= /观序悬浮客服 ================= -->