为 iframe 弹出窗口设置 cookie 以使其保持关闭

Question

我正在使用 TypeForm 来处理我的潜在客户生成表单。我正在使用的表单已嵌入我网站的主页上。这种嵌入会在每次加载主页时创建一个显示弹出窗口的 iframe，即使单击“X”也是如此。

联系 TypeForm 后，我被告知我需要设置一个 cookie 以防止每次加载弹出窗口。事实上，他们的回答是“为了确保 Typeform 仅在您必须向您的网站添加 cookie 以确保用户只看到一次时才出现。这不是我们目前拥有的功能，但希望有更多的请求它是一些东西我们可以添加！”

嵌入代码：

<a class="typeform-share button" href="https://example.typeform.com/to/fbPnzs" data-mode="drawer_left" data-auto-open=true target="_blank" style="display:none;"></a>
<script>
    (function() {
    var qs, js, q, s, d = document,
        gi = d.getElementById,
        ce = d.createElement,
        gt = d.getElementsByTagName,
        id = "typef_orm_share",
        b = "https://embed.typeform.com/";
    if (!gi.call(d, id)) {
        js = ce.call(d, "script");
        js.id = id;
        js.src = b + "embed.js";
        q = gt.call(d, "script")[0];
        q.parentNode.insertBefore(js, q)
    }
})()
</script>

嵌入的 URL 是 example.typeform.com，而要嵌入表单的网站不同。是否需要考虑同源？

我需要在我的 WordPress 网站的 functions.php 文件中实现什么代码，以添加一个 cookie，该 cookie 允许弹出窗口仅显示一次和/或在单击“X”时不再显示？

Answer 1

感谢 Nicolas 的回答！

在检查了 SDK 之后，我调整了 Nicolas 的 sn-p 以适应左侧的绘制弹出窗口。这会检查 cookie 是否存在，如果不存在，则应设置它并显示左侧绘制 TypeForm 弹出窗口；如果 cookie 确实存在，则不会显示。

var url = "https://demo.typeform.com/to/njdbt5" // Update with your TypeForm URL
let params = new URLSearchParams( location.search );
url += "?utm_source=" + params.get( 'utm_source' ); // Replace with the hidden values you want to pass

var displayed = getCookie( "typeform_displayed" ); // Check for the cookie typeform_displayed
if ( displayed ) {
    null
} else if ( !displayed && displayed === "" ) {
    setCookie( "typeform_displayed", true, 365 ); // Set typeform_displayed cookie with a value of true and an expiry of 365 days
    showEmbed();
}

//
function showEmbed() {
    window.typeformEmbed.makePopup( url, {
        mode: 'drawer_left',
        autoOpen: true,
        hideHeaders: true,
        hideFooters: true,
    } )
}

// Cookie Manipulation
// Source: https://www.w3schools.com/js/js_cookies.asp
function setCookie( cname, cvalue, exdays ) {
    var d = new Date();
    d.setTime( d.getTime() + ( exdays * 24 * 60 * 60 * 1000 ) );
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie( cname ) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent( document.cookie );
    var ca = decodedCookie.split( ';' );
    for ( var i = 0; i < ca.length; i++ ) {
        var c = ca[ i ];
        while ( c.charAt( 0 ) == ' ' ) {
            c = c.substring( 1 );
        }
        if ( c.indexOf( name ) == 0 ) {
            return c.substring( name.length, c.length );
        }
    }
    return "";
}

Answer 2

我认为使用Typeform Embed SDK 是完全可行的。

您需要检查 cookie 是否已设置。并且取决于值显示与否嵌入类型。

我在 Glitch 上做了一个工作示例，您可以查看它here。

在代码中，逻辑如下所示：

var displayed = getCookie("displayed_typeform");

if (displayed){
  embedElement.innerHTML="<h2>Typeform already displayed once.</h2>"
} else if (!displayed && displayed === "") {
  setCookie("displayed_typeform", true, 365);
  showEmbed();
}

希望对你有帮助:)