CMS Development

IElsanosi
Participant

Render HTML and script in React

Hello,
 

I have HubSpot call-to-action embed code. I would like to inject it in my React page.

The code call-to-action embed code is:

<!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="*******"><span class="*******" id="********"><!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="********" target="_blank" rel="noopener"><img class="hs-cta-img" id="**********" style="border-width:0px;" height="20" width="20" src="**************"  alt="New call-to-action"/></a></span><script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(*****, '********', {"useNewLoader":"true","region":"na1"}); </script></span><!-- end HubSpot Call-to-Action Code -->

I want to embded code in React.

Attempts:

  1. I use dangerouslysetinnerhtml but this does not seem working for script.

    const cta = " embed code here ";

Then I use dangerouslySetInnerHTML attribute on an HTML element to add an CTA HTML string inside its content as follow:

 dangerouslySetInnerHTML={{__html: cta}}

Using dangerouslySetInnerHTML, it does not work for script tag.

How can I achieve this, rendering the above embed code without missing any part of it?

0 Upvotes
2 Replies 2
AGordain
Member

Render HTML and script in React

how to render module block

Screenshot 2024-05-16 at 2.40.58 PM.png

0 Upvotes
IElsanosi
Participant

Render HTML and script in React

Thank you very much for your replay.

 

First of all, I have installed 'react-hubspot' lib and I can see the library is installed in node_modules folder. But I am not able to use it as I am getting error message:

TS2307: Cannot find module 'react-hubspot' or its corresponding type declarations. 

 

For the an example you provided, the CTA code is not just url, it is HTML (with ids and classes) and scripts, can you give me an example of how to use react-hubspot to emded the whole CTA code like the follwoning:

<!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="*******"><span class="*******" id="********"><!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="********" target="_blank" rel="noopener"><img class="hs-cta-img" id="**********" style="border-width:0px;" height="20" width="20" src="**************"  alt="New call-to-action"/></a></span><script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(*****, '********', {"useNewLoader":"true","region":"na1"}); </script></span><!-- end HubSpot Call-to-Action Code -->

 

 

0 Upvotes