Add Encouragement to Datapage

[CaspioE]

HI,

I need to do one of the following; whichever one is easier to implement: 

Either 1. Animation of "fireworks" every time a user checks "resolved" on my datapage 

OR 

2. When a user has a page open for 15 minutes, I want them to get a pop-up of "You're doing great!" or something like that.

I was wondering if anyone can help me with this.

Thank you!

[CoopperBackpack]

Hello @CaspioE,

The second option is easier. 

As far as I understood, you would like to show a pop-up when the page is just open for 15 minutes (so it is not 15 minutes of user inactivity).

I don`t know the DataPage type you use (Submission form, Details, etc.).

Basically, the code should be added to the Footer section (the HTML editor should be disabled on the Advanced tab before pasting the code).

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DataPageReady', popupHandler);

function popupHandler(){
  setTimeout(() => {
     Swal.fire( '', `You're doing great!`, '' );
  }, 300000);

document.removeEventListener('DataPageReady', popupHandler);
}
</script>

In this code, 300000 is the number of milliseconds = 15 minutes.

To test this solution you can decrease the number of milliseconds (for example, 5000 = 5 seconds).

The pop-up message can be customized, in particular, it is possible to use the animated background, etc.

If you have follow-up questions, please update this thread. 

[CaspioE]

THank you so much! This is amazing! Can you share with me the script for making it look like your example with the animation and colors? 

I really appreciate your help!

[CoopperBackpack]

Hello @CaspioE,

There are different options that you can apply.

1) Add an image, in particular, the GIF image as a pop-up background.

For that, you need to have an image URL.

For example:
 

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DataPageReady', popupHandler);

function popupHandler(){
setTimeout(() => {
Swal.fire({
  title:  `You're doing great!`,
  width: 350,
  height: 200,
  color: "#ffffff",
  background: "url(https://c.tenor.com/NXvU9jbBUGMAAAAC/tenor.gif)",
  confirmButtonColor: '#ff9b3c',
});
}, 300000);

document.removeEventListener('DataPageReady', popupHandler);
}
</script>

2) Add an image above the text.
For example:
 

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.addEventListener('DataPageReady', popupHandler);

function popupHandler(){
setTimeout(() => {
Swal.fire({
  title: `You're doing great!`,
  color: '#ff9b3c',
  imageUrl: "https://c.tenor.com/NXvU9jbBUGMAAAAC/tenor.gif",
  imageWidth: 350,
  imageHeight: 200,
  imageAlt: "Custom image",
  confirmButtonColor: '#ff9b3c',
});
}, 300000);

document.removeEventListener('DataPageReady', popupHandler);
}

[CaspioE]

I really appreciate your time! Thanks for the clear explanations! I was able to customize it how I wanted it. I really appreciate it! Thank you again!

[jyll2113]

Would this work for a submission data page??

[Kronos]

Hi @jyll2113,

I believe this can work on a Submission DataPage. But if you want it to be displayed when a user clicks on submit, you can try to use Caspio's built event listener and place the code provided by CoopperBackpack

Here is the link where you can copy Caspio's event listener:

https://howto.caspio.com/datapages/ajax-loading/#:~:text=Example 3%3A A JavaScript code for an event when a user is attempting to submit a form%3A

Hope this helps!