I’m using typeform’s popup chat to survey my audience, however, I want to prevent this popup from showing to the same person every time they visit my home page. Squarespace allows me to delay showing the pop up again for a set number of days, ex. do not show pop up again for 30 days. Also, if someone has submitted the form, they will see the popup again when they visit my site. I want to find a way to use my pop up without it being intrusive or annoying to visitors. Do you have code for this? Not sure why it isn’t a built in feature, as that seems super useful in so many contexts!
you can use our Embed SDK and a little bit of JavaScript code to achieve this. You can set a cookie in onSubmit callback and open the popup conditionally based on that cookie.
Like this:
<script>const cookieName = 'typeform-did-submit'if (!document.cookie.includes(`${cookieName}=yes`)) {
const [ head ] = document.getElementsByTagName('head')
// only load Typeform Embed lib JS & CSS when necessaryconst script = document.createElement('script');
script.src = '//embed.typeform.com/next/embed.js'
head.appendChild(script)
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = '//embed.typeform.com/next/css/popup.css'
head.appendChild(link)
script.onload = () => {
const { open } = window.tf.createPopup('Cqrg7cgL', {
onSubmit: () => {
document.cookie = `${cookieName}=yes;path=/;`
}
})
open()
}
}
// you can reset the cookie later if you want to show the popup again
function resetCookie() {
document.cookie = `${cookieName}=no;path=/;`
window.location.reload()
}
</script><buttononclick="resetCookie()">reset cookie</button>
you can use our Embed SDK and a little bit of JavaScript code to achieve this. You can set a cookie in onSubmit callback and open the popup conditionally based on that cookie.
Like this:
<script>const cookieName = 'typeform-did-submit'if (!document.cookie.includes(`${cookieName}=yes`)) {
const [ head ] = document.getElementsByTagName('head')
// only load Typeform Embed lib JS & CSS when necessaryconst script = document.createElement('script');
script.src = '//embed.typeform.com/next/embed.js'
head.appendChild(script)
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = '//embed.typeform.com/next/css/popup.css'
head.appendChild(link)
script.onload = () => {
const { open } = window.tf.createPopup('Cqrg7cgL', {
onSubmit: () => {
document.cookie = `${cookieName}=yes;path=/;`
}
})
open()
}
}
// you can reset the cookie later if you want to show the popup again
function resetCookie() {
document.cookie = `${cookieName}=no;path=/;`
window.location.reload()
}
</script><buttononclick="resetCookie()">reset cookie</button>
@bedofclover javascript can be placed directly into your HTML code, just make sure it is wrapped between <script> and </script> tags. You can copy-paste the code above into your page and it should work out of the box.
What tool are you using to build your website? Some no-code tools might prevent you from directly copy-pasting javascript code into your page, however almost all of them let you do it in some way.
Have my pop-up appear for most users, but in the event they have already either sumbitted the form, or simply closed it, I do not want it to pop up if they reload or revisit the page.
The Current Status:
I know I can use cookies and the embed libraries to do this however I am having trouble getting it to work. I have reworked it several times with no success.
Thanks for the great thread, all. I was wondering how to quickly alter the above code to add a delay of x seconds and also alter the size of the popup to x % of the default size?
Where would you like to add delay? You can use setTimeout function for executing code with delay or you could use Custom Launch Options to open the popup after set time.
I’m sorry, I tried to copy and paste into my HTML code and it doesn’t seem to work. You said to put it between script tags- is this separate set of tags after the src embed one or is it the same one? I would like to have the popup not appear after someone has submitted or if they closed it, but I’m not sure what part I need to duplicate in order to have both onSubmit and onClose. Also, I don’t want to reset the cookies just yet, so I assumed that meant I could ignore everything in green?
Hi Mathio, thanks for getting back to me so quickly! I changed the code to match yours and it doesn’t seem to be creating a cookie on close, because if I reload the page the popup comes back.
I think the cookie portion is working now, but now it’s opening 2 popups- first is a random quiz where the question just says yes no or maybe with a picture of a mountain or something, and then if I close that I see the quiz that I made. I’ve only made 1 quiz so I’m not sure where this second one is coming from.
I think you might be embedding my typeform 😅 You are supposed to replace form ID in the JavaScript code with your own - I already updated the code in my previous post with your form ID for your convenience, sorry for the confusion.
However if you see 2 typeforms, it is possible you did not remove your previous code (the one starting with <button data-tf-popup="DlGqn4y4"). You should only keep the JavaScript code I posted in my previous post, no other typeform snippet is necessary.
