JS error on page but not on template causing functionality to not work

DylanPress — Tue, 31 Jul 2018 18:45:51 GMT

I have these scripts that launch a video overlay when a button is clicked on my homepage

Script in template head

<script src="https://fast.wistia.com/embed/medias/ci1kb2r0is.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>

Button HTML on template

<p><span class="wistia_embed wistia_async_ci1kb2r0is popover=true popoverContent=link" style="display: inline; position: relative;"><a class="shadow-box btn btn-green" style="display: inline-block;" href="#">HOW AVANAN WORKS <img src="https://www.avanan.com/hubfs/play-button-1.png" alt="" title="play-button.png" width="25" style="width: 25px;"></a></span></p>

This works fine on the template and when I preview the template.

However when editing the page, Hubspot changes the HTML automatically to the following

button HTML on page editor

<div id="wistia_47.thumb_container" class="wistia_click_to_play" style="position: relative; display: inline;"><a class="shadow-box btn btn-green" style="display: inline-block;" href="#">HOW AVANAN WORKS <img src="https://www.avanan.com/hubfs/play-button-1.png" alt="" title="play-button.png" width="25" style="width: 25px;"></a></div>

and the functionality does not work. Instead I get the following error:

How can I fix so the functionality on the page matches that of the template?

Re: JS error on page but not on template causing functionality to not work

tjoyce — Wed, 01 Aug 2018 12:18:58 GMT

Hi @DylanPress - Can you try changing the span to a div and remove the wrapping <p> tag and see if that works?

<div class="wistia_embed wistia_async_ci1kb2r0is popover=true popoverContent=link" style="display: inline; position: relative;">
  <a class="shadow-box btn btn-green" style="display: inline-block;" href="#">HOW AVANAN WORKS <img src="https://www.avanan.com/hubfs/play-button-1.png" alt="" title="play-button.png" width="25" style="width: 25px;">
  </a>
</div>

If this answer helped, please, mark as solved 😄

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

topic JS error on page but not on template causing functionality to not work in CMS Development

JS error on page but not on template causing functionality to not work

Re: JS error on page but not on template causing functionality to not work