# Timer interactions

**URL:** <https://community.fliplet.com/t/timer-interactions/656>\
**Category:** Get Help\
**Created:** [July 2, 2024, 1:17pm UTC](https://community.fliplet.com/t/timer-interactions/656 "2024-07-02T13:17:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![DBSwebDesigns](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/dbswebdesigns/32/125_2.png) [@DBSwebDesigns](https://community.fliplet.com/u/DBSwebDesigns)\
**Post date:** [July 2, 2024, 1:17pm UTC](https://community.fliplet.com/t/timer-interactions/656/1 "2024-07-02T13:17:54Z")

</div>

We are utilizing the Timer in our app, however documentation is limited. Can you help guide us with some of the options we have available?

1. Can we change the Toast when a timer ends to read something different than the default message?
2. Can we utilize `form.load(Function)` to change the time of the timer via JS vs the Builder
3. We want to trigger the timer to start and stop based on other interactions is this possible?

---

<div class="post-metadata">

**Author:** ![YuliiaKovalenko](https://avatars.discourse-cdn.com/v4/letter/y/d2c977/32.png) [@YuliiaKovalenko](https://community.fliplet.com/u/YuliiaKovalenko)\
**Post date:** [July 3, 2024, 12:59pm UTC](https://community.fliplet.com/t/timer-interactions/656/2 "2024-07-03T12:59:48Z")

</div>

#### Changing the Toast Message When a Timer Ends

Unfortunately, you can’t update an existing toast message, but you can show a new one. For example, the below code will show the user “message 1” and show “message 2” after 2 seconds.

```auto
Fliplet.UI.Toast('message 1');

setTimeout(function(){
  Fliplet.UI.Toast('message 2');
}, 2000);

```

Showing a new toast message hides all other messages currently visible. But if you just want to hide the toast message, you can use:

```auto
Fliplet.UI.Toast.dismiss()

```

You can find more examples in this documentation on our site: [Fliplet.UI.Toast() | Fliplet Developers Documentation](https://developers.fliplet.com/API/fliplet-ui-toast.html)

#### Using form.load(Function) to Change the Timer

It’s not entirely clear from your question whether you are using standard JS functions such as `setTimeout()` and `setInterval()` or whether you are using an external library. So without more specific details about your application, it’s challenging to provide a definitive answer.  
However, as `form.load()` returns a promise, by adding the `.then()` function after `form.load()`, you can attach a callback function to be executed after the `form.load()` operation is completed as it’s shown in the example below:

```auto
Fliplet.FormBuilder.get().then(function (form) {
    form.load(function () {
      return connection.findById(entryId);
    }).then(function(){
       //change your timer here
    });
  });

```

#### Starting and Stopping the Timer Based on Other Interactions

Yes, it is certainly possible to start and stop the timer based on other interactions. You would need to implement some code that listens for these interactions (such as button clicks or form submissions), and then starts or stops the timer based on these interactions. The specifics of how you would implement this would depend on how your timer is set up and what these interactions are. For more specific advice, please provide more details.

---

<div class="post-metadata">

**Author:** ![DBSwebDesigns](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/dbswebdesigns/32/125_2.png) [@DBSwebDesigns](https://community.fliplet.com/u/DBSwebDesigns)\
**Post date:** [July 3, 2024, 2:26pm UTC](https://community.fliplet.com/t/timer-interactions/656/3 "2024-07-03T14:26:40Z")

</div>

**Regarding: Starting and Stopping the Timer Based on Other Interactions**  
We were able to manipulate the start & stop to a degree with the following, however, the reset button is also identified as btn-primary so when clicking the button identified below we are just cycling through the start, stop, reset over and over again. the reset in this sequence is a problem.

We would also be taking the button away and using a different trigger.

HTML:

```auto
<fl-form cid="9397817"></fl-form>
<button id="start_timer">Click Here</button>

```

Javascript:

```auto
$( "#start_timer" ).on( "click", function() {
  $('.fl-timer .btn-primary').click();
});

```

---

<div class="post-metadata">

**Author:** ![DBSwebDesigns](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/dbswebdesigns/32/125_2.png) [@DBSwebDesigns](https://community.fliplet.com/u/DBSwebDesigns)\
**Post date:** [July 3, 2024, 2:34pm UTC](https://community.fliplet.com/t/timer-interactions/656/4 "2024-07-03T14:34:49Z")

</div>

**#### Changing the Toast Message When a Timer Ends**

In short testing the following JS does not run after the countdown timer ends it run’s 2 sec after the page loads.

```auto
setTimeout(function(){
  Fliplet.UI.Toast('message 2');
}, 2000);

```

---

<div class="post-metadata">

**Author:** ![YuliiaKovalenko](https://avatars.discourse-cdn.com/v4/letter/y/d2c977/32.png) [@YuliiaKovalenko](https://community.fliplet.com/u/YuliiaKovalenko)\
**Post date:** [July 4, 2024, 8:44am UTC](https://community.fliplet.com/t/timer-interactions/656/5 "2024-07-04T08:44:29Z")

</div>

1. At the moment it’s not possible to change the default toast message when a timer ends
2. Changing the time of a timer is also not supported at the moment but will be improved in the future. It’s also not possible to catch the moment when the coundown timer ends.
3. Here is an example how you can trigger the timer to start and stop:

```auto
//event listener to start the timer
$(document).on('click', '#start_timer', function(e) {
  e.preventDefault();
  $('.fl-timer .btn-primary:contains("Start")').trigger('click');
});

//event listener to stop the timer
$(document).on('click', '#stop_timer', function(e) {
  e.preventDefault();
  $('.fl-timer .btn-primary:contains("Stop")').trigger('click');
});

```

---

<div class="post-metadata">

**Author:** ![mollylucas8](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/mollylucas8/32/434_2.png) [@mollylucas8](https://community.fliplet.com/u/mollylucas8)\
**Post date:** [July 22, 2024, 10:52am UTC](https://community.fliplet.com/t/timer-interactions/656/6 "2024-07-22T10:52:10Z")

</div>

Hello 😇

As per my opinion, If you want to display a custom message when the timer ends instead of the default Toast, you’ll need to implement a callback function that triggers at the end of the timer.  
and also you can modify the timer’s duration using JavaScript. The form.load(Function) method can be used to execute code when the form loads, allowing you to set or adjust the timer’s duration dynamically through JavaScript.

I hope this will be helpful for you. 😍

Respected community member 😊

---

<div class="post-metadata">

**Author:** ![DBSwebDesigns](https://dub1.discourse-cdn.com/flex017/user_avatar/community.fliplet.com/dbswebdesigns/32/125_2.png) [@DBSwebDesigns](https://community.fliplet.com/u/DBSwebDesigns)\
**Post date:** [July 22, 2024, 12:35pm UTC](https://community.fliplet.com/t/timer-interactions/656/7 "2024-07-22T12:35:41Z")

</div>

Molly-  
Thank you for your reply.  
Unfortunately, we have not identified an event or listener with the timer toast that we can utilize for this process. In the same token we have not found the right identifiers to utilize form.load(Function) method when the page loads to change the timer.  
Respectfully DBSwebDesigns