Confluence实现pop-up/landing page姓名收集存储及跳转的技术求助

核心思路 #

不用纠结第三方宏下载，靠Confluence原生支持的HTML宏（或代码块）+ 简单JS就能实现：首次访问触发订阅弹窗/页面，存储用户姓名后跳转至新闻稿页面。

具体实现步骤 #

方案一：创建专属订阅着陆页（更稳定，推荐） #

1. 在Confluence新建公开访问的页面（必须设置为未登录用户可访问，否则访客无法打开），作为订阅入口。
2. 在页面插入「HTML宏」（若管理员未开启该功能，需联系管理员开放，默认可能禁用），粘贴以下代码：

<div style="max-width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
  <h3>订阅新闻稿</h3>
  <input type="text" id="userName" placeholder="请输入您的姓名" style="width: 100%; padding: 8px; margin: 10px 0; box-sizing: border-box;">
  <button onclick="submitSubscribe()" style="width: 100%; padding: 10px; background: #0052cc; color: white; border: none; border-radius: 4px; cursor: pointer;">提交订阅</button>
</div>

<script>
// 检查用户是否已订阅，避免重复触发
if (localStorage.getItem('hasSubscribed')) {
  window.location.href = '【替换成你的新闻稿页面URL】';
}

function submitSubscribe() {
  const name = document.getElementById('userName').value.trim();
  if (!name) {
    alert('请输入您的姓名');
    return;
  }
  // 将订阅状态和姓名存储在用户浏览器中
  localStorage.setItem('hasSubscribed', 'true');
  localStorage.setItem('subscriberName', name);
  
  // 【可选】如需统一收集姓名，可添加以下逻辑：
  // 示例：自动提交为当前页面的访客评论（需开启页面访客评论权限）
  // const commentEl = document.createElement('div');
  // commentEl.innerText = `新订阅用户：${name}`;
  // document.body.appendChild(commentEl);
  
  // 跳转至新闻稿页面
  window.location.href = '【替换成你的新闻稿页面URL】';
}
</script>

3. 将代码中的【替换成你的新闻稿页面URL】替换为实际的新闻稿链接，再把这个着陆页的地址发给用户即可。

方案二：直接在新闻稿页面添加弹窗 #

若不想单独做着陆页，可直接在新闻稿页面顶部嵌入弹窗：

1. 在新闻稿页面顶部插入「HTML宏」，粘贴以下代码：

<style>
.subscribe-modal {
  display: ${localStorage.getItem('hasSubscribed') ? 'none' : 'block'};
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}
.modal-box {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 320px;
  border-radius: 8px;
}
.close-btn {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close-btn:hover {
  color: black;
}
</style>

<div id="subscribeModal" class="subscribe-modal">
  <div class="modal-box">
    <span class="close-btn" onclick="closeModal()">&times;</span>
    <h3>订阅新闻稿</h3>
    <input type="text" id="userName" placeholder="请输入您的姓名" style="width: 100%; padding: 8px; margin: 10px 0; box-sizing: border-box;">
    <button onclick="submitSubscribe()" style="width: 100%; padding: 10px; background: #0052cc; color: white; border: none; border-radius: 4px; cursor: pointer;">提交订阅</button>
  </div>
</div>

<script>
function closeModal() {
  document.getElementById('subscribeModal').style.display = 'none';
}

function submitSubscribe() {
  const name = document.getElementById('userName').value.trim();
  if (!name) {
    alert('请输入您的姓名');
    return;
  }
  localStorage.setItem('hasSubscribed', 'true');
  localStorage.setItem('subscriberName', name);
  // 可选：提交姓名至统一存储位置
  closeModal();
}

// 点击弹窗外部关闭弹窗
window.onclick = function(e) {
  const modal = document.getElementById('subscribeModal');
  if (e.target == modal) closeModal();
}
</script>

2. 确保新闻稿页面为公开访问状态，用户首次打开会弹出订阅框，订阅完成后下次访问不再触发。

进阶：统一存储订阅姓名 #

上述代码将姓名存在用户浏览器的localStorage中，仅单用户可见。如需统一收集：

• 联系管理员开启Confluence页面的「访客评论」权限，在订阅代码中自动提交姓名作为页面评论，后续管理员可定期导出评论整理。
• 或对接企业内部后端接口，将订阅信息提交至数据库、邮箱列表等统一存储位置。

若HTML宏被禁用？试试自定义用户宏 #

若管理员禁止使用HTML宏，可自行创建用户宏：

1. 管理员登录Confluence，进入「空间设置」→「宏」→「创建用户宏」。
2. 宏名称填写newsletterSubscribe，宏类型选择「渲染内容」，将上述HTML+JS代码粘贴至「宏模板」后保存。
3. 在目标页面中插入该自定义宏即可。

注意事项 #

• 所有涉及页面必须设置为「公开访问」，否则未激活账号的用户无法打开。
• 测试时使用匿名窗口访问链接，验证弹窗/表单是否正常触发。

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