Simple site notification system

Custom Coding
,
1

I need a notification system on my site.

For example, when the user posts information using the Softr form, I need the page to reload to display a table with the history of requests.

To achieve this, I’ve configured the ON FORM SUBMIT action on the same page, but with a parameter containing a validation message, like : mysite.com/form?message=Thanks

If you need a similar system, here’s how I did it:

  1. I’ve added a Custom Code block with the following code to all the pages where I want to display a message:
    <div id="P-notification" class="alert alert-warning" role="alert"></div>
    See colors options here

  2. In the Custom Code (Code Inside Footer) applied to all pages of the site, I added the following code:

<script>
  setTimeout(function() {
    const urlParams = new URLSearchParams(window.location.search);
    const message = urlParams.get('message');
    const notificationElement = document.getElementById('P-notification');

    if (message && notificationElement) {
      notificationElement.textContent = decodeURIComponent(message);
      notificationElement.style.display = 'block';
      setTimeout(function() { notificationElement.style.display = 'none'; }, 5000); // Time to show
    }
  }, 800);
</script>

<style>
/* Notification system */
  #P-notification {
    display: none; 
    position: fixed; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%);
    box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    z-index: 1000;
  }
</style>
  1. Finally, for each page on which I want to display a message, I add at the end of the URL ?message=xxx

And voilà :
mysite.com/samepage?message=Merci.+La+requête+a+été+envoyée+à+votre+régie

Screenshot 2024-02-28 at 17.15.17
Screenshot 2024-02-28 at 17.15.172111×1477 239 KB

Remarks :

  • Don’t forget to add the new Custom Code Bloc on every page that needs notification
  • I’ve called the notification P-notification to avoid interference with the code, but you can change it (everywere = 3 times).
  • The script checks if the block is present on the page, otherwise it doesn’t execute.
  • The script waits 800 milliseconds to make sure the elements are loaded.
2 Likes