CTAs not working

[ClaudiaOliveira]

Hello,

We are experiencing an issue with the HubSpot form using the CTA code. When we try it locally and in other environments, everything works fine, but when we attempt it on the . it only renders a static image of the form. I have noticed that the script for hs-web-interactive is being canceled. Please see the screenshot below for reference.

We also check with Clouflare and it seems that it's not blocked from their side.

We are using Nextjs application.

Can anyone help us?

Thank you.

[Anton]

Hi @ClaudiaOliveira, 

i could reproduce the error only partialy. 
It seems that something (I assume your cookie script) is blocking the functionality/correct rendering due to a different domain. 

The behavior I could reproduce:

- opening the link will render the form as an image

- waiting for quite some time(5-20s) will load the whole page

- After the whole page is loaded the form works fine

- If the form doesn't work, a reload and another 5-10s solves the issue

Like mentioned I assume it has to do something with your cookie script

hope that helps

best, 

Anton

[ClaudiaOliveira]

We disable the cookies and the cookies issue it's not there anymore but the CTA it's still not working rendering always a static image.

[Anton]

Seems that you've secured the page with an SSO/login. So unfortunately nobody from outside your company can access the page anymore. 

Beside that - how did you implement the CTA into your page?

best, 

Anton

[MDichkou]

Hello @Anton , I'm from the Dev team with Claudia. So, related to that issue, I will explain it more to you. I debug it in the browser using some breakpoints, and I saw that sometimes the createViews function from the web-interactive-embed.js file is creating the iframe and it's removed in the process of creating it. Sometimes it's not removed, but it's kept with visibility hidden. (check the screenshot below)

[Anton]

Hi @MDichkou, 

welcome to the Community!

How did you implement the CTA into your page?

Did you use the default embed-code which looks kinda like this:

<div class="hs-cta-embed hs-cta-simple-placeholder hs-cta-embed-136510361141"
  style="max-width:100%; max-height:100%; width:210px;height:42.390625px" data-hubspot-wrapper-cta-id="136510361141">
  <a href="https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/redirect?encryptedPayload=AVxigLKk2YfvQF5Mjr%2FfbVwqPWM4M%2FleTlbB4u9csJVKADXHvwDXkJt3WXxIVw%2FRtb8uQlfOh50CZ9UCgUOO9gBYl%2F9MfQNjYUBeHjjQBn6Wxw2GtqxE7UOkC9hq6SMSEkQheI%2BS8flnwKzgN%2BbqRHmA9oKe80gnR%2Fqlb9T2uaKV&webInteractiveContentId=136510361141&portalId=5024985" target="_blank" rel="noopener" crossorigin="anonymous">
    <img alt="Add button text" loading="lazy" src="https://no-cache.hubspot.com/cta/default/XXXXXXX/interactive-136510361141.png" style="height: 100%; width: 100%; object-fit: fill"
      onerror="this.style.display='none'" />
  </a>
</div>

or have you used some different approach?

best, 

Anton

[MDichkou]

Hi @Anton , thank you for the warm welcome! Yes, I used the default embed code.