`hsFormCallback` for hubspot form embedded in Pop-up CTA

Developer Support CMS Development
1

Hello all. I have some datalayer pushes happening after a hubspot form submission on my site, and they are working just fine when the form is on the actual page, but I’m having issues when the form is in a Pop-Up CTA. Even though I’m using the same form in both places, when the form is in the Pop-Up CTA, it doesn’t seem to be sending the hsFormCallback message to the window object like it does it does when the form is embedded right on the page. Is there a work around for this?

<script>
 window.addEventListener("message", function(event) {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === "onFormSubmit") {
 console.log(event.data);
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'syllabus_request',
 'location': 'homepage',
 });
 }
 });
</script>
2

Hello @KyleCombs

12:41 PM
It’s possible that the issue is related to the fact that the Pop-Up CTA is loaded in an iframe, which can sometimes prevent messages from being sent between the iframe and the parent window. One workaround is to add the event listener to the iframe itself rather than the parent window.

Here’s an example code snippet that you can try:

var iframe = document.querySelector('.hs-form-iframe');
if(iframe) {
 iframe.addEventListener("message", function(event) {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === "onFormSubmit") {
 console.log(event.data);
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'syllabus_request',
 'location': 'homepage',
 });
 }
 });
}

This code assumes that the Pop-Up CTA is loaded in an iframe with the class “hs-form-iframe”. You can replace this with the actual class or ID of the iframe in your Pop-Up CTA.

Also note that you may need to adjust the code to handle different types of messages that are sent between the iframe and the parent window, if your Pop-Up CTA is using other types of messages.

3

Hi @himanshurauthan , thanks for your reply. It did get me to a working solution using a couple nested MutationObservers to isolate the iframe as Hubspot rendered it to the DOM. As of this week it seems the iframe for my Pop-up CTA is actually rendered to the DOM on page load, but now I’m getting cross-origin errors trying to add event listeners to the iframe. I understand the whole Pop-up CTA piece is stil lin Beta and may continue to change, but I’m curious why I was able to add an event listener to the iframe before, but now it is being blocked. Any thoughts?

<script>
 window.addEventListener('load', function () {
 console.log('window', window);
 var hsIframeDiv = document.querySelector("#hs-overlay-cta-102529447332");
 var hsIframe = hsIframeDiv.firstChild;
 console.log('hsIframe: ', hsIframe);

 hsIframe.contentWindow.addEventListener("message", function(event) {
 console.log('message event', event)
 });
 });
</script>

The error I’m getting is

Uncaught DOMException: Blocked a frame with origin "https://my-domain" from accessing a cross-origin frame.

4

Any luck here Kyle? I am in the same situation. Did you find a solution to bypass the CORS error? Do we have a seeting we can set to allowlist desired domains?

5

Unfortunately no, @RobertBardan. We just ended up scrapping the attempt and are hoping to retry once this feature is no longer in beta.

6

Hi @KyleCombs I had the same issue and I found your post. Fortunately, I was able to find the message for submitting CTA forms by logging the message object in the console.

<script>
 window.addEventListener("message", function(event) {
 if(event.data.type === 'hsCallsToActionCallback' && event.data.eventName === "onCallToActionFormSubmitted") {
 console.log(event.data);
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'syllabus_request',
 'location': 'homepage',
 });
 }
 });
</script>

the type is hsCallsToActionCallback and the eventName is onCallToActionFormSubmitted. Hubspot has docs on the events for their SDK but it’s not exactly how they appear in the messages of the iframe for the CTA. also this appears to be new so maybe it wasn’t there when you were attempting this back in January. Hopefully one day Hubspot will acknowlege the existence of advertising pixels and tracking software on marketing websites, but console.log(event.data) will have to do in the meantime.