I’m trying to build a popup to capture newsletter signups when someone visits my site. I’ve created a div that holds the popup in the bottom right of my screen and it opens whenever someone comes to the site.
There’s two things I can’t figure out how to do:
Close popup on embed submission (EDIT: I added a script to do this into the footer of my site)
Have this extend across a whole session, so if I exit out of the popup on the main page and then click into another page the popup doesn’t redisplay unless I revisit the site later. Right now, every page is independent so it will always popup on each page regardless of if I submitted an email or closed the popup modal.
I ran a couple of quick tests for you, you’ll see 3 junk submissions.
I don’t think your current setup will be suitable for what you’re trying to achieve. Cross-origin IFRAMEs are protected ground, so you can’t modify the content or attach event listeners inside of the IFRAME, and Beehiv doesn’t appear to be posting any window messages to notify the parent of what’s happening.
I’d check with Beehiv and their community regarding this, someone may have a solution, some cookie that’s created or something, that you can use to identify a successful submission.
Without that, you’re basically dead in the water. With that, you can detect successful submit, then close the form ( use JS to click an close interaction trigger button ). Then create a cookie that is used to prevent more form popups for some period of time. If you’re using interactions-based forms, the easiest way is often to have a script check for the cookie, and if it exists, delete the entire popup so it cannot appear.
An alternate approach is to build your own form, and your own Beehiv integration to pass the enrollment through via API. More work, but gives you the control you need.