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

Question

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

在联系 TypeForm 后，我被告知我需要设置一个 cookie 以防止每次都加载弹出窗口。事实上他们的回复是 "To ensure the Typeform only appears once you will have to add cookies to your site in order to ensure a user only sees it one time. This isn't a feature we currently have but hopefully with more requests it's something we could add!"

嵌入代码：

<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，允许弹出窗口只显示一次 and/or 如果 'X' 被点击了？

Answer 1

我认为这完全可以使用 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();
}

希望对您有所帮助:)

Answer 2

感谢 Nicolas 的回答！

检查了 SDK 后，我修改了 Nicolas 的代码片段以适应左侧绘图弹出窗口。这将检查 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 "";
}

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

Set a cookie for an iframe popup to keep it closed

javascript

cookies

iframe

jquery-cookie

typeform