tengo un sitio web de react js y quiero insertar un formulario hubspot.
Formulario HubSpot:
<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/shell.js"></script> <script> hbspt.forms.create({ region: "eu1", portalId: "25082527", formId: "8a7c2adb-5c41-4c47-8478-b1f1abe01e3f" }); </script>reaccionar js pagina contacto
import React from 'react'; import SEO from "../common/SEO"; import Layout from "../common/Layout"; import ContactOne from "../elements/contact/ContactOne"; const ContactPage = () => { return ( <> <SEO title="Contact" desc="EXIGOH - Contact us now"/> <Layout> <div className="main-content"> {/* Start Contact Area */} <div className="rwt-contact-area rn-section-gap"> <div className="container"> <div className="row"> <div className="col-lg-12 mb--40"> <div className="text-center"> <h1 className="title theme-gradient h2" dangerouslySetInnerHTML={{__html: 'The Easiest Way To Start <br /> fill in & send.'}}/> </div> </div> </div> **<<<<<<<< -------------- insert it here >>** {/*<ContactOne/>*/} </div> </div> {/* End Contact Area */} </div> </Layout> </> ) } export default ContactPage; así que mi pregunta es: ¿cómo puedo hacer eso? Traté de usar <helmet> pero esto no funciona para mí. ¿Cómo puedo insertar etiquetas de script en reaccionar js?
Esto es lo que hice, funcionó a las mil maravillas...
HubspotContactForm import React, {useEffect} from "react"; const HubspotContactForm = props => { const { region, portalId, formId } = props; useEffect(() => { const script = document.createElement('script'); script.src='https://js.hsforms.net/forms/shell.js'; document.body.appendChild(script); script.addEventListener('load', () => { // @TS-ignore if (window.hbspt) { // @TS-ignore window.hbspt.forms.create({ region: {region}, portalId: {portalId}, formId: {formId}, target: '#hubspotForm' }) } }); }, []); return ( <div> <div id="hubspotForm"></div> </div> ); }; export default HubspotContactForm; import { HubspotContactForm, } from '../components'; export default function MyPage() { return ( <main> <div className="container"> <div className="row"> <div className="col"> <HubspotContactForm region="na1" portalId="12345678" formId='4333d218-20e3-41f9-a478-47bd0c26bf1a' /> </div> </div> </div> </main> ); };