Integrate Sumo with React SPA and GatsbyJS

Use Sumo to collect emails, lead information and start email campaigns

Mon, 20 May 2019

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.

Screen Shot 2019-05-22 at 1.14.31 PM

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.

Loading...
Edward Beazer

Edward Beazer - I just like to build shit. Sometimes I get stuck for hours, even days while trying to figure out how to solve an issue or implement a new feature. Hope my tips and tutorials can save you some time.