Answered

Prevent popup from showing to visitor every time they visit the home page


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!

 

icon

Best answer by mathio 14 March 2023, 18:37

View original

16 replies

Userlevel 7
Badge +5

Hi @bedofclover Thanks for stopping by! We don’t currently have these options in our embed code, but I can share this feedback with the product team. 

@mathio might have some helpful workarounds or tools to create this code for you. 

Userlevel 7
Badge +5

Hello @bedofclover 

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 necessary
const 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>
<button onclick="resetCookie()">reset cookie</button>

 

Userlevel 7
Badge +5

Hi @bedofclover Happy Friday! Did the solution above work? Let us know if you still need help. 

Hi, thanks so much for replying. Could I get a little more guidance on how to set this up? Do I enter the javascript in my global css settings?

Userlevel 7
Badge +5

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

Hi,

The Goal:

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. 

 

Here is my basic pop-up code:

<button data-tf-popup="REBdpaPT" data-tf-opacity="100" data-tf-size="70" data-tf-iframe-props="title=Main Page Newsletter Sign Up (Pop-up)" data-tf-open="load" data-tf-auto-close="5000" data-tf-transitive-search-params data-tf-medium="snippet" style="all:unset;"></button><script src="//embed.typeform.com/next/embed.js"></script>

 

TIA for any help. 

Userlevel 7
Badge +5

Hi @StrictlyZak I’ve added your post here where we have the answer. 😁 Have you already tried using the code above? 

Hi @StrictlyZak I’ve added your post here where we have the answer. 😁 Have you already tried using the code above? 

Hi @Liz

I have but it seems either not to work or only work if I submit the form not if I just close it. 

Userlevel 7
Badge +5

@StrictlyZak if you want the same logic for closing the form you need to use the “onClose” callback along with “onSubmit”.

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?

 

Thanks,

Andrew

Userlevel 7
Badge +5

You can use size option to set your popup size.

For JavaScript:

window.tf.createPopup(formId, { size: 50 })

or when using HTML snippet:

<button data-tf-popup="<id>" data-tf-size="50">click</button>

 

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?

 

For reference, here’s my html code: 

<button data-tf-popup="DlGqn4y4" data-tf-opacity="100" data-tf-size="70" data-tf-iframe-props="title=What's Your Signature Mocktail?" data-tf-open="time" data-tf-open-value="5000" data-tf-transitive-search-params data-tf-medium="snippet" style="all:unset;"></button><script src="//embed.typeform.com/next/embed.js">

const cookieName = 'typeform-did-submit'

  if (!document.cookie.includes(`${cookieName}=yes`)) {
    const [ head ]  = document.getElementsByTagName('head')

    // only load Typeform Embed lib JS & CSS when necessary
    const 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=/;`
        onClose: () => {
          document.cookie = `${cookieName}=yes;path=/;`
    window.location.reload()
  }
</script>

 

I obviously have no idea what I’m doing, so any help would be greatly appreciated!

Userlevel 7
Badge +5

Hello @smustang14 

when writing JavaScript code your browser developer tool is your friend. You will find any errors in the console there. 

The code you provided in your post is not valid JavaScript code. I modified the code for your use-case:

<script>

const cookieName = 'typeform-did-submit-2'

if (!document.cookie.includes(`${cookieName}=yes`)) {

const [ head ] = document.getElementsByTagName('head')

// only load Typeform Embed lib JS & CSS when necessary
const 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('DlGqn4y4', {
size: 70,
iframeProps: {
title: 'What\'s Your Signature Mocktail?'
},
transitiveSearchParams: true,
onSubmit: () => {
document.cookie = `${cookieName}=yes;path=/;`
},
onClose: () => {
document.cookie = `${cookieName}=yes;path=/;`
}
})

// open after 5 seconds
setTimeout(() => {
open()
}, 5000)
}
}
</script>

Please let us know if this works for you.

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.

Userlevel 7
Badge +5

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.

Reply