Develop Reference

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?

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

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

Parsing Multi-Variable Cookies into Web Form Values

I realize that FireFox, Chrome, Safari, & Opera can limit the number of cookies a domain/website can set. So I thought of a different approach to storing my web forms many text, radio buttons, and select box values -Set a multi-variable cookie for each major section of the web form, instead of a separate cookie for each variable.
It would look something like this (inside each cookies content)...
firstName=John;&&;lastName=Andrews;&&;streetAddress=1234 Memory Ln.
What I'm looking for is a JavaScript function that will create/update this type of cookie on-the-fly properly (using element names instead of ID's for max compatibility with radio buttons) , triggered on each form elements 'onchange' event.
Then when needed, a function to load the cookie into a JavaScript string variable, parse the string for actual variables from between ';&&;' and load them into real JavaScript variables by the corresponding name, then when the user returns to the form the JavaScript fills in the values of the corresponding (by same name) form elements with these values, automatically.
Any help would be greatly appreciated.
Thanks in Advance!!
-James A.

FULL SOLUTION BELOW : Here is the complete 'save_form.js' code!
//<!-- Prerequisites: jquery.min.js -->
//<!-- A script to set a cookie [Argument(s) accepted: Cookie Name, Cookie Value, etc.] [BEGIN] -->
function set_cookie ( name, value, path, domain, secure )
{
var cookie_string = name + "=" + escape ( value );
var cookie_date = new Date(); // current date & time ;
var cookie_date_num = cookie_date.getTime(); // convert cookie_date to milliseconds ;
cookie_date_num += 35 * 60 * 1000; // add 35 minutes in milliseconds ;
cookie_date.setTime(cookie_date_num); // set my_date Date object 35 minutes forward ;
cookie_string += "; expires=" + cookie_date.toGMTString();
if ( path )
cookie_string += "; path=" + escape ( path );
if ( domain )
cookie_string += "; domain=" + escape ( domain );
if ( secure )
cookie_string += "; secure";
document.cookie = cookie_string;
};
//<!-- A script to set a cookie [Argument(s) accepted: Cookie Name, Cookie Value, etc.] [END] -->
//<!-- A script to grab a cookies value by name [Argument(s) accepted: Cookies Name] [BEGIN] -->
function get_cookie ( cookie_name )
{
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
if ( results )
{
return ( unescape ( results[2] ) );
}
else
{
return null;
};
};
//<!-- A script to grab a cookies value by name [Argument(s) accepted: Cookies Name] [END] -->
function populateCookieFromForm ( cookieName ) {
var encodedCookie;
var preCookieObj = '{';
var allMainElements = $('form').find('input[type=text], select');
for (var i=0; i < allMainElements.length; i++)
{
preCookieObj = preCookieObj + '"' + allMainElements[i].name +'":"'+ allMainElements[i].value +'",';
};
preCookieObj = preCookieObj.substring(0, preCookieObj.length - 1);
preCookieObj = preCookieObj + '}';
//<!-- btoa() encodes 'string' argument into Base64 encoding -->
encodedCookie = btoa( preCookieObj );
set_cookie(cookieName, encodedCookie);
};
function populateFormFromCookie (cookieName) {
if ( ! get_cookie ( cookieName ) )
{
//<!-- Do Nothing - No Cookie For this form set. -->
}
else
{
//<!-- atob() decodes 'string' argument from Base64 encoding -->
jSONCookieObj = atob( get_cookie ( cookieName ) ) ;
jSONObj = JSON.parse( jSONCookieObj );
var allMainElements = $('form').find('input[type=text], select');
for (var i=0; i < allMainElements.length; i++)
{
var elementName = allMainElements[i].name;
var elementValue = jSONObj[elementName];
allMainElements[i].value = elementValue;
};
};
};
function populateCookieFromRadios (cookieName) {
var radioState={};
$(':radio').each(function(){
if(!radioState[this.name]){
radioState[this.name]={};
}
radioState[this.name][this.value]=this.checked;
});
/* stringify to JSON and convert to Base64 */
var storeString= btoa(JSON.stringify(radioState));
/* store in cookie*/
set_cookie(cookieName, storeString);
};
function populateRadiosFromCookie (cookieName) {
if ( ! get_cookie ( cookieName ) )
{
//<!-- Do Nothing - No Cookie For this form set. -->
}
else
{
var cookieString = get_cookie ( cookieName );
var newPageState= JSON.parse(atob(cookieString));
/* loop through radios setting state */
$(':radio').prop('checked',function(){
return newPageState[this.name][this.value];
});
};
};
This is how you properly call these functions. Near the bottom of the HTML/PHP page containing the form, place this JavaScript respectively:
<script type="text/javascript">
//<!-- If returning user detected, populate form with cookie values [BEGIN] -->
populateFormFromCookie('thisForm');
populateRadiosFromCookie('thisFormRadios');
//<!-- If returning user detected, populate form with 'section' cookie values [END] -->
//<!-- On change of ALL form elements re-save form cookie(s) [BEGIN] -->
$('input[type=radio]', $('form')).on('change',function(e){
populateCookieFromRadios('thisFormRadios');
});
$('input[type=text], select, textarea', $('form')).on('change',function(e){
populateCookieFromForm('thisForm');
});
$('input[type=text]', $('form')).on('input',function(e){
populateCookieFromForm('thisForm');
});
//<!-- On change of ALL form elements re-save form cookie(s) [END] -->
</script>
The next task is to see if all of this can be done without jQuery...hmm...

