Search code examples
javascriptreactjsjsxembedsharpspring

Embed SharpSpring form into React component

I'm trying to embed a Sharpspring form script into my React (page.jsx) component. For this form to load succesfully it needs to be placed outsite the <head></head> element, and inside the <div> where I want to display the form.

The original HTML code I need to embed looks like this:

<!-- SharpSpring Form  -->
<script type="text/javascript">
    var ss_form = {'account': 'MzawMDE3tzQzBQ', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAA'};
    ss_form.width = '100%';
    ss_form.domain = 'app-3QNK98WC9.marketingautomation.services';
    // ss_form.hidden = {'field_id': 'value'}; // Modify this for sending hidden variables, or overriding values
    // ss_form.target_id = 'target'; // Optional parameter: forms will be placed inside the element with the specified id
    // ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.
</script>
<script type="text/javascript" src="https://koi-3QNK98WC9.marketingautomation.services/client/form.js?ver=2.0.1"></script>

I'm trying to embed it into page.jsx this way:

import React from "react";

function myComponent()  {
  
  var ss_form = {'account': 'MzawMDE3tzQzBQA', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAAA'};
  ss_form.width = '100%';
  ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services';
  
  return (

   <main>
    <div className="form">
       {ss_form}
        <script src="https://koi-3QNK98WC9Y.marketingautomation.services/client/form.js?ver=2.0.1" type="text/javascript" />
     </div>  
   </main>

  );
}

export default myComponent;

However, I get this error:

Error: Objects are not valid as a React child (found: object with keys {account, formID, width, domain}). If you meant to render a collection of children, use an array instead.

I know I'm supposed to use "arrays instead" but I could not find any documentation that solved this error. Any suggestions on how I could make this embed code to work?

Thank you.

Solution

  • I was able to embed the form using helmet.

    First installed:

    npm install helmet

    My working code looks like this:

    import React from "react";
import ReactDOM from "react-dom";
import { Helmet } from 'react-helmet';

  function myComponent() {
    return (
    <main>
    <Helmet>
      <script
          src="https://koi-3QNK98WC9.marketingautomation.services/client/form.js?ver=2.0.1"
        />
        <script>
          {`
              var ss_form = {'account': 'MzawMDE3tzQzBQ', 'formID': 'szBIMrFMSzbXTUm0TNM1MTc107VMNbfQTTRJTExOTUoySk4zAA'};
              ss_form.width = '100%';
              ss_form.domain = 'app-3QNK98WC9Y.marketingautomation.services';
              ss_form.target_id = 'form'; 
              ss_form.polling = true; 
            
          `}
        </script>
      </Helmet>
   
      <div id="form"> </div>

  </main>
  );
}

export default myComponent;

    Turns out SharpSpring embed code supports the variant ss_form.target_id, which displays the form on the designated ID.

    I'm sure the above solution will work for other javascripts and embed codes as well.