Open Modal on page load

Ask the community
1

Hi, I’d like to open a modal on my home page, like a welcome message, or a news update, just like the Softr homepage does when they have feature releases.
I hope I did not miss it somewhere. Is there a way to have this happen?

best

A

2

Hi,

Just a welcome message for non logged in users? Or news update for logged in users? (The second use case is way harder to perform).

You will need to use custom code anyway.

1 Like
3

Either or. Unlogged welcome is also good.

4

For a welcome modal for non logged in users (visitors).

  1. create a page where you will add whatever you want. Let’s say you call this page “welcome modal” and the slug is “/welcome-modal”.

  2. Go to your homepage, insert this code below in the header custom code of the page:

<script>
    function openModal() {
        window.openSwModal('https://yourdomain/welcome-modal', 'md');
        localStorage.setItem('modalOpened', 'true');
    }

    window.onload = function() {
        if (!localStorage.getItem('modalOpened')) {
            setTimeout(openModal, 1000);
        }
    };
</script>

Change https://yourdomain by your own domain or by the Softr domain. Change ‘md’ (medium size) by ‘sm’ if you want a small modal or ‘lg’ if you want a large modal.

The code relies on localStorage. As long as the visitor doesn’t clean their browser cache, once they see the welcome message once, they won’t see it anymore.

If you want the visitors to always see the welcome modal:

<script>
    function openModal() {
        window.openSwModal('https://yourdomain/welcome-modal', 'lg');
    }

    window.onload = function() {
        setTimeout(openModal, 1000);
    };
</script>

If you want to rely on a cookie that lasts 4 days (meaning that the visitors, once they see the welcome modal at first, won’t see it anymore before 4 days, if they don’t clear their browser cache + cookies before) use this code:

<script>
    function openModal() {
        window.openSwModal('https://yourdomain/welcome-modal', 'md');
        document.cookie = 'modalOpened=true; expires=' + new Date(Date.now() + 4 * 24 * 60 * 60 * 1000).toUTCString() + '; path=/';
    }

    window.onload = function() {
        if (document.cookie.split(';').some((item) => item.trim().startsWith('modalOpened='))) {
            console.log("Modal already opened in the last 4 days.");
        } else {
            setTimeout(openModal, 1000);
        }
    };
</script>

For other use cases, like showing all new features to non loggedin users or to loggedin users only, I may release a guide within one or two weeks.

3 Likes
5

Thanks. Would that change if I wanted to show this for every user, regardless if logged or not?

6

Actually no, as I forgot to add the non logged in users/logged in users conditions :sweat_smile:

For example if you want the first script to work only for non logged in users it would need to be updated this way:

<script>
    function openModal() {
        window.openSwModal('https://yourdomain/welcome-modal', 'md');
        localStorage.setItem('modalOpened', 'true');
    }

    window.onload = function() {
        if (!window.logged_in_user && !localStorage.getItem('modalOpened')) {
            setTimeout(openModal, 1000);
        }
    };
</script>
1 Like