Unbounce - Adding the VisiSmart Scripts

Log in to Unbounce, from the left side bar select Pages > All pages:

 

Click on the 3 dots icon for the desired page, then select Edit:

 

Inside the page editor, click on the Custom HTML option located at the bottom-left, and drag it to the top of the page:

 

A pop-up window will open, paste the VisiSmart code:

Hit Save Code:

 

At the top right of the editor, hit Save, then Republish:

Unbounce Pop-Ups

 

Unbounce pop-ups use a double iframe structure.

 

Because of this, Visiopt cannot automatically detect form submissions inside the pop-up unless additional code is added.

 

If you are collecting emails or leads inside a Unbounce pop-up, you must add the code below so Visiopt can properly detect and track the submission event.

 

This allows Visiopt to correctly match and record the webhook associated with the lead submission.

 

Important: Without this code, submissions from Unbounce pop-up forms may not be properly attributed or recorded in Visiopt.

 

This Is the snippet needed to be added: 

 

<script>window.addEventListener("message",function(event){if(!event.origin.includes("hubspot.com"))return;const data=event.data;console.log("HubSpot Event:",data);if(data&&data.meetingBookSucceeded===true){let email=null;try{email=data?.meetingsPayload?.bookingResponse?.postResponse?.contact?.email||data?.bookingResponse?.contact?.email||data?.contact?.email||null}catch(e){}console.log("Extracted email:",email);if(email){const payload={meetingBookSucceeded:true,meetingsPayload:{bookingResponse:{postResponse:{contact:{email:email}}}}};console.log("Sending payload to parent:",payload);window.parent.postMessage(payload,"*");window.top.postMessage(payload,"*")}}});</script>

 

Below are the steps showing where to add it:

 

STEP 1 - Open the Page Editor

Click on the three dots icon > Edit button of the desired page:

 

STEP 2 - Select the button with HubSpot integration

Next, click on the button where HubSpot is located

You will see an option called Edit Lightbox. Click on that option.

 

STEP 3 - Open the Lightbox Code Area

After clicking on Lightbox Edit a screen like the one below will appear.

Double-click in the code area to edit it.

 

STEP 4 - Paste the code we shared earlier into the editor.

After pasting the code, click on the “Save Code” button to apply the changes: