Build it with Tim - How do I send real-time notifications in my app? (Ep. 12)

Hey everyone :wave:

This weeks Build it with Tim is how to use CSS classes with Display Rules to take your Form to the next level!

In this episode, we’ll take a look at:





Got a suggestion or wondering how to build something? Make sure to let me know here :point_down:

Custom Header/Footer Code

<script src="https://cdn.ably.com/lib/ably.min-1.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
<script>
  const ably = new Ably.Realtime('your_ably_credentials_here');
</script>

Layout Code

const channel = ably.channels.get('your_main_channel_name');

channel.subscribe("your_sub_channel_name", (message) => {
    //console.log(message);
    //Swal.fire('Headsup!', message.data, 'success')

    Swal.fire({
        title: 'Headsup!',
        text: message.data,
        icon: 'info',
        confirmButtonColor: '#3085d6',
        showCancelButton: false,
        cancelButtonColor: '#d33',
        confirmButtonText: 'Click to reload'
    }).then((result) => {
        if (result.isConfirmed) {
            location.reload();
        }
    })

});
2 Likes