Can a popup be shown only the first time a visitor sees my page?

Publishing help General
1

Can anyone help me figure out how to make a popup form appear only the first time a visitor lands on my home page and not any time after that? The form I’m talking about is the Newsletter popup that appears after 3 seconds or scrolling down. Here’s the site: http://www.marketinginnovators.com/
and here’s the read-only: https://preview.webflow.com/preview/marketinginnovators?preview=e275e683be4a45e11f6eafd19d6478da

Thanks!
Jason

2

While this can be done with Javascript and hiding and unhiding a layer. Read here - [Tutorial] How to create a modal/pop-up in Webflow

Also - you can use an external solution like Hellobar - This is what I use in my projects - Also gives analytics about the form. https://www.hellobar.com/

1 Like
3

Thanks mayhemonger, I do appreciate the links. I read through them (and there was a lot to read!), but I can’t get this to work on my site. I have no experience with coding javascript but I can copy and paste into an embed all day :wink:

Would you, or anyone else, be willing to give me some simple instruction for how to achieve this on my site? I know it’s asking a big favor, but my skills are visual and that is why I’ve taken so quickly to a tool like Webflow. It allows me to create without coding.

If this is not possible for someone without coding basics, then maybe there’s a workaround idea that will achieve something similar? Any help is appreciated.

Thanks again!
Jason

4

Hi @MIJason

I might help.

Put this in the Before </body> tag on the page where you want the popup.

    $j(document).ready(function() {
        if(localStorage.getItem('popState') != 'shown'){
            $j("#popup").delay(2000).fadeIn();
            localStorage.setItem('popState','shown')
        }

        $j('#popup-close, #popup').click(function(e) // You are clicking the close button
        {
            $j('#popup').fadeOut(); // Now the pop up is hiden.
        });
    });

Then put this code in setting, custom code, Add code before </body> tag: area

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Then make a Div named popup and a close button named popup close

Hope that makes more sense.

Remember to test it in Incognito mode. You will only see it once in normal mode. :slight_smile:

5

Thanks krubens! I did what you said and it isn’t working. Here’s the link to show it in situ:
http://marketinginnovators.webflow.io/home_testing

I made a Home Testing page so we could test this. Here’s the read only link but you’ll have to choose the Home_Testing page to see the test:
https://preview.webflow.com/preview/marketinginnovators?preview=e275e683be4a45e11f6eafd19d6478da

Any ideas?

Thanks for all the help!
Jason

6

You have to set the popup to Display Setting: NONE after you have made it, othervise it will just show the whole time :slight_smile:
But if you have tried that and it still doesnt work, Try and put this:

$j(document).ready(function() {
    if(localStorage.getItem('popState') != 'shown'){
        $j("#popup").delay(2000).fadeIn();
        localStorage.setItem('popState','shown')
    }

    $j('#popup-close, #popup').click(function(e) // You are clicking the close button
    {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
});

HERE

1780×1542 61.1 KB

See if that works

7

Hi @MIJason - well, with some tweaks here and there - you can get it to work. But then again, I chose not to use it as it is not a complete solution for me.

For example, if a user comes to the site, and already signed up or was shown the splash - he/she should not be shown the splash again. That is where external solutions come in handy.

This would need cookie storage and validation against the cookie to see if the visitor had come before.

Solutions such as hellobar do the job well, the free version is good enough and since you’re not used to JS, all you need to add is a line in your custom code and it works well. Give it a shot - its free.

8

This topic was automatically closed after 60 days. New replies are no longer allowed.