Capture and recall the state of radio button groups using cookies and as little jQuery as possible

Just a day ago I posted this question and found/built my own solution, for lack of a sufficient answer. Now, I need help going through a similar process again. This time, however, I need to capture (save to cookie as 'Base64' data) and recall (recheck upon user return) the state of all the radio button groups (by 'name' not 'ID', for obvious reasons), after the page loads, and if need be trigger all corresponding onchange events attached to them. For example, if a radio button group label has the question, "Have you lived at this address for more than 3 years?' one radio button label says 'Yes', and the other, 'No'. If the user chooses 'No' an extra 'address' table row is displayed in the table. All of the mechanics of the table appearing on 'No' 'checked' has already been done. I'm looking for a simple way to:
A:) Record all radio button group(s) state(s) (i.e which one is checked), on the 'onchange' event of any radio button on the form.
B:) Convert that information to JSON or some other record keeping
C:) Base64 encode data in step [B:]
D:) Save to a cookie
Upon page reload (user returns to page)...
E:) Grab data from cookie
F:) Decode Base64 and assign to variable
G:) From data iterate through all the forms radio buttons re-checking what was originally checked.
Sound easy? Give it a try! I did....and am still.

Here's the basics in jQuery without the cookie saving, will leave that to you
var radioState={};
$(':radio').each(function(){
if(!radioState[this.name]){
radioState[this.name]={};
}
radioState[this.name][this.value]=this.checked
});
/* stringify to JSOn and convert to Base64 */
var storeString= btoa(JSON.stringify(radioState));
/* store in cookie*/
/* on page load pull data from cookie (if exists) - add a cookie validation test*/
var cookieString=storeString;// just using this for demo
var newPageState= JSON.parse(atob(cookieString));
/* loop through radios setting state */
$(':radio').prop('checked',function(){
return newPageState[this.name][this.value];
});
DEMO
atob() and btoa() docs
EDIT: Use localStorage if browser supported, with cookie fallback. Will minimize cookie size sent to server for each and every http request made to site

