This question may be best answered by Pealco, but I thought I’d post here for others to see if they have discovered a solution.
I’ve been using Pealco’s timed Modal popup using a cookie on one of my sites and it’s been working great up to this point. The code I’ve been using is shown at Pealco’s snippets site (https://blocs.webtekpc.pt/) with the snippet id:<modal_aut_cookies_24h_delay_5s> - “Open Modal Automatically with 5 seconds delay after page loads only once (Cookies), but after 24 hours it reloads again.”
The pop up modal works fine for the bootstrap 4 versions of my Blocs project, but doesn’t seems to work for bootstrap 5 versions of my Blocs project. I know it’s early days for bootstrap 5, but does anyone have any suggestions on how to make this work for bootstrap 5 Blocs projects?
Hi @Pealco I am really glad to see this thread and have been looking for a solution. I am working on a site for a client, when someone goes to the website a prompt (Modal pop-up dialogue box) needs to pop up immediately with 2 buttons: ‘Customer’ or ‘Consultant’.
If the visitor selects ‘Customer’ button, it goes to the customer section of the website. If one is a consultant and clicks on the ‘Consultant’ button it goes to the technical section of the site. A customer does not have access to the technical section but the consultant has access to the whole site. However, if the customer pretends to be a Consultant and clicks on the ‘Consultant’ button, then that person will have access to the technical section but then he or she is personally responsible for it.
The prompt (modal pop-up) should not be defeated if someone copies and pastes the URL of the technical section and pastes it in the browser.
Alternatively, I could have ‘Consultant’ in the the navigation bar, it could be linked to a page inside Blocs that behaves like a modal pop-up but then the problem is that someone could copy the URL and defeat the modal-like page. Any way to hide the URL to the technical section of the website?
Help from you or other members will be appreciated.
Hi @Flashman, those are rather nice. Would be nice to be able to add design elements to prompts / modal pop-ups. Maybe @Pealco will release such a bric in the future.
Could this be a feature added to Blocs do you think @Norm ?
Like a 1 time Modal auto trigger on a page? - be great for all kinds of things, promotions…reminders…sign up forms etc
Consultants are sent to a technical section of the website which is not meant for customers. So if someone enters the URL of the technical page(s), it should present the pop-up.
Your help will be appreciated.
I’m not sure if this can be done with the Modal bric or if it is compatible with Blocs 4.1.1
I would definitely prefer to solve this problem directly in Blocs by having a separate page that has 2 buttons to direct visitors to the right section of the website but how do I stop it from being defeated by a URL path?
Not sure what your full use case is. But you could modify this to open a modal on page load (rather than scroll). You could have it store their response so they don’t get challenged again during their session.
Just looking at what you are after - if its a pop up thats needed as soon as they open the home page and then it lets them select which website they want - why not just have a home page with 2 buttons and glam it up
@PeteSharp - Thank you for always being willing to help. How do I modify the code to open on page load rather than scroll? I will need two buttons on the modal pop-up almost like YES and NO. So if YES is selected than the visitor (who is probably a consultant) is taken to the technical information pages. If NO is selected then the Visitor is directed to the home page. I love the idea of storing the response until the next session, that is what I need.
My only concern is that someone should not be able to copy the URL of the technical information pages and paste it in a browser to jump the modal pop-up and go there directly. If someone copies and pastes the link; it should take him or her to the modal pop-up again.
Just looking at what you are after - if its a pop up thats needed as soon as they open the home page and then it lets them select which website they want - why not just have a home page with 2 buttons and glam it up
@AdieJAM - Yes, I would love to do that but how do I prevent someone from going to the technical pages by pasting in a URL link?
Hello @Pealco, thank you for kind help. Yes, that will work for me but I need 2 buttons and how do I prevent the visitor accessing the technical pages using a copied URL link? - See my response to @PeteSharp.
If you store their answer as session data (it’s not a cookie) then it could work like this.
User selects “customer” and they try to go to a technical section of the site they are blocked by a pop up with a link redirecting them back to the right part of the site.
User selects “technical” they are not challenged again while visiting the technical part of the site.
So depending on their answer they are triggering either a modal that stops and redirects them if they are in the wrong place, or let’s them carry on un challenged.
Ideally you should have your consulting maybe signing in and then having access to parts of the site, but you would need a CMS for that. This could be your next option for something simple.
The code is placed on every page. So it’s triggered even if the person goes to a URL.
Thanks @PeteSharp, that is exactly what I want and prefer the non-cookie session approach.
The code is placed on every page. So it’s triggered even if the person goes to a URL.
That is an excellent idea!
Could you kindly give me the code with 2 buttons. Would be nice if I can spice up the pop-up box in a simple and elegant manner but would not mind a simple prompt.
Regarding my previous question on problems creating a timed Modal with cookie on Bootstrap 5 Blocs projects, I think I may have found a solution. I looked at the Bootstrap 5 Modal documentation for activating and manually opening a modal. I then took the examples that were given and updated Pealco’s code right after the setTimeout line of code. This change seems to work for me for creating the timed modal with cookie on my one Bootstrap 5 Blocs project.
If you’d like to try on your project, I’ve attached a zip file of Pealco’s code as both Bootstrap 4 and 5 versions so you can see the differences. Also, I’m hoping Pealco could review this update to see what he thinks.
Hope this helps others. Please let me know if any corrections need to be made.
Just came across your post looking for a modal which display at page load. Thank you so much. And although for the great ressources you provide the Community.
I used your script to open the modal for opt_in on opening the page. But, how can it be kept open until someone click a button. Modal should not close by esc or clicking outside the modal. Only by clicking the submit buttion, which will send the data by email, and show the landingpage. Or they click the no button, which will move the visitor to the home page.
Hope you are available on this…
Just thought I’d mention that Cadence is a solution that uses local storage instead of cookies and has a ton of options that might interest anyone looking for a robust modal automation solution.
