I want to add a timer to my OTP design and after time out, the timer will be changed to link "resend code".
I have tried to follow this tutorial https://www.uxpin.com/docs/how-to/timer/, but still don't understand how to implement it in my case.
How to create timer prototype in OTP?
How to create timer prototype in OTP?
Where am I?
In UXPin you can ask and answer questions and share your experience with others!
Hi Jordan,
I've got you! I'll describe below an example of 2 minutes timer.
First, we'll need to create a variable Timer and set the default value as 1. Then we'll add a couple of interaction to the canvas:
1) Trigger: Page Load > Action > Set variable > Variable: Timer > Set Variable as: Value: 120 > Save
2) Trigger: Variable Change > Variable: Timer > Conditions: Value of variable Timer is less or equal than 120 > Action > Set content (counter element) > Set content as: Value of variable Timer > Save
3) Trigger: Variable Change > Variable: Timer > Value of variable Timer is less or equal than 120 > Set Content > Element: (counter element) > Set content as: Expression
dateAdd(date(), "seconds", $Timer, "mm:ss")> Save4) Trigger: Variable Change > Variable: Timer > Value of variable Timer is less or equal than 120 > Set Variable > Variable: Timer > Set Variable as Expression:
$Timer - 1> Animation settings: Delay 1000 ms, Loop: noThen we'll have to create the resend code button that will show after the countdown hits 0 and set the interaction (again, to the canvas):
Trigger: Variable Change > Variable: Timer > Value of variable Timer is equal 0 > Action: Show > Element: Alert (the button) > Save
The result will look like THIS.
Hope this helps! Let me know if you need a recording of this setting.
Awesome! thank you