Skip to main content
Solved

trigger popup from multiple buttons in the same page


Forum|alt.badge.img+2

Hello,

I have successfully added button in my website which triggers a Klaviyo popup. Now I would like to add a second button but I see it is not triggering the popup. I think the issue is that the script listen to the first button only, so here is my question: how can I edit the script so that the popup is trigger by every buttons?

 

<button class="klaviyo_form_trigger">First button</button>
<button class="klaviyo_form_trigger">Second button</button>
<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

Best answer by retention

Hi @mdev, welcome to the community!

Can you try the following code:

<button class="klaviyo_form_trigger_1">First button</button>
<button class="klaviyo_form_trigger_2">Second button</button>
<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger_1').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
	document.querySelector('.klaviyo_form_trigger_2').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

This should create event listeners for a “click” that is unique to each button, but still open the same form referenced in your FORM_ID. I haven’t tested this but give it a try and let me know.

View original
Did this topic or the replies in the thread help you find an answer to your question?

2 replies

retention
Partner - Platinum
Forum|alt.badge.img+62
  • 2025 Champion
  • 944 replies
  • Answer
  • October 4, 2022

Hi @mdev, welcome to the community!

Can you try the following code:

<button class="klaviyo_form_trigger_1">First button</button>
<button class="klaviyo_form_trigger_2">Second button</button>
<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger_1').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
	document.querySelector('.klaviyo_form_trigger_2').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

This should create event listeners for a “click” that is unique to each button, but still open the same form referenced in your FORM_ID. I haven’t tested this but give it a try and let me know.


Forum|alt.badge.img
  • Contributor I
  • 1 reply
  • April 27, 2023

Hi @retention !

Super helpful snippet above.  I’m trying to achieve something similar with respect to my website’s signup form (Pop up).  I am trying to show an initial pop up that provides the customer/user with three button options to click, each button triggering a different form to collect more unique and personalized information based on the initial button selection.

The first selection criteria is as follows:

 

Then i am trying to configure each selection to bring the user to a different signup form with more information relevant to them

e.g.: for the Expecting Moms, this button should trigger the following:
 

 

For New Moms, this form should trigger something different:

 

etc.  I’ve included the following code in my main-page.liquid to try and achieve this but I don’t know if I there is a way to assign each of the 3 initial buttons unique values which help drive this process.
 

<div class="central content py-medium">
  <h1 class="feature-header" data-cc-animate>{{ page.title }}</h1>

  <div class="rte" data-cc-animate data-cc-animate-delay="0.2s">
    {{ page.content }}
  </div>

  <button class="klaviyo_form_trigger_1">First button</button>
  <button class="klaviyo_form_trigger_2">Second button</button>
  <button class="klaviyo_form_trigger_3">Third button</button>
  <script type="text/javascript">
    document.querySelector('.klaviyo_form_trigger_1').addEventListener('click', function (){
    	window._klOnsite = window._klOnsite || [];
    	window._klOnsite.push(['openForm', 'YviDz5']);
    });
    document.querySelector('.klaviyo_form_trigger_2').addEventListener('click', function (){
    	window._klOnsite = window._klOnsite || [];
    	window._klOnsite.push(['openForm', 'Tnw28a']);
    });
     document.querySelector('.klaviyo_form_trigger_3').addEventListener('click', function (){
    	window._klOnsite = window._klOnsite || [];
    	window._klOnsite.push(['openForm', 'RHjD9W']);
    });
  </script>
</div>

{% schema %}
{
  "name": "Page"
}
{% endschema %}