APIs & Integrations

hatemkhattab
Member

How can i embed Hubspot CTA code to my gatsby app

Im trying to embedd CTA code in my Gatsby app, but i cant find the right way to do it

 

Example:

 

<!--HubSpot Call-to-Action Code -->
<span class="hs-cta-wrapper" id="hs-cta-wrapper-052ee9eb-307b-4c3e-a826-3e91ea1cf8ee">
<span class="hs-cta-node hs-cta-052ee9eb-307b-4c3e-a826-3e91ea1cf8ee" id="hs-cta-052ee9eb-307b-4c3e-a826-3e91ea1cf8ee">
<!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]-->
<img class="hs-cta-img" id="hs-cta-img-052ee9eb-307b-4c3e-a826-3e91ea1cf8ee" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/4011462/052ee9eb-307b-4c3e-a826-3e91ea1cf8ee.png" alt="Ladda ner guiden"/>
</a>
</span>
<script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script>
<script type="text/javascript"> hbspt.cta.load(xxxxx, 'xxxx-xxx-xxxx-xxxx', {}); </script>
</span>
<!-- end HubSpot Call-to-Action Code -->

 

0 Upvotes
7 Replies 7
HJack
Participant

How can i embed Hubspot CTA code to my gatsby app

Hi @WendyGoh , I face the same problem. Can you provide a work example for React, please? Thanks

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

How can i embed Hubspot CTA code to my gatsby app

Hey @hatemkhattab,

 

When looking to embed HubSpot CTA to your external site, the example code you shared is the right embed code. 

 

You'd need to paste the CTA embed code into the HTML page in which you'd like the CTA to appear. 

 

For more detailed guide: Embed calls-to-action (CTA) on your external site.

0 Upvotes
hatemkhattab
Member

How can i embed Hubspot CTA code to my gatsby app

Thanks for your Reply @WendyGoh 

 

my problem is we dont have html page, its React app so jsx syntax is applied there, i think that i  need a developer help please.

 

Thanks alot

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

How can i embed Hubspot CTA code to my gatsby app

Hey @hatemkhattab,

 

Researching into this, I was able to find this article: How to render HTML in React in which it shows 2 solutions to render html on a react app. You may want to explore the option of using a 3rd party library: GitHub - wrakky/react-html-parser: Converts HTML strings directly into React components and provide ... and see if this works? 

0 Upvotes
hatemkhattab
Member

How can i embed Hubspot CTA code to my gatsby app

Thanx @WendyGoh for your help, this way dosnt work, its to render bure  html string into React ,

 

but hubspot code use script to embedd the form in html ,  may be it need a nother way to do this in react

 

All the best

0 Upvotes
WendyGoh
HubSpot Employee
HubSpot Employee

How can i embed Hubspot CTA code to my gatsby app

Hey @hatemkhattab,

 

If adding script to react is your team concern, I was able to locate this resource 4 Ways to Add External JavaScript Files in React | by Nivedha Duraisamy | Better Programming | Mediu... in which it share 4 different methods to add script tag in React. 

 

Hope this helps!

0 Upvotes
hatemkhattab
Member

How can i embed Hubspot CTA code to my gatsby app

Hi @WendyGoh , i can include script in the page but this dosent work för me, I appreciate a lot  if you can see a developer to create a demo that render Hubspot CTA in react and share his code 

 

All the best