# Embed CTA in vue application

**URL:** <https://community.hubspot.com/t/embed-cta-in-vue-application/78337>\
**Category:** APIs & Integrations\
**Tags:** professional\
**Created:** [March 29, 2023, 8:13pm UTC](https://community.hubspot.com/t/embed-cta-in-vue-application/78337 "2023-03-29T20:13:54Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MAzevedo3](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MAzevedo3](https://community.hubspot.com/u/MAzevedo3)\
**Post date:** [March 29, 2023, 8:13pm UTC](https://community.hubspot.com/t/embed-cta-in-vue-application/78337/1 "2023-03-29T20:13:54Z")

</div>

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](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](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](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 class="post-metadata">

**Author:** ![TDwebdev](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tdwebdev/32/78032_2.png) [@TDwebdev](https://community.hubspot.com/u/TDwebdev)\
**Post date:** [March 30, 2023, 7:46am UTC](https://community.hubspot.com/t/embed-cta-in-vue-application/78337/2 "2023-03-30T07:46:42Z")

</div>

Hi MAzevedo3,

You can try this:

```lia-code-sample
<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>

```

---

<div class="post-metadata">

**Author:** ![MAzevedo3](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MAzevedo3](https://community.hubspot.com/u/MAzevedo3)\
**Post date:** [March 30, 2023, 12:18pm UTC](https://community.hubspot.com/t/embed-cta-in-vue-application/78337/3 "2023-03-30T12:18:48Z")

</div>

@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)

---

<div class="post-metadata">

**Author:** ![TDwebdev](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tdwebdev/32/78032_2.png) [@TDwebdev](https://community.hubspot.com/u/TDwebdev)\
**Post date:** [March 30, 2023, 12:42pm UTC](https://community.hubspot.com/t/embed-cta-in-vue-application/78337/4 "2023-03-30T12:42:20Z")

</div>

Try this:

```lia-code-sample
<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>

```

---

<div class="post-metadata">

**Author:** ![MAzevedo3](https://avatars.discourse-cdn.com/v4/letter/m/a8b319/32.png) [@MAzevedo3](https://community.hubspot.com/u/MAzevedo3)\
**Post date:** [March 30, 2023, 1:28pm UTC](https://community.hubspot.com/t/embed-cta-in-vue-application/78337/5 "2023-03-30T13:28:21Z")

</div>

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