Hello all!
I hope everyone’s projects are going well.
I have run into a couple problems when trying to integrate some code into my project and after a couple days of struggling I have decided to ask for some help to see if anyone has any advice.
Basically, when a user puts effort into an input box, I do not want them to refresh or leave the page without saving it because their information will be lost, so I started working on a “exit intent” popup. I originally went for a plugin, but the plugin made it so that anytime your mouse hovered anywhere that wasn’t the direct window (i.e. as soon as your mouse went into the top of your browser), the popup showed up, which I hated.
So I went ahead to add some JS since I am in computer science and have learned how to create window alerts so I figured it would be simple enough to do the same thing but connect it to the ID of the popup I created and then just prevent the window alert from occurring.
Here is what myself and Chat GPT came up with BEFORE we tried integrating my popup (so this was just for the window alert to make sure my logic worked), and I put it into an HTML element within the relevant content on my app:
In workflows, I would update hasUnsavedChanges to True when certain events happened and once it was saved I changed it back to False. When it was True, and the user tried to leave in any way (previous page button, refresh, exit) the window alert would pop up.
THIS WORKED.
Figuring that it was an easy change, I just worked in my popup instead of the window alert (ID: exitIntentPopup) (Button ID: understandButton). The buttons purpose is to simply explain that they will lose their work if they leave, click the button that says “I understand”, hide the popup, and then the next time they would go to leave the page, it would allow them to. I used the code as follows:
I have tried numerous variations to this code, with and without a button at all, and nothing is working. Sometimes the window alert still shows, sometimes it doesn’t, but I have still never even once successfully had my own popup show up from trying to leave the page.
I am not very advanced in JS yet as I am only a first year student, but I am confused as to why this is not working. I have exhausted numerous AIs for help, so I came to you all.
Is there a plugin I can use to do this, or is there something wrong with my code?
I would appreciate some guidance as Bubble has been quite the learning curve and coding almost seems easier to me in some ways! I have had nothing but difficulties working in code to my app.
Thanks everyone,
Be well