CODEWITHSUNDEEP
javascriptiframecookiesjquery-cookietypeform
Dave Pearce
Dave Pearce

Reputation: 43

Set a cookie for an iframe popup to keep it closed

I'm using TypeForm to handle my lead generation forms. The form I'm using has been embedded on the home page of my site. This embedding creates an iframe showing the popup every time the home page is loaded, even if the 'X' is clicked.

Having contacted TypeForm, I have been told that I would need to set a cookie to prevent the popup loading each time. In fact their reply was "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!"

Embed Code:

<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>

The embed URL is example.typeform.com whereas the website where the form is to be embedded is not the same. Does consideration need to be made about same-origin?

What do I need to implement in terms of code to the functions.php file of my WordPress site to add a cookie that allows the popup to show only once and/or never show again if the 'X' is clicked?

Upvotes: 2

Views: 1641

Answers (2)

Dave Pearce
Dave Pearce

Reputation: 43

Thank to Nicolas for his answer!

Having checked over the SDK, I've adapted Nicolas' snippet to cater to the left draw popup. This checks if a cookie exists, if it does not, it should set it and display the left draw TypeForm popup; if the cookie does exist, it won't show.

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 "";
}

Upvotes: 1

picsoung
picsoung

Reputation: 6538

I think this is totally doable using Typeform Embed SDK.

You will need to check if the cookie is already set. And depending on the value display or not the embed typeform.

I made a working example on Glitch, you can look at it here.

In code the logic would look like this:

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();
}

Hope it helps :)

Upvotes: 0

Related Questions