New Functionality: Global Form Events

[Derek_Gervais]

What's Happening?

Historically, callbacks embedded in the HubSpot form embed code were the only way to trigger custom code on certain HubSpot form events (e.g. on form submission). Now, developers will be able to listen for global form events as well, allowing custom code with greater flexibility and extensibility.

What's Changing?

Nothing; this is entirely new functionality! Developers can continue to use the existing form callback functionality as before.

When is this happening?

Global form events are now live; developers can begin using them immediately! Check out the documentation here: https://developers.hubspot.com/global-form-events

Questions? Join the discussion below!

[Derek_Gervais]

Hi @design_man,

There aren't currently any global events related to the live chat functionality. I can totally see the use case for that, though; If you have the inclination, I would encourage you to check out the Ideas Forum on the HubSpot Community. That's where we're aggregating all product feedback/ideas, and it's the best place to make your idea visible to HubSpotters and other devs/customers. I'd also recommend linking to the idea from here so that other Dev Forum members can easily find it!

[design_man]

Are there any events available for Hubspot Conversations / Live Chat so could also push them via GTM dataLayer?

Something like:

  window.addEventListener('message', event => {
    if(event.data.type === 'hsMessages' && event.data.eventName === 'ChatStarted') {
      window.dataLayer.push({
      'event' : 'LiveChat',

Thanks

[Derek_Gervais]

Hi @guidanecete,

You'd be able to put the listener code pretty much anywhere, since the form events are global. The listener would look something like this:

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
       //Do Something
   }
});

[guidanecete]

Hi! i´ll like to use this to push and event with GTM so the event fires every time a form is submitted, is this possible?

i saw that the code would be like:

 // Global event
    {
        type: 'hsFormCallback',
        eventName: 'onFormSubmitted',
        id: 'Id of form submitted',
        data: {}
    }

but where do i add the dataLayer script? in the embed form code it would be something like this:

<script>
  hbspt.forms.create({ 
    css: '',
    portalId: 'XXXXXX',
    formId: '012aaa7e-03df-4c38-83fb-63474af1c182',
    onFormSubmit: function($form) {
		window.dataLayer = window.dataLayer || [];
		
		window.dataLayer.push({
                        'event' : 'conversion',			
		});
	}
  });
</script>

How could i do it in the global code?