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
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
Either or. Unlogged welcome is also good.
For a welcome modal for non logged in users (visitors).
-
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”.
-
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
Thanks. Would that change if I wanted to show this for every user, regardless if logged or not?
Actually no, as I forgot to add the non logged in users/logged in users conditions 
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>
2 Likes
Thank you for this great solution! Followed to the tee, however I get two modals stacked on top of each other to exit out of. Any ideas? For my use case there is no logged in user, its a public site. I would like if this disclaimer popped up whenever someone logs in at any time.
Hi,
The last code I wrote works without any problem for this.
Code to be inserted at page level or at app level.
Unless you want it to popup all the time, each time they go to a page (I mean: Each time)
If so, you would need to remove if (!window.logged_in_user && !localStorage.getItem('modalOpened')) {
Thank you very much!
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>
``` This script here makes three overlapping models for some reason? I have to click out of three boxesCode to be inserted at each page level then, not at app level (except the page you want to display within the modal, where there shouldn’t be any script).
Window.onload means on page load => it will also load inside a modal (which is a page) if placed at app level.
Hi there. here is my code:
<script>
function openModal() {
window.openSwModal( 'websitename/modal', 'md');
}
window.onload = function() {
setTimeohout(openModal, 1000);
};
</script>
For some reason, this was working just great yesterday. However now you when you open then site it stacks a bunch of modals to exit out of. Any ideas??
<script>
function openModal() {
window.openSwModal('https://websitename.com/modal', 'md');
}
window.onload = function() {
setTimeout(openModal, 1000);
};
</script>
This works without any problem.
This needs to be inserted in every page where you want the modal to be opened on page load. To be inserted in the header.
Not at app level.
And, again, https://websitename.com/modal is the only page where there shouldn’t be this script.
Be careful not to add any page reload script at app level - double check.
Also the /modal page should not have any redirection button inside the modal itself (otherwise it would lead to a page where the script is enabled).
If you can’t make it happen, let me know, you can add me as a collaborator in your app and I will debug it in 5 minutes.
1 Like