Thank You #Charlietfl. +1! Here is the complete 'save_form.js' code!
//<!-- Prerequisites: jquery.min.js -->
//<!-- A script to set a cookie [Argument(s) accepted: Cookie Name, Cookie Value, etc.] [BEGIN] -->
function set_cookie ( name, value, path, domain, secure )
{
var cookie_string = name + "=" + escape ( value );
var cookie_date = new Date(); // current date & time ;
var cookie_date_num = cookie_date.getTime(); // convert cookie_date to milliseconds ;
cookie_date_num += 35 * 60 * 1000; // add 35 minutes in milliseconds ;
cookie_date.setTime(cookie_date_num); // set my_date Date object 35 minutes forward ;
cookie_string += "; expires=" + cookie_date.toGMTString();
if ( path )
cookie_string += "; path=" + escape ( path );
if ( domain )
cookie_string += "; domain=" + escape ( domain );
if ( secure )
cookie_string += "; secure";
document.cookie = cookie_string;
};
//<!-- A script to set a cookie [Argument(s) accepted: Cookie Name, Cookie Value, etc.] [END] -->
//<!-- A script to grab a cookies value by name [Argument(s) accepted: Cookies Name] [BEGIN] -->
function get_cookie ( cookie_name )
{
var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
if ( results )
{
return ( unescape ( results[2] ) );
}
else
{
return null;
};
};
//<!-- A script to grab a cookies value by name [Argument(s) accepted: Cookies Name] [END] -->
function populateCookieFromForm ( cookieName ) {
var encodedCookie;
var preCookieObj = '{';
var allMainElements = $('form').find('input[type=text], select');
for (var i=0; i < allMainElements.length; i++)
{
preCookieObj = preCookieObj + '"' + allMainElements[i].name +'":"'+ allMainElements[i].value +'",';
};
preCookieObj = preCookieObj.substring(0, preCookieObj.length - 1);
preCookieObj = preCookieObj + '}';
//<!-- btoa() encodes 'string' argument into Base64 encoding -->
encodedCookie = btoa( preCookieObj );
set_cookie(cookieName, encodedCookie);
};
function populateFormFromCookie (cookieName) {
if ( ! get_cookie ( cookieName ) )
{
//<!-- Do Nothing - No Cookie For this form set. -->
}
else
{
//<!-- atob() decodes 'string' argument from Base64 encoding -->
jSONCookieObj = atob( get_cookie ( cookieName ) ) ;
jSONObj = JSON.parse( jSONCookieObj );
var allMainElements = $('form').find('input[type=text], select');
for (var i=0; i < allMainElements.length; i++)
{
var elementName = allMainElements[i].name;
var elementValue = jSONObj[elementName];
allMainElements[i].value = elementValue;
};
};
};
function populateCookieFromRadios (cookieName) {
var radioState={};
$(':radio').each(function(){
if(!radioState[this.name]){
radioState[this.name]={};
}
radioState[this.name][this.value]=this.checked;
});
/* stringify to JSON and convert to Base64 */
var storeString= btoa(JSON.stringify(radioState));
/* store in cookie*/
set_cookie(cookieName, storeString);
};
function populateRadiosFromCookie (cookieName) {
if ( ! get_cookie ( cookieName ) )
{
//<!-- Do Nothing - No Cookie For this form set. -->
}
else
{
var cookieString = get_cookie ( cookieName );
var newPageState= JSON.parse(atob(cookieString));
/* loop through radios setting state */
$(':radio').prop('checked',function(){
return newPageState[this.name][this.value];
});
};
};
This is how you properly call these functions. Near the bottom of the HTML/PHP page containing the form, place this JavaScript respectively:
<script type="text/javascript">
//<!-- If returning user detected, populate form with cookie values [BEGIN] -->
populateFormFromCookie('thisForm');
populateRadiosFromCookie('thisFormRadios');
//<!-- If returning user detected, populate form with 'section' cookie values [END] -->
//<!-- On change of ALL form elements re-save form cookie(s) [BEGIN] -->
$('input[type=radio]', $('form')).on('change',function(e){
populateCookieFromRadios('thisFormRadios');
});
$('input[type=text], select, textarea', $('form')).on('change',function(e){
populateCookieFromForm('thisForm');
});
$('input[type=text]', $('form')).on('input',function(e){
populateCookieFromForm('thisForm');
});
//<!-- On change of ALL form elements re-save form cookie(s) [END] -->
</script>
The next task is to see if all of this can be done without jQuery...hmm...

Cookie created in JavaScript not updating when using ASP.NET

I am creating a cookie in JS using this:
function setCookie(name, value, expires, path, domain, secure) {
var curCookie =
name + "=" + value +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "/") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
setCookie('AccountSelectedTab', '1');
when I then try to edit that cookie using ASP.NET:
Response.Cookies['AccountSelectedTab'].Value = 'some value';
It creates another cookie instead of changing it.
If I set the path to be the same on both cookies then I don't get a second one but the JS one doesn't update.
I guess I am missing something but need an idea as to what...
Thanks.

I suppose you change your code behind as :
HttpCookie cookie = new HttpCookie("newCookie");
cookie.HttpOnly = false;
without this you won't be able to access cookies through Javascript.

Why document.cookie is not working

var curCookie = name + "=" + value +
"; expires=" + ATS_getExpire() +
"; path=" + path +
"; domain=" + domain ;
document.cookie = curCookie;
alert("Your Cookie : " + document.cookie);
When i use above code the alert message coming as empty. Why document.cookie is coming as empty.
Please anybody answer.

See here for a Live Example
You're using ; instead of ,.
Use , to deliminate your cookie values
var curCookie = name + "=" + value +
", expires=" + ATS_getExpire() +
", path=" + path +
", domain=" + domain;
document.cookie = curCookie;
alert("Your Cookie : " + document.cookie);
UPDATE
As of today (2021-08-25), the live example is not consistent accross browsers:
Chrome 92.0.4515.159: ❌
Edge 92.0.902.78: ❌
Opera 77.0.4054.277: ❌
Firefox 91.0.2: ✅

I found that ... frustratingly, document.cookie doesn't work when running the page locally in one's browser.
When I uploaded the same page to a website, suddenly all the cookie values worked just fine. I will find out why this is and fill the rest of this answer out later.

Sometimes this can occur if the page is hosted on a domain listed on the public suffix list (e.g. github.io, cloudfront.net). These domains are treated specially by the browser and restrict writing cookies for security reasons.

Try using jQuery Cookie plugin:
jQuery Cookie plugin
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });