How to trigger a Klaviyo form with a button click on my website?

How to trigger a Klaviyo form with a button click on my website?

websiteuser3072
Visitor
3 0 1

I'm trying to add a klaviyo form to a button which will appear when the button is clicked. I have successfully configured shopify to klaviyo and created the form where it provides a code. 

 

To get the button to trigger the form I would need to edit the theme code, I have been trying to edit the section (impact-text) which contains the button. I was able to successfully get the text on my website and was able to trigger the form when clicked. However, the button link is not in the same design as my original button. 

 

Here is the code I'm meant to add to the theme:

 

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

and here is the section in my code where I'm meant to change

 

<div class="impact-text__content">

                    {{- block.settings.content -}}
                    {%- if block.settings.button_text != blank -%}
                      {%- render 'button', content: block.settings.button_text, href: block.settings.button_url, size: 'xl', background: section.settings.button_background, text_color: section.settings.button_text_color -%}
                    {%- endif -%}

I'm meant to change the render 'button' section but I cant seem to figure it out!!

 

Could someone help please

 

Reply 1 (1)

Andreas_Gaehwil
New Member
13 0 0

any advice on this? having the same problem