Integrate Sumo with React SPA and GatsbyJS

Sumo is a useful tool that allows you to capture data from visitors that you can use to turn into customers and/or run email campaigns. The image below is a basic example of a Sumo form in action.

Installation

Sumo itself does not have any npm packages that we need to install. Sumo uses a script that we need to inject into the head of our page. In this example we will be using React Helmet to do this.

yarn install react-helmet

Use this code on the page that you want the Sumo form to appear on

import { Helmet } from "react-helmet";

    <div>
      <Helmet defer={false}>
        {typeof window !== "undefined" && (
          <script async>
            {(function(s, u, m, o, j, v) {
              j = u.createElement(m);
              v = u.getElementsByTagName(m)[0];
              j.async = 1;
              j.src = o;
              j.dataset.sumoSiteId =
              "ENTER SUMO ID HERE";
            v.parentNode.insertBefore(j, v);
          })(window, document, "script", "//load.sumo.com/")}
        </script>
      )}
    </Helmet>
  </div>

This following line can be deleted if you’re using vanilla React

{typeof window !== "undefined" && (....)

The code checks to make sure the code is being ran in a browser before attempting to inject the script into the page. This is useful for static site generators such as GatsbyJS. Without that code, Gatsby would attempt to inject the script and fail during the build phase since its not doing it within the browser.

Displaying your form

After adding the following code to your page, your form will show up the moment you publish within Sumo. Create a new form and test it out!

TIP - By default Sumo will not show a form once a user enters information inside of it. Keep that in mind while testing your form’s functionality.