Lightbox Code

Discussion Ask a question
,
1

Hello, I am looking for a way to create a Lightbox that would pop-up for users who enter my site. I want the Lightbox to say Get $10 off when you spend $100 or more. The customer would enter his/her email address and then there would be a button that says “Get Code” they would click this and then a discount code would appear. Can someone send me the code for this or instruct me how this would be done?

Thank you…India

2

Hi India!
Im sorry, we can’t code on your behalf, but, I’ll be glad to instruct you.

First step: Setting a Lightbox!
Other than designing it the way you want, as shown in the following image, you can choose in which pages the Lightbox will appear and what will trigger its appearance.

968×640 166 KB

Make sure to turn the user input box to one of type “email” so you’ll have a minimum authentication (or write your own authentication , for example , by looking for the mail address of the user in a list of users addresses you have in your database if you have a list of subscribed users).

Second step: The button!
Design a button in your Lightbox. Then, open the button properties and add an ‘onClick’ function - we’ll return to that in a sec.
Add a text box that contains your super secret and special discount code.
Enter the properties of the text box and make sure you check the box that says “Hidden on load”.

Back to the ‘onClick’ button function.
The code should look something like that:

export function button1_click(event, $w) {
// if you want to check the email validity,
// this where you should add your conditioning 
    $w("#textBox").show( )
}

Make sure to use the right item ID’s as shown in the items properties panel.

I hope it helps!
Best of luck!
Doron. :slight_smile:

3

Hello thank you for responding back. I am having difficulty finding where the “ properties of a text box” would be. I also do not see, “Hidden on Load”. Also do I enter everything that is in the code from export function to the last parentheses?

4

I’m sorry but I’m not understanding because I entered the code you gave and it doesn’t do anything

5

Hi India,

If you followed my instruction you should have reached this point:

893×532 180 KB

Keep in mind!
The code you need should be written in the page editor of the Lightbox itself because this is where your button is.
I have tested it and it should work for you as well.

P.S
As you can see, the properties of #text15 are open and you have the option to make it hidden when the page is loaded.

Best of luck!
Doron. :slight_smile:

6

Hello, again thank you very much for your guidance but where I seem to have a roadblock is after I open up the light box. I get to the light box just as you have the first screenshot, I bring everything up just as you but then when you say design a button and go to the button properties after that I can not seem to get to the screenshots you have after that. I am not able to find “ properties” with those choices. This then leads me to a dead end. Why isn’t there someone from Wix that can walk me thru this over the phone. When I call the tech support has no clue about how to find this AND I even was reading the instructions to them. It’s very frustrating it shouldn’t be this difficult to try and design something in my own website. My frustration isn’t directed towards you it’s just that ur not available to talk and the support that is has no clue.

7

There was a area at the header screen that said code, I clicked on it and it allowed me to download code properties. I’m not sure if thi is what helped but I was finally able to see the bottom properties This you didn’t mention I needed to do). I was able to click in everything you said to do however there is a yellow hazard sign with my code so I’m not sure what happened. In my code after export function I have “ box1_click(event, $w) { //$w(“text13”) . show(): The hazard sign is on the export function line

8

Hello Sir,
I have added lightbox on this page https://www.wellsquarednutrition.com/wellsquared-weekend
I wants to remove the lightbox after user enter their email and click on subscribe button.
I have also added this code in my footer but it’s till not working.

9

Hi all!

First, India,
It would be much easier for me to help you if you post either a screenshot of what you’ve encounter or a link to the page you’re facing issues with . That way I can inspect your site and provide you with the best solution.
There is no need to download anything using our coding editor, just turn on the “developer tools” in the ‘code’ section tab.

Second, Uzair.
After I inspected your site and couldn’t find any code written (all pages has 0 lines of code) I couldn’t quite understand where you’ve put the code that you mentioned.
Please elaborate about your problem.
And from now on, when you have a question please open a new thread so other Forum-users can benefit from it when they find your post!

Best of luck for both!

Doron.