Set up identifying a user for Appcues in a ReactJS project

Question

I am trying to set up Appcues in a ReactJS project and the documentation states to add the following to identify the current user:

  Appcues.identify({UNIQUE_USER_ID}, { // Unique identifier for current user
    name: "John Doe",   // Current user's name
    email: "[email protected]", // Current user's email
    created_at: 1234567890,    // Unix timestamp of user signup date    
  });

However, this throws the error that:

'Appcues' is not defined

This error makes sense to me since the object, Appcues, is referenced but not imported or created.

Attempt to fix:

Since Appcues is imported from a script, I tried accessing Appcues through the window, but it results in my demo not being loaded when I go to my project in the browser:

  window.Appcues.identify({UNIQUE_USER_ID}, { // Unique identifier for current user
    name: "John Doe",   // Current user's name
    email: "[email protected]", // Current user's email
    created_at: 1234567890,    // Unix timestamp of user signup date    
  });

Does anyone understand how to set up identifying a user for Appcues in a ReactJS project?

Answer 1

Create a recursive function that checks to see if window.Appcues is null; then, either set up the identity of the user (if not null) or load the Appcues script and then recursively call itself (the function).

Identify User

function identifyUser(userID, name, email, createdAt) {
  // if window.Appcues is not undefined or null..
  if (window.Appcues != undefined && window.Appcues != null) {
    // set up the identity of the user
    window.Appcues.identify(userID, { // Unique identifier for current user
      name: name,   // Current user's name
      email: email, // Current user's email
      created_at: createdAt,    // Unix timestamp of user signup date
    });
  // else...
  } else {
    // load the script for Appcues
    newScript("//fast.appcues.com/30716.js").then(function() {
      // then recursively call identifyUser to initialize the identity of the user
      identifyUser(userID, name, email, createdAt);
    // catch any error and print to the console
    }.bind(this)).catch(function(error) {
      console.log('identifyUser: error on loading script');
    });
  }
}

Dynamically load script when needed

function newScript(src) {
  // create a promise for the newScript
  return new Promise(function(resolve, reject){
    // create an html script element
    var script = document.createElement('script');
    // set the source of the script element
    script.src = src;
    // set a listener when the script element finishes loading the script
    script.addEventListener('load', function () {
      // resolve if the script element loads
      resolve();
    }.bind(this));
    // set a listener when the script element faces any errors while loading
    script.addEventListener('error', function (e) {
      // reject if the script element has an error while loading the script
      reject(e);
    }.bind(this));
    // append the script element to the body
    document.body.appendChild(script);
  }.bind(this))
};

Cheers!