Answered

Multiple CTAs that trigger embedded Typeform

M
Userlevel 1

Hi there,

I’m trying to embed the Typeform, that should pop up when pressed by any of the CTA buttons across multiple pages (multiple on the same page too).

For some reason, it only works for one button (using the ID option). Here’s the code.

<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script>
  const { open, close, toggle, refresh } = window.tf.createPopup('<form-id>')
  document.querySelector('#lead-form').onclick = toggle
</script>

I tried it with querySelectorAll, but that doesn’t work either. 

Would love getting some guidance on how to solve this. Thanks!

icon

Best answer by mathio 5 July 2022, 10:59

View original

5 replies

Liz
Rank
Userlevel 7
Badge +5

@mathio might be able to help with this!

Life is a series of awkward moments separated by snacks.
M
Userlevel 1

Hi again,
Tha@Liz , hopefully @mathio can answer :) 

For now, what I’m using is just:

<!-- <script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
<script>
  const { open, close, toggle, refresh } = window.tf.createPopup('form-id')
  document.querySelector('#button-leadform1').onclick = toggle
  document.querySelector('#button-leadform2').onclick = toggle
</script>

So basically just creating additional querySelectors for all buttons, but this is far from ideal because there will be 20+ buttons across the website.

mathio
Rank
Userlevel 7
Badge +5

Hello @maartin9 can you share your code using querySelectorAll? 

Don’t forget method querySelectorAll returns NodeList and you need to add the toggle handler in a loop for each element:

document
  .querySelectorAll(".my-cta")
  .forEach(btn => btn.onclick = toggle)

 

M
Userlevel 1

That works beautifully! Thank you!

Liz
Rank
Userlevel 7
Badge +5

Yay! Glad to hear that worked, @maartin9 !

Life is a series of awkward moments separated by snacks.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs