ASAP: Need Button or Component displayed after 40s?

[Indylou]

I'm embedding an intro video into the screen before progressing onto the onboarding form on another screen.

I want the button to be hidden for the duration of the video (roughly 40 seconds) and then it can appear to prompt the user to go complete the form.

I tried Javascript code but it just isnt recognizing what the button is and how it can hide it. I also tried to see if I could put it in a modal but couldnt work out how to make the modal appear after 40s either.

Would love some help ASAP. We can't have people click before the video ends - so having button visible throughout isnt an option.

Thx!

[mikesealey]

Hey @performvu

I've got something for you - it's not perfect, and it's not precisely what you're looking for, but I believe it gets you most of the way to a solution, and certainly gives you the opportunity to expand on it for your specific needs.

Firstly, add an On screen load action to Update State - set a value time_at_load to be a JavaScript function return Date.now()

Now add in the button you want to disable for 40 seconds (in my example I've used 4 seconds for testing purposes)
In the On Click actions:

1. Add an Update State action - set a value time_at_click to be a JavaScript Function return Date.now()
2. Add another Update State action - set a value 4s_passed to be a JavaScript Function return (Number($("State.time_at_click")) > (Number($("State.time_at_load")) + 4000))
   This is checking if the time when you clicked it is 4000 miliseconds greater than the time when the page loaded, and returning a boolean (true or false) value accordingly
   
3. Add a Show Notification action with a warning message. Switch to JavaScript for the message, and add

if ($("State.4s_passed")) {
  return
} else {
  return "Button will be enabled after 4 seconds have passed"
}

In short: If 4 seconds have passed, returning nothing will not display a notification, but if 4 seconds have not passed, a warning will display "Button will be enabled after 4 seconds".

4. Add a Continue if / Stop if action, checking the value {{ State.4s_passed }} equals true (if 4 seconds have passed, continue to the next action in the list.
   

5. Lastly, add a Navigate To action, directing the user to the next page where their form is.

I've added an app-export below so you can take a closer look, and get to grips with this arrangement.
14479-export-1725010414207.tar.gz

A quick screencap of the end result: https://jam.dev/c/de2efcc9-abb6-4262-986e-bfc2391d6e3e

Please feel free to customise it in any way you like.

We also have a community discord server here where you can ask for help from other users, and even showcase your work when you're happy with it.

Hope this helps.

[Indylou]

Thanks for that - I appreciate the efforts here.

Not quite going to cut it from a UX perspective -- an alternative instead of a button would be to just apply a timed screen change with no user interaction.

Any ideas on how to do that?