Skip to main content
All CollectionsPre-launch and Giveaway Capaigns
How to use a custom trigger button for the popup in your Squarespace page
How to use a custom trigger button for the popup in your Squarespace page
Fivos Stergiannis avatar
Written by Fivos Stergiannis
Updated over a week ago

Integrating Viral Loops to your Squarespace page is pretty easy and you can be up and running in minutes. Just follow this guide that explains how to install the campaign by using the Viral Loops trigger button.

However, you can also use a different button, for example one from Squarespace.

Please note that this is an experimental option. It might not be supported in all landing page configurations and requires some code editing to make it work.

While editing your website, add a button in it. You can place it anywhere you like but we recommend somewhere where it's clearly visible, perhaps at the top of your page.

After all, you want the majority of your visitors to join your campaign!

Edit the text of the button to whatever you like and make sure to leave the URL field empty as you don't want this button to take your visitors anywhere. Save your changes.

Now right-click on the button you just created and select "Inspect" (or "Inspect Element").

(Hint: In Safari, if you can't see the "Inspect" element, make sure to have enabled Developer Tools from the advanced settings in your preferences in Safari)

Notice that the button's ID says something like block-yui_3_17_2_4_1467209163284_11191

Copy that, we'll use it in a while.

Now go back to editing your web page and from the sidebar go to Settings --> Advanced --> Code Injection

In the Footer section, if you haven't done so already, add the Viral Loops snippet for your campaign. You can copy it from the Snippet step of your Campaign Wizard.

Right under the Javascript snippet of your campaign, add the following code:

​<script>!function(a,b){b=b||[],a.addEventListener("DOMContentLoaded",function(c){for(var d=0;d<b.length;d++){if(window.InstapageUniqueVisit){if(a.getElementById(b[d].replace(/^#/,"")))var e=a.getElementById(b[d].replace(/^#/,"")).getElementsByTagName("div")[0].getElementsByTagName("a")[0].getElementsByTagName("div")[0]}else if(window.ub){if(a.getElementById(b[d].replace(/^#/,"")))var e=a.getElementById(b[d].replace(/^#/,"")).getElementsByClassName("sqs-block-button-element")[0]}else if(a.getElementById(b[d].replace(/^#/,"")))var e=a.getElementById(b[d].replace(/^#/,""));e&&(e.removeAttribute("href"),e.className+=" vl-ctaWithId",e.onclick=function(){a.getElementById("vl-overlay").style.display="block"})}})}(document,["block-yui_3_17_2_4_1467209163284_11191"]);</script> 

Notice, almost at the end where it mentions block-yui_3_17_2_4_1467209163284_11191.

Replace the value between the two quotation marks with the value you found earlier, for your specific button in your page. 

Now save your changes, publish your page and you're ready!

Anyone that goes to your live website and clicks that button will see the ViralWidget (the popup) and they can join your campaign! :)

Need more help? Maybe check out the documentation of Squarespace, here. But also, please let us know!

Did this answer your question?