Prevent Typeform sidetab opening on every page and every page reload for a Squarespace website? | Community
Skip to main content
Answered

Prevent Typeform sidetab opening on every page and every page reload for a Squarespace website?

M

I have used Typeform for my Squarespace website to add a subscribe newsletter sidetab. The issue is as follows:

  • The typeform sidetab keeps opening even after it is closed or submitted on every page reload and / or when a website visitor navigates to other pages on the website.
  • I would like the sidetab to be visible, but like the Squarespace in built solution, only open once in 30 days for a visitor who has closed the side-tab, and never for a visitor who has submitted the form. 
  • The time delay for the side-tab opening should be 30 seconds. 

I have also looked at various resources that resolve similar problems on the community, but it doesn’t seem to work for me. Anyone can help with the solution? The website is www.the-invisibleman.com and the script I get from Typeform to embed the side-tab is the following:

<div data-tf-live="01HMH6Z4WG3A9VTPJPR1D2DDFY"></div><script src="//embed.typeform.com/next/embed.js"></script>

Many thanks. 

MT 

Best answer by mathio-tf

Hi @Mt1001 

you will need to implement the embed using our Typeform Embed SDK directly. This is an advanced functionality that works with browser cookies.

You can use the code from this older thread, modified to use your form ID:

<!-- 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('TuiCk1ql', { 
    onClose, 
    hideHeaders: true, 
    autoClose: 1000, 
    transitiveSearchParams: true, 
    buttonColor: '#000000', 
    buttonText: 'Subscribe',
  })

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

    // open if it was not closed before
    if (!wasClosed) {
      open()
    }
  }, 90000) // open after 90 seconds (number in milliseconds)
</script>

<!-- you can keep the original embed code for the popover embed -->
<div data-tf-live="01HMMEQEPD71NEYND814GTCEMR"></div>

Hope this helps.

View original

6 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14840 replies
  • January 22, 2024

Hi @Mt1001 Thanks for stopping by the community! Do you mind sharing the URL where you have the form embedded as well as a screenshot of your embed settings in the builder? 

Life is a series of awkward moments separated by snacks.
M
  • Mt1001
  • Author
  • Explorer
  • 2 replies
  • January 22, 2024

HI Liz, 

Many thanks for reverting. Here is the link www.the-invisibleman.com and I have the form embedded in the Squarespace section, Code Injection > Header. The image attached.

One is the typeform sidetab denoted by the arrow which opens after 90 seconds, while the other is a Typeform popup, which doesn’t need to open. 

Look forward to hearing from you. 

MT

 

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14840 replies
  • January 24, 2024

Thank you! @mathio might have some helpful solutions for you about this. 😀

Life is a series of awkward moments separated by snacks.
mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • 888 replies
  • Answer
  • January 26, 2024

Hi @Mt1001 

you will need to implement the embed using our Typeform Embed SDK directly. This is an advanced functionality that works with browser cookies.

You can use the code from this older thread, modified to use your form ID:

<!-- 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('TuiCk1ql', { 
    onClose, 
    hideHeaders: true, 
    autoClose: 1000, 
    transitiveSearchParams: true, 
    buttonColor: '#000000', 
    buttonText: 'Subscribe',
  })

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

    // open if it was not closed before
    if (!wasClosed) {
      open()
    }
  }, 90000) // open after 90 seconds (number in milliseconds)
</script>

<!-- you can keep the original embed code for the popover embed -->
<div data-tf-live="01HMMEQEPD71NEYND814GTCEMR"></div>

Hope this helps.

Liz
1 person likes this
  • Liz
    Liz
M
  • Mt1001
  • Author
  • Explorer
  • 2 replies
  • January 26, 2024

Hi Mathio, 

Many thanks for reverting back. A really stupid question, but do I need to insert the entire code into the Code Injection > Header section of Squarespace or rather the Custom CSS section? Because when I copy paste the entire code into the Header section, only the pop up is there, but not the sidetab. 

With Typeform code, I had originally inserted in the Header section. 

Many Thanks

mathio-tf
Typeform
Forum|alt.badge.img+5
  • mathio-tf
  • Typeform
  • 888 replies
  • January 26, 2024

I have no experience with Squarespace. Most likely you need to add it as custom code.

I think it should work in header too, if you wrap the code to wait for the whole page to load:

<script>
window.addEventListener('load', function () {
  // all JavaScript code goes here
})
</script>

 

Liz
john.desborough
2 people like this
  • Liz
    Liz
  • john.desborough
    john.desborough

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs