Solved

trigger popup from multiple buttons in the same page

  • 4 October 2022
  • 2 replies
  • 490 views

Badge +1
  • Contributor I
  • 0 replies

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>
icon

Best answer by retention 4 October 2022, 17:57

View original

2 replies

Userlevel 7
Badge +57

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.

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 %}

 

Reply