Elementor默认打开Floating Element浮窗

Floating Element浮窗是新版本Elementor pro中的功能，类似一个简单的客服图标工具，可以添加whatsapp邮件等沟通链接。默认情况下它只显示一个图标，需要点击之后才能弹出窗口。

如上图所示。如果我们让它在页面加载时就自动打开窗口要如何操作呢？我看了下自带设置，似乎没有这个设置选项，所以只能使用代码来实现了。大家可以把下面的js代码添加到wp code插件中，启用就OK了。

(function(){

// ================== CONFIG ==================

// WhatsApp 按钮选择器（Elementor 联系按钮）

var BUTTON_SELECTOR = 'button.e-contact-buttons__chat-button, .e-contact-buttons__chat-button button, .e-contact-buttons__chat-button';

// 可能的聊天容器（用于判断是否已打开）

var CHAT_WRAPPER_SELECTOR = [

'#e-contact-buttons__content-wrapper',

'.e-contact-buttons__content-wrapper',

'.e-contact-buttons__chatbox',

'.wh-widget-chat',

'.wpwhatsapps-popup'

].join(', ');

// 打开策略：

// 'once_per_site' 仅全站首次访问打开一次

// 'once_per_page' 每个页面路径首次访问打开一次

// 'every_visit' 每次访问都尝试打开（不推荐）

var STRATEGY = 'once_per_page';

// 是否仅在首页启用自动打开（可选）

var ONLY_HOMEPAGE = false;

var HOMEPAGE_PATHS = ['/', '/index.php'];

// 本地存储键

var STORAGE_PREFIX = 'wa_elementor_auto_open_v2';

// 页面级 key（当 STRATEGY=once_per_page 时会拼接 pathname）

var PAGE_SCOPE_KEY = location.pathname.replace(/\/+$/,'') || '/';

// 重试配置

var MAX_RETRIES = 12;

var RETRY_DELAY_MS = 500;

// 启动延迟（等待第三方/Elementor 初始化）

var START_DELAY_MS = 600;

// 注入防边框 CSS（解决问题1：自动打开产生额外边框/outline）

// 如果你的站点主题/插件对“激活”态添加了 outline/border，这里会在仅自动打开的这次会话中临时隐藏。

// 你也可以精确到具体容器类名进行选择器收窄。

var AUTO_CSS_FIX_BORDER = true;

// 调试开关

var ENABLE_DEBUG = false;

// ================== UTILS ==================

function log(){

if (!ENABLE_DEBUG) return;

try { console.log.apply(console, arguments); } catch(e){}

}

function storageKey(){

if (STRATEGY === 'once_per_site') return STORAGE_PREFIX + ':site';

if (STRATEGY === 'once_per_page') return STORAGE_PREFIX + ':page:' + PAGE_SCOPE_KEY;

// every_visit 不使用持久化

return STORAGE_PREFIX + ':noop';

}

function isMarked(){

if (STRATEGY === 'every_visit') return false;

try { return !!localStorage.getItem(storageKey()); } catch(e){ return false; }

}

function markShown(){

if (STRATEGY === 'every_visit') return;

try { localStorage.setItem(storageKey(), '1'); } catch(e){}

}

function onReady(fn){

if (document.readyState === 'loading'){

document.addEventListener('DOMContentLoaded', function(){ setTimeout(fn, 120); });

} else {

setTimeout(fn, 120);

}

}

function isVisible(el){

if (!el) return false;

var st = window.getComputedStyle(el);

return st && st.display !== 'none' && st.visibility !== 'hidden' && el.offsetParent !== null;

}

function findChatWrapper(){

var el = document.querySelector(CHAT_WRAPPER_SELECTOR);

if (!el) return null;

return isVisible(el) ? el : null;

}

function isChatOpen(){

// 先按容器类名判断

var alt = findChatWrapper();

if (alt) return true;

// 再用 aria-controls 跟随按钮判断

try {

var btn = document.querySelector(BUTTON_SELECTOR);

if (btn){

var controls = btn.getAttribute('aria-controls');

if (controls){

var target = document.getElementById(controls) || document.querySelector('#' + CSS.escape(controls));

if (target && isVisible(target)) return true;

}

}

} catch(e){}

return false;

}

// 更温和的点击：优先原生 click，避免模拟 mouseover/mousedown 等引发 focus 样式

function gentleClick(el){

if (!el) return;

try {

// 避免触发 focus 导致 outline/border

// 一些主题会在 :focus/:focus-visible 添加 outline

if (typeof el.click === 'function'){

el.click();

log('gentleClick: native click() done');

return;

}

} catch(e){}

// 兜底：只发一个 "click" 事件（不发 mouseover/mousedown），减少样式副作用

try {

var evt = new MouseEvent('click', {bubbles:true, cancelable:true, view:window});

el.dispatchEvent(evt);

log('gentleClick: dispatched click event');

} catch(e){

log('gentleClick failed', e);

}

}

// 临时注入 CSS 防止自动打开导致的边框/outline

function injectAutoCssFix(){

if (!AUTO_CSS_FIX_BORDER) return function(){};

var css = [

// 常见：按钮获得焦点时出现 outline

'.e-contact-buttons__chat-button:focus, .e-contact-buttons__chat-button button:focus { outline: none !important; }',

// 常见：激活态/打开态容器边框

'.e-contact-buttons__content-wrapper, #e-contact-buttons__content-wrapper, .e-contact-buttons__chatbox { outline: none !important; }',

// 若插件为按钮添加了 focus-visible

'.e-contact-buttons__chat-button:focus-visible { outline: none !important; }',

// 若有默认边框，可按需关闭（谨慎）：请按你站点样式微调

'.e-contact-buttons__chat-button, .e-contact-buttons__content-wrapper { box-shadow: none !important; }'

].join('\n');

var style = document.createElement('style');

style.setAttribute('data-wa-auto-open-fix','1');

style.textContent = css;

document.head.appendChild(style);

// 返回移除函数（若你希望在标记展示后移除，可调用）

return function remove(){

try {

style.parentNode && style.parentNode.removeChild(style);

} catch(e){}

};

}

function tryOpen(retriesLeft){

retriesLeft = typeof retriesLeft === 'number' ? retriesLeft : MAX_RETRIES;

if (ONLY_HOMEPAGE && HOMEPAGE_PATHS.indexOf(location.pathname) === -1){

log('Not homepage, skip due to ONLY_HOMEPAGE=true');

return;

}

if (isMarked()){

log('Already marked, skip auto open');

return;

}

if (isChatOpen()){

log('Chat already open, mark and exit');

markShown();

return;

}

var btn = document.querySelector(BUTTON_SELECTOR);

if (!btn){

log('Button not found; retriesLeft:', retriesLeft-1);

if (retriesLeft > 0) setTimeout(function(){ tryOpen(retriesLeft-1); }, RETRY_DELAY_MS);

return;

}

// 注入临时 CSS，避免边框异常

var removeCssFix = injectAutoCssFix();

log('Found WA button, trying gentle click');

gentleClick(btn);

// 给 UI 一点时间打开

setTimeout(function(){

if (isChatOpen()){

log('Chat opened, marking shown');

markShown();

// 你可以选择在此移除临时 CSS（如果移除后又出现边框，可以保留不移除）

// removeCssFix();

} else {

log('Not opened; retriesLeft:', retriesLeft-1);

if (retriesLeft > 0) {

setTimeout(function(){ tryOpen(retriesLeft-1); }, RETRY_DELAY_MS);

} else {

// 最后一搏：若温和 click 无效，尝试一次完整的鼠标序列（可能带来样式副作用）

try {

['mouseover','mousedown','mouseup','click'].forEach(function(ev){

var evt = new MouseEvent(ev, {bubbles:true, cancelable:true, view:window});

btn.dispatchEvent(evt);

});

setTimeout(function(){

if (isChatOpen()){

log('Opened after full mouse sequence, marking');

markShown();

}

}, 600);

} catch(e){}

}

}

}, 700);

}

onReady(function(){

setTimeout(function(){ tryOpen(MAX_RETRIES); }, START_DELAY_MS);

});

})();