晓多官网右侧咨询浮窗优化（浮窗增加浮动效果及按钮点击背景色）-2025年7月版

原来的按钮优化，凸显在线咨询，和立即试用按钮，在右侧栏增加一个靠左的悬浮窗提高点击率。

老版浮窗：

修改后咨询浮窗：

前端代码块

<!--new 悬浮咨询 毛毛-->
      <div class="xuanfu">
        <ul>
          <li class="kefurobat">
            <a  target="_blank">
              <div class="xfimg flexrow">
                <span id="robatMessage"></span>
                <img src="https://cdnpic.xiaoduoai.com/uploads/20250703/09ecf2b6ebd6d8e8c6bac09e6623cda2.png" alt>
              </div>
              <div class="xfwx" style="display: block;width: 150px;left: -150px;">
                <img src="https://cdnpic.xiaoduoai.com/uploads/20250703/1d2057a7474a701b8d2ef2ee318a12af.png" alt="立即在线沟通">
              </div>
            </a>
          </li>
          <li class="xfwxitem">
              <div class="xfimg flexrow">
                <img src="https://cdnpic.xiaoduoai.com/uploads/20250703/3132b07c72dbc61f2e280acedf38cbd3.png" alt>
              </div>
              <div class="xfwx">
                <img src="https://cdnpic.xiaoduoai.com{$ld.wechat2}" alt="咨询微信客服">
                <p class="xfwxdesc" style="background-color: white;">微信 1v1 沟通</p>
              </div>
          </li>
          <li class="xftelitem">
            <div class="xfimg flexrow">
              <img src="https://cdnpic.xiaoduoai.com/uploads/20250703/7b8ef253440ac190f634ddc2f8999492.png" alt>
            </div>
            <div class="xfwx xftel">
              <p>{$ld.tel}</p>
              <span class="xfteldesc">立即获取方案或咨询</span>
            </div>
          </li>
          <li class="xftopitem">
            <div class="xfimg flexrow" id="goToTop">
              <img src="https://cdnpic.xiaoduoai.com/uploads/20250703/f22ed1b92dfb5e6c4a0fbba375a9d1a8.png" alt>
            </div>
          </li>
        </ul>
      </div>
    <!--悬浮end-->

JS代码块

//===================悬浮咨询==================
    // 选择那张“立即在线沟通”的图片
    const closeImg = document.querySelector('.xfwx img[alt="立即在线沟通"]');

    if (closeImg) {
      closeImg.addEventListener('click', function () {
        const parentBox = this.closest('.xfwx');
        if (parentBox) {
          parentBox.style.display = 'none';
        }
      });
    }
    //悬浮end

优化时间：2025年7月

执行人：李辉

一个醒目的首页和悬浮咨询是增加点击留资的非常好的方法，晓多AI官网优化之悬浮留资已优化，按钮背景色已优化，首页banner图待二次优化，及增加商业标语，也包括首页得整体UI设计都需要二次优化，工作量大，后续逐步优化吧，偶尔辉哥也会将优化方法及其优化代码共享出来，更多得SEO优化案例请关注辉哥主页。