0

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?

Ibrahim EL-Sanosi
  • 71
  • 1
  • 8
  • Script inserted with `innerHTML` are not executed https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml – mousetail May 02 '23 at 13:37
  • @mousetail thank you, what is alternative solution, how can we embed the CTA to existing React component? –  Ibrahim EL-Sanosi May 02 '23 at 13:46
  • The linked question lists many solutions – mousetail May 02 '23 at 13:48
  • Does this answer your question? [Executing – Wongjn May 02 '23 at 21:50
  • @Wongjn thank you for your replay, I have seen this answers before but I am not using JQuery, I want to embed the script inside the React component. –  Ibrahim EL-Sanosi May 03 '23 at 08:19

0 Answers0