Javascript to trigger lightbox?

  • 10 December 2016
  • 6 replies
  • 144 views
M

How can I trigger the display of a light box by javascript?

We created a light-box via the regular method (lightbox button in the builder), and made the button itself hidden for both mobile and desktop views.
We’d like this to display only based on URL parameters.

GOAL:
If “first_name” and “email” exist as URL parameters, trigger the lightbox immediately on page load
(or sooner ;P)

I suspect that the lightbox Button is typically triggered by Javascript, so I imagine that’d be a good place to start.
But, alas, I don’t know where to look …where to find it.
Of course, ANY alternate suggestions are also welcome 🙂
I’d appreciate as much help as I could get!

As a side note, I need to ensure that the name and email values are available to the lightbox because we need to use those values for the thank-you/confirmation message.

6 replies

Hristian
Userlevel 7
Badge +3

Hi @mOrloff,

I’ve written scripts for clients before that show/hide page elements based on a URL parameter.
I haven’t done it with a lightbox but it should be possible in theory.

You’ll need a custom script that “listens” for these URL parameters and executes based on pre-set conditions.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
M

Yeah, thanks.
I figured I could just watch for those param’s and then trigger whatever the button triggers.
That may still be true, but I found the pertinent code in the source and it’s a bit out of my comfort zone.

The page is published for testing, but not QUITE ready for live traffic.
http://lifeliberatorlabs.com/weight-loss-super-pack

I did a ctrl+f find for “lightbox” when viewing the source, and found everything I hoped to.
Again, just a little more complex than my meager js skills at this point.

Please take a look.

@Hristan, were you offering your services for hire?
If so, take a look at the specifics and advise of specifics in return.

Rob
Userlevel 6

Hi @mOrloff I have some code that can do what you’re after if you’re still looking for a solution to this. You’ll need to change the ID in the script to match the lightbox button on your page. Essentially this script looks for the defined URL parameter, and if it’s there it triggers a click on the lightbox button after a minimal time delay of 1 millisecond.

You can find the script here - https://gist.github.com/RobertCam/ce75e8fcfa1dcd7157c16c79d3719ed9

I’ve put together to look for an “email” or “first_name” parameter. You can change this as well in the javascript by editing the “var email” and “var first_name” lines of the code. If you change the parameters make sure to edit the “if” statement as well, as that’s what’s triggering the lightbox based on the presence of the URL parameter.

You can check it our on my example page here - http://unbouncepages.com/launch-lb-params/
To see it in action add one of those parameters to the page URL - http://unbouncepages.com/launch-lb-params/?email=email

Hope this helps! Let me know if you run into any issues getting it set up.

I

Hi ROb,

it’s me again! Can I put multiple javascripts for 4 different Landing Pages that show as Lightboxes, depending of the parameter?

So, multiple JS Codes in the same LP that trigger different Lightboxes?

Rob
Userlevel 6

Hi @ibrudap You can add multiple instances of the script in order to have different buttons triggered with different params. Simply copy/paste the script and change the ID for the button and the params in the code.

I

Hi Rob,

thanx for the reply! We actually tried it, but the auto lightbox triggered only with one button. maybe we did something wrong, but we tried many times and many ways. At the end, we found another solution 🙂
thank you again!

Reply


Terms & ConditionsCookie settings