Lightbox First Time Only Pop-up (Solved)

Ask the community
,
1

Good day, I got the below piece of code from the following post: Velo Tutorial: Creating a One-Time Popup | Help Center | Wix.com

import {local} from ‘wix-storage’;
import wixWindow from ‘wix-window’;

$w.onReady(function () {
if(!local.getItem(“firstTimePopupShown”)) {
wixWindow.openLightbox(“Lightbox Promotion”);
local.setItem(“firstTimePopupShown”, “yes”);
}
} );

I do not understand much coding, but I understand the crux of what this code is supposed to do, I put this into my website’s ‘body-start’ code through the ‘Settings’ → ‘Tracking Tools & Analytics’ → ‘New Tool’ → ’ Custom’. However it does not seem to be working. I want the lightbox to only pop-up for users that have not opened the website from their PC before (Exactly what the code says it does).

Can you please assist, is there something else I have to do to get this working?

2

Is your lightbox called ‘Promotion’ or ‘Lightbox Promotion’, if it is just ‘Promotion’ then just use that and not lightbox in front.

Also, why are you adding the code through the tracking and analytics section when it should be in the code section through your Wix Editor?

  • On your Site tab if you want it to cover all your pages on your site.

  • On your Page tab if you only want the lightbox to be on one page only.

Site Tab vs. Page Tab

In this example, we placed our code in the Site tab of the code panel. Code in the Site tab runs on all the pages in a site. That means the popup will appear on the first page the user visits, regardless of which page it is.

If you want the popup to appear the first time a user visits a specific page, instead of any page on a site, move the code above into the Page tab of the code panel for the page you want the popup to appear on.

See here for more info about using Wix Code.
https://support.wix.com/en/article/corvid-working-in-the-code-panel

//Session Storage:
import {session} from 'wix-storage';
import wixWindow from 'wix-window';

$w.onReady(function () {
  // flag is not found
  if(!session.getItem("firstTimePopupShown")) {
    // open popup
    wixWindow.openLightbox("Announcement");
    // set flag for future visits
    session.setItem("firstTimePopupShown", "yes");
 }
} ); 


//Local Storage:
import {local} from 'wix-storage';
import wixWindow from 'wix-window';

$w.onReady(function () {
  if(!local.getItem("firstTimePopupShown")) {     
  wixWindow.openLightbox("Announcement");     
  local.setItem("firstTimePopupShown", "yes");
 }
} );
3

Hi, thanks a lot for the feedback. The lightbox is called Lightbox promotion. I’ll then try adding the code via code snipped. I added it to the analytics section because when I Googled how to add code to the whole website that’s what came up, but i gue s that could bemym mistaleso let me try. Thanks. If solved I will update here.

4

I would change that name as you shouldn’t be using spaces in your element’s id name, it should really be something like ‘Promotion’ or if you are wanting to use Lightbox, then use it as ‘lightboxPromotion’ or ‘Lightbox_Promotion’ if you are wanting to still include caps and space.

From Wix about using ID:

ID
This is the name of the element you selected on your page. The first time you open the Properties panel for an element, Corvid assigns a default name to your element. If you will be writing code for a given element, it is recommended that you rename the element to something meaningful.

The element ID is used to identify the element in your code so you can select it. For example, to work with an element named myButton, you would write $w(“#myButton”) in your code. You can learn more about coding with Corvid here .

Note that you can also see an element’s ID by hovering over it or selecting it in the Editor.

5

Also, have a look here as you can find a lot of support about Wix from this page.
https://support.wix.com/en/

6

Ok great! Thanks I’ll use this and I will also change the name most probably is part of the problem.

7

Thanks @givemeawhisky for your help, I solved it, and work pretty well now. So the two problems were the naming convention and also where I was entering the code. Thanks.

8

Hi! Does anyone know how to add a delay to this code? (I know nothing about coding). I have the custom code added to my site and it works great, but loads in less than a second. I’d like to have a 3-4second delay if possible.

Thanks in advance!
Matt

9

What if you only want the pop-up showing the first time they visit the site and never again after the initial page view (using site cookies)?

10

hi, did u fix it? i have the same issue

11

Expanding on this request, how can you only show the pop-up to the same person once, not just once per session? Ideally it will require a cookie.