JSFiddle - React, Tailwind, and code Playground

HTML

<!-- This script will subscribe to all events -->
<script> 
window.addEventListener("maw-event", function (e) { 
dataLayer.push({ event: e.detail }); 
}); 
</script>



  <!-- This script will allow configure to which events subscribe to-->
<script> 
var supportedEvents = { 
"maw-widget-loaded": true, 
"maw-location-selected": true, 
"maw-appointment-time-selected": true, 
"maw-service-information-fulfilled": true, 
"maw-contact-information-provided": true, 
"maw-appointment-scheduled": true, 
"maw-appointment-error": true, 
}; 
window.addEventListener("maw-event", function (e) { 
if (supportedEvents[e.detail]) dataLayer.push({ event: e.detail }); 
}); 
</script>




<!-- This is a list of currently available events -->

<h1>Supported Events </h1>
"maw-widget-loaded" – Does the widget load for the user (true or false) <br>
"maw-location-selected" – Does the user select a location (true or false) <br>
"maw-appointment-time-selected" – Is an appointment time selected (true or false) <br>
"maw-service-information-fulfilled" – Does the user select a service (true or false) <br>
"maw-contact-information-provided" – Does the user provide contact information (true or false) <br>
"maw-appointment-scheduled" – Is the appointment scheduled (true or false) <br>
"maw-appointment-error" – Was there an error while trying to book the appointment (true or false) <br>