如何为LeadPages中的Commoninja按钮添加window.setTimeout实现延迟显示

问题核心原因 #

之前的尝试失效主要是两个关键错误：

• 误将JavaScript代码添加到LeadPages的自定义CSS区域（该区域仅支持样式代码，无法执行脚本）
• 原按钮代码中自带的defer属性SDK脚本会提前加载，和延迟加载脚本产生冲突

可行解决方案 #

步骤1：修改Commoninja按钮代码

移除原按钮代码中的SDK引用，只保留组件容器，并默认隐藏：

<div class="commonninja_component pid-590d70ff-9852-4d39-80bc-8844af276d7b" style="display:none;"></div>

步骤2：添加延迟加载/显示脚本

将以下代码添加到LeadPages的自定义HTML区域（注意不是CSS区域）：

<script>
// 等待页面完全加载后执行逻辑
window.addEventListener('load', function() {
  setTimeout(function() {
    // 检查SDK是否已加载，避免重复加载
    const sdkElement = document.getElementById('commonninja-sdk');
    const buttonComponent = document.querySelector('.commonninja_component.pid-590d70ff-9852-4d39-80bc-8844af276d7b');

    if (!sdkElement) {
      // 动态创建并加载SDK
      const script = document.createElement('script');
      script.src = 'https://cdn.commoninja.com/sdk/latest/commonninja.js';
      script.id = 'commonninja-sdk';
      // SDK加载完成后显示按钮
      script.onload = () => buttonComponent.style.display = 'block';
      document.body.appendChild(script);
    } else {
      // SDK已存在，直接显示按钮
      buttonComponent.style.display = 'block';
    }
  }, 3000); // 延迟时间，单位毫秒，可按需修改
});
</script>

步骤3：验证效果

保存LeadPages页面设置后预览，按钮会在页面加载完成后3秒自动显示。

额外注意事项 #

• 必须确保脚本添加到自定义HTML区域，LeadPages的CSS区域无法执行JavaScript代码
• 脚本中加入了页面load事件监听，确保页面资源加载完成后再执行延迟逻辑，避免因页面未加载完成导致的元素查找失败

内容的提问来源于stack exchange，提问作者Mandy