Embed CTA in vue application

Develop, Build & Integrate APIs & Integrations
1

I’m trying to embed the CTA script in my vue application, but I’m not getting a solution. how to do this?

<!--HubSpot Call-to-Action Code -->
<span class=“hs-cta-wrapper” id=“hs-cta-wrapper-xxxx”>
<span class=“hs-cta-node hs-cta-xxxx” id=“hs-cta-xxxxxxx”>
<!--[if lte IE 8]>
<div id=“hs-cta-ie-element”>
</div><![endif]-->
<a href=“https://cta-redirect.hubspot.com/cta/redirect/xxx/xxxx” target=“_blank” rel=“noopener”>
<img class=“hs-cta-img” id=“hs-cta-img-xxxx” style=“border-width:0px;” src=“https://no-cache.hubspot.com/cta/default/xxxxxxx/xxxxxx.png” alt=“Falar com um especialista”/></a></span><script charset=“utf-8” src=“https://js.hscta.net/cta/current.js”></script>
<script type=“text/javascript”> hbspt.cta.load(xxxxx, ‘xxxxx’, {“useNewLoader”:“true”,“region”:“na1”});
</script>
</span>

<!-- end HubSpot Call-to-Action Code -->

2

Hi MAzevedo3,

You can try this:

<template>
 <div>
 <!--HubSpot Call-to-Action Code -->
 <span class="hs-cta-wrapper" id="hs-cta-wrapper-xxxx">
 <span class="hs-cta-node hs-cta-xxxx" id="hs-cta-xxxxxxx">
 <!--[if lte IE 8]>
 <div id="hs-cta-ie-element">
 </div>
 <![endif]-->
 <a href="https://cta-redirect.hubspot.com/cta/redirect/xxx/xxxx" target="_blank" rel="noopener">
 <img class="hs-cta-img" id="hs-cta-img-xxxx" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/xxxxxxx/xxxxxx.png" alt="Falar com um especialista"/>
 </a>
 </span>
 <script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
 <script type="text/javascript">
 hbspt.cta.load(xxxxx, 'xxxxx', {"useNewLoader":"true","region":"na1"});
 </script>
 </span>
 <!-- end HubSpot Call-to-Action Code -->
 </div>
</template>
3

@TDwebdev When I do that he returns this call to me:

Tags with side effect (<script> and <style>) are ignored in client component templates.vue(61)

4

Try this:

<template>
 <div>
 <!--HubSpot Call-to-Action Code -->
 <span class="hs-cta-wrapper" id="hs-cta-wrapper-xxxx">
 <span class="hs-cta-node hs-cta-xxxx" id="hs-cta-xxxxxxx">
 <!--[if lte IE 8]>
 <div id="hs-cta-ie-element">
 </div>
 <![endif]-->
 <a href="https://cta-redirect.hubspot.com/cta/redirect/xxx/xxxx" target="_blank" rel="noopener">
 <img class="hs-cta-img" id="hs-cta-img-xxxx" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/xxxxxxx/xxxxxx.png" alt="Falar com um especialista"/>
 </a>
 </span>
 </span>
 <!-- end HubSpot Call-to-Action Code -->
 </div>
</template>

<script>
export default {
 mounted() {
 const script = document.createElement('script');
 script.setAttribute('charset', 'utf-8');
 script.setAttribute('src', 'https://js.hscta.net/cta/current.js');
 document.head.appendChild(script);
 script.onload = function() {
 hbspt.cta.load(xxxxx, 'xxxxx', {"useNewLoader":"true","region":"na1"});
 };
 }
}
</script>
5

I try this, but after clicking the CTA nothing happens and the console doesn’t show anything. Interaction does not reach hubspot.