Answered

How to prevent poping on every page ?

  • 10 December 2021
  • 12 replies
  • 486 views
F
Userlevel 3
Badge +2
  • FPBB
  • Sharing wisdom
  • 27 replies

Hello community,

I really like TypeForm as it allows me to be interactive with my audience. I have built a dialogue to catch more newsleter subscritions, but I am facing a problem.

To catch more attention, I have to trigger the side tab after let’s say 5 seconds. As My users can land on any page, I paste the code in the <body> all over the site.

If the user submits the form, then the form disappear, because I checked the “close embed on completion”.

However if the user simply closes the form, then when he visits another page, the form pops up again after 5 seconds. This can be really anoying for the user.

So my question is : is there any solution to force the form to stay down if the user have cliked the “close” button ?

Thanks in advanced.

icon

Best answer by FPBB 14 December 2021, 11:09

View original

12 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @FPBB Happy Friday! I don’t believe we have a solution for this within our embed code, but @mathio or @picsoung might have some workarounds for you. :grinning:

Life is a series of awkward moments separated by snacks.
mathio
Rank
Userlevel 7
Badge +5

Hello @FPBB and @Liz 

yes, something like this is possible by integrating our embed SDK. One of the simplest approaches would be to save a cookie when the side tab is closed and check the cookie before opening.

<!-- include JS and necessary CSS from embed SDK -->
<script src="//embed.typeform.com/next/embed.js"></script>
<link href="//embed.typeform.com/next/css/sidetab.css" rel="stylesheet" />

<!-- custom embed SDK integration -->
<script>
  // save cookie on sidetab close
  const onClose = () => {
    document.cookie = 'tfWasClosed=true'
  }

  // use embed SDK to create a side tab
  const { open } = window.tf.createSidetab('oWPUHPmF', { onClose })

  setTimeout(() => {
    // check cookie if typeform was closed before
    const wasClosed = document.cookie.match('tfWasClosed=true')

    // open after 5 seconds if it was not closed before
    if (!wasClosed) {
      open()
    }
  }, 5000)
</script>

 

F
Userlevel 3
Badge +2

Thanks @mathio , in wich file shall I paste this code ?

mathio
Rank
Userlevel 7
Badge +5

You need put this into your HTML. In theory if you replace your embed code with this it should work.

F
Userlevel 3
Badge +2

Thanks @mathio, I tried to implement this code by myself, but it just displayed another popup :). To make sure I don’t do anything wrong, here is my code :

***********************************

<button data-tf-popup="fSAPYiON" data-tf-open="time" data-tf-open-value="30000" data-tf-auto-close data-tf-iframe-props="title=Vos marques en promo !" style="all:unset;"></button><script src="//embed.typeform.com/next/embed.js"></script>

************************************

Could you show me how to implement your code  on my code?

Thanks in advanced.

mathio
Rank
Userlevel 7
Badge +5

I think this should work for your typeform:

<script src="//embed.typeform.com/next/embed.js"></script>
<link href="//embed.typeform.com/next/css/popup.css" rel="stylesheet" />
<script>
  const onClose = () => {
    document.cookie = 'tfWasClosed=true'
  }

  const { open } = window.tf.createPopup('fSAPYiON', { 
    onClose, 
    autoClose: true, 
    iframeProps: { 
      title: 'Vos marques en promo !'
    } 
  })

  setTimeout(() => {
    const wasClosed = document.cookie.match('tfWasClosed=true')

    if (!wasClosed) {
      open()
    }
  }, 30000)
</script>

 

F
Userlevel 3
Badge +2

Thanks @mathio , it works :slight_smile: .

Liz
Rank
Userlevel 7
Badge +5

Yay! Glad to hear that worked, @FPBB ! Let us know if we can help with anything else. 

Life is a series of awkward moments separated by snacks.
F
Userlevel 3
Badge +2

Hi @mathio, 

Somehow the script is not working anymore, perhaps due to some updates ? To remind you, the goal was to set the trigger the side tab after 5  seconds, and then to keep it closed during the visit if the user was cliking the “close” button.

For this you gave me this code :

 

I think this should work for your typeform:

<script src="//embed.typeform.com/next/embed.js"></script>
<link href="//embed.typeform.com/next/css/popup.css" rel="stylesheet" />
<script>
  const onClose = () => {
    document.cookie = 'tfWasClosed=true'
  }

  const { open } = window.tf.createPopup('fSAPYiON', { 
    onClose, 
    autoClose: true, 
    iframeProps: { 
      title: 'Vos marques en promo !'
    } 
  })

  setTimeout(() => {
    const wasClosed = document.cookie.match('tfWasClosed=true')

    if (!wasClosed) {
      open()
    }
  }, 30000)
</script>

 

Well, somehow the script pops up again every 30 seconds, even if a user closes it,  where it use to stay down a few days before, you are welcome to check here : c-moins-cher.com. 

Here is how I inserted with WP plugin “insert header and Footer” :

Any tip ?

Thanks in advanced

mathio
Rank
Userlevel 7
Badge +5

Hello @FPBB the script works for me - in a separate webpage and also in your webpage:

  1. visit the page for the first time
  2. after 30 seconds a typeform in popup is opened
  3. close typeform popup
  4. reload page
  5. no popup is opened anymore

Check in your browser there is a cookie names tfWasClosed after you close the popup. Maybe you have a browser plugin preventing this?

F
Userlevel 3
Badge +2

Thanks @mathio I am glad it works on your side, however there is no such coockie in my browser :

 

F
Userlevel 3
Badge +2

I have changed the pop uptime from 30 sec to 3 sec, and it’s now all working… ho well, what do we know...:wink: . Thanks for your help.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs