Question

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

在联系过TypeForm之后，我被告知我需要设置一个cookie来防止每次弹出加载。事实上，他们的答复是“为了确保只有在您必须向您的网站添加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，允许弹出窗口只显示一次和/或如果单击“X”则永远不再显示？< / p>

Answer 1

感谢Nicolas的回答！

检查完SDK后，我已经改编了Nicolas＆＃39;片段以迎合左侧绘制弹出窗口。这将检查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();
}

希望有所帮助：）

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

2 个答案: