Handling Events from HeavySet Tech Forms

HeavySet Tech provides a convenient way to capture lead and appointment submissions through embedded forms. Parent websites can handle events from these forms to process or store the submitted data. This guide will walk you through the process of setting up event listeners to receive and handle data from lead and appointment submissions

Receiving Data from the Form

To receive data from the HeavySet Tech form, you need to set up an event listener on your parent website. This listener will listen for messages from the form and handle them appropriately. Below is an example code snippet to get you started..

Example Code

<script>
/**
* @typedef {Object} LeadData
* @property {string} email - The email of the lead.
* @property {string} phoneNumber - The phone number of the lead.
* @property {string} firstName - The first name of the lead.
* @property {string} lastName - The last name of the lead.
* @property {string} street - The street address of the lead.
* @property {string} postalCode - The postal code of the lead.
* @property {string} country - The country of the lead.
* @property {string} oneTimeToken - A unique token for the session.
* @property {Date} [start] - The start date and time of the session (only if event.data.type === 'appointmentSubmission').
* @property {Date} [end] - The end date and time of the session (only if event.data.type === 'appointmentSubmission').
* @property {string} [startAMPM] - The start time in AM/PM format (e.g., "9:00 PM") (only if event.data.type === 'appointmentSubmission').
* @property {string} [endAMPM] - The end time in AM/PM format (e.g., "1:00 AM") (only if event.data.type === 'appointmentSubmission').
*/

window.addEventListener('message', function (event) {
   // Ensure the event is from a trusted origin
   if (event.origin.indexOf('heavyset.tech') === -1) return;

   if (event.data.type === 'leadSubmission') {
     /** @type {LeadData} */
     var leadData = event.data.data;
     // Handle lead data
     console.log('Lead data received:', leadData);
     // You can add your processing logic here
   }

   if (event.data.type === 'appointmentSubmission') {
     /** @type {LeadData} */
     var leadData = event.data.data;
     // Handle appointment data
     console.log('Appointment data received:', leadData);
     // You can add your processing logic here
   }
 }, false);
</script>

Explanation

1. Event Listener Setup: The code sets up an event listener on the window object to listen for messages.
2. Origin Check: To ensure the security of your application, the listener checks that the event's origin contains the string heavyset.tech .
3. Handling Lead and Appointment Submissions: Depending on the event type (leadSubmission or appointmentSubmission ), the data is extracted and handled accordingly.

Usage

Include the above script on your parent website's page where you want to handle form submissions from HeavySet Tech. Customize the logic inside the event listener to suit your specific requirements, such as sending the data to your backend server or displaying a confirmation message to the user.

Conclusion

By following this guide, you can easily integrate HeavySet Tech forms into your parent website and handle lead and appointment submissions.