WordPress Cookie实现特定页面Typeform弹窗单访问仅显示一次

我之前也碰到过一模一样的问题！Typeform默认的自动弹窗设置确实不会考虑用户的访问会话，要实现单次访问只显示一次，核心就是用浏览器的本地存储来标记用户已经看过弹窗，下面是两种常用的实现方案，你可以根据需求选：

方案1：会话级单次显示（关闭浏览器后重置） #

适合希望用户每次打开浏览器访问时都能看到一次弹窗，但同一次会话内切换页面不重复弹出的场景：

1. 首先确保你已经引入了Typeform的嵌入SDK（如果还没加的话）：

<script src="https://embed.typeform.com/next/embed.js"></script>

2. 替换掉原来的自动弹窗代码，改用下面的逻辑：

// 页面加载完成后执行
window.addEventListener('load', () => {
  // 检查sessionStorage里是否有弹窗已显示的标记
  const hasShown = sessionStorage.getItem('typeformPopupShown');
  
  if (!hasShown) {
    // 初始化并打开Typeform弹窗
    window.tf.createPopup('你的Typeform ID', {
      mode: 'popup',
      autoOpen: true,
      // 这里可以加你的其他配置，比如弹窗大小、触发延迟等
      size: { width: 800, height: 600 }
    });
    
    // 标记弹窗已显示，会话内不会再触发
    sessionStorage.setItem('typeformPopupShown', 'true');
  }
});

方案2：固定周期内只显示一次（比如7天） #

如果希望用户在一段时间内（比如一周）只看到一次弹窗，就用localStorage加上过期时间判断：

window.addEventListener('load', () => {
  const lastShownTimestamp = localStorage.getItem('typeformLastShown');
  const sevenDays = 7 * 24 * 60 * 60 * 1000; // 7天的毫秒数
  
  // 没有记录，或者记录已经超过7天，就显示弹窗
  if (!lastShownTimestamp || Date.now() - parseInt(lastShownTimestamp) > sevenDays) {
    window.tf.createPopup('你的Typeform ID', {
      mode: 'popup',
      autoOpen: true
    });
    
    // 记录当前时间戳，作为下次判断的依据
    localStorage.setItem('typeformLastShown', Date.now().toString());
  }
});

关键注意点 #

• 记得去Typeform后台的嵌入设置里，把默认的「自动打开」选项关掉，避免和代码逻辑冲突；
• 如果你的页面是单页应用（SPA），要把触发逻辑放在路由切换后的合适位置，而不是只在页面初始加载时执行；

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