How to Install in Unbounce

This is AWESOME!! Nice one @Rob you’re a champ! 👊

This is seriously solid stuff, @Rob! Awesome job.

Okay two questions:

1. I’m trying to use this with a radio button. It SHOULD work with a radio button, No?


2. My value has embedded spaces and a “/” - do I need to do the “%2C+” etc substitutions in the script or will that be taken care of by the protocol

So just to be clear on that last point:

I have something like “plan=Top Rockin Gold” as my param/value pair

Do I need to provide it as “plan=Top%2C+Rockin%2C+Gold” ??

Hi @Rob - I use this script all the time! Thank you 😊

I am also using another script to assign a specific class to buttons on a page. I do this to set a popup to trigger on that class in cases where I have more than one call to action leading to, say a form in the shape of a popup.

Let’s say I want to assign class “lightbox” to all buttons on a page and set the popup to trigger on that class.

<script>

  

  var btn = document.getElementById("lp-pom-button-6566");

btn.classList.add("lightbox");

  var btn = document.getElementById("lp-pom-button-6497");

btn.classList.add("lightbox");

 </script> 

How can I combine the button id script above with assigning class. I have tried using both scripts on a page, but it won’t add the dynamic parameter in your script.

Please help.

Hi @Finge!!

The best option will probably be to assign the class to the buttons before the button id script as opposed to combining them. You could add a line to the button id script to assign the class using jQuery. However that would only apply the class to the button after it’s been clicked, which won’t be effective for using it as a way to launch a popup.

You can though just apply the class above the click function in the button id script. For example

var btn = document.getElementById("lp-pom-button-6566");

btn.classList.add("lightbox");  

  

$("#lp-pom-button-6566").click(function() {

  var url = $(this).attr('href').split("?")"0];

  $(this).attr("href", url + params + character + "plan=Bronze");

});

The above code would apply the “lightbox” class on page load, and then the URL params to track the button click that tiggers the form.

Hope this helps! Let me know if I missed anything with what you’re trying to accomplish.

Thank you @Rob 🙂

Adding the class to the script worked, but the parameter “plan” does not pass to the popup. It seems to only work for the built in lightbox form on pages, not when triggering a popup.

Any thoughts on this?

@Rob, any chance of getting this script to work for popups too?

Hey @Finge I’ve been playing around with this today trying to get it to work with a popup. The problem I’m running into is that the popup will pull in the URL parameters from the referrer in the request that’s made to trigger it. So unless the URL parameter is already present when the page initially loads it doesn’t get passed through to the popup.

So with the example LP, the URL param only get’s passed to the popup if the page initially loads with http://unbouncepages.com/lightbox-button-pre-fill/?plan=gold the “plan=gold” part does get passed. This obviously isn’t helpful. The best thing I could think of would be to have the page reload with the new parameter and then launch the popup “on page load” but only target the specific URL param.

I’ll try and think of some better solutions but can’t promise I’ll be able to come up with anything better (will try my best though!).

Thank you for your reply! That’s what I discovered as well. Based on that I did some research and found a script that will append a parameter to the URL without reload. Added bonus - this way I can even add more parameters that will pass to the popup based on what page it loads from.

I am sure there is something that can be done to refine this script so that it tracks if you don’t have incoming parameters and “page variant” will be the first parameter, it will replace “&page_variant” with “?page_variant”.

<script>

  

  var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search + '&page_variant=F&product_interest=ProductX';

window.history.pushState({ path: newurl }, '', newurl);

  

</script>

Sorry for the late reply here @danmartin42! I just tried the page and it looks like it’s unpublished. If you’re still struggling with the script let me know and I can take a look for you if you publish the page again or drop a link to the preview screen.

Hi @Rob!

Is there a simple method of changing the color of a button using this type of script?

Background: I am working for a charity that does more or less “sporty” competitions. There are two teams (pink and mint) and I am working on a landing page where visitors are asked to become a member of either of those teams.

I want a Lightbox to appear and the “submit” button should be either pink or mint - depending on the choice.

On a related topic: would it be somehow possible to have specific images displayed on the Lightbox, depending on what button was clicked before?

Thanks in advance!

I’m using this script on a project I’m working on, and it works as expected. Thank you.

I was wondering if it were possible to amend this script to pass additional variables that populate the form, but aren’t displayed using DTR.

For example, if I wanted to populate another variable called “conv_type_processing” with “Channel Partner Lead - International Channel Campaign 2021 PAM Level 1” how would I do that?

Thanks so much.

I’ve worked it out! Whoop. I went out for a walk and was working through the script in my head and figured out that all I need to do is separate the variables passed with a “&”.

Thanks to the original author.