Create popup if user tries to close app?

Need help Responsiveness
1

Is there anyway to create a popup if I user tries to close an app (or leave the website) or if they try to go to a specific page?

I’m asking because my users are logging call data. If they try to close the tab or start another call, I want to prompt them to say why the existing call ended.

Thanks!

2

I think this has been explored in these threads:

3

Thanks. These looks like they are based on mouse movement.

I’d only like to do it based on two criteria.

  1. User tried to close the tab or go to another URL
  2. Use tries to navigate to a specific URL within the app.

Any ideas for these?

4

You can create a condition on the action that triggers a new call if they’re still in an existing one. When an existing call is found and they click on something that normally starts a new call > don’t start a new call, but instead “show popup”.

You’d have to make sure that the Start New Call is only triggered when an existing call doesn’t exist.

If this action that starts a new call is a navigate action, just don’t use the link element. Use an actual workflow action so that you can add a condition to it. You can do it for both internal and external pages.

There’s little you can do once a user closes their browser/tab/clicks back. There might be some hacks around the forum for how to pick up on browser actions, but I don’t know enough about that.

5

Ok, thanks :slight_smile: I’ll look into this.

1 Like
6

This would also be a good candidate for building an element plugin in javascript. If anyone is interested in learning to build bubble plugins, I think this one would be pretty easy to start with. I’m imagining an invisible element with two dynamic properties, “block the user from leaving?”, and “message”.

Instructions on how to do it in javascript are here: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

And instructions on how to build plugins in Bubble are here: https://manual.bubble.is/building-plugins/building-elements.html

The one potential gotcha with this is that Bubble already sets window.onbeforeunload (so that we can pop something up if a user is running a workflow when they try to leave), so I’d make sure to wait til Bubble sets it, and then do something like this:

var old_beforeunload = window.onbeforeunload;
window.onbeforeunload = function() {
      //If we want to block them, return something
      //....
     
     //Otherwise, run the Bubble code:
     return old_beforeunload();
}
2 Likes
7

This could be a very relevant plugin which would prevent users accidentally leaving a page when filling long forms.

8

Hi @hi113, I have now published a plugin for this:

1 Like