React WalkMe Module · react-walkme

React WalkMe is a library that simplifies the process in helping your developers.

Installation

// TODO

Usage

The WalkMe asks you to add manually the snippet code, that looks something like this:

<script type="text/javascript">
  (function() {
      var walkme = document.createElement('script');
      walkme.type = 'text/javascript';
      walkme.async = true;
      walkme.src = 'https://cdn.walkme.com/users/01010101010101010101010101010101/test/walkme_01010101010101010101010101010101_https.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(walkme, s);
      window._walkmeConfig = {smartLoad:true};
    }
  )();
</script>

WALKME_ID

The 01010101010101010101010101010101 is your WALKME_ID that you can copy that and keep it somewhere safe. (not in your code!)

WALKME_TEST

WALKME_TEST is used to determine if you will look at. Logs will also be enabled when this is true.

walkMeCallback

The walkMeCallback will be called when the script is finished loading.

const walkMeCallback = () => {
  // Will only be called when script is loaded
};

Initialize WalkMe

This should only be done once, so make sure you don't put it somewhere that creates multiple instances.

  import ReactWalkMe from 'react-walkme';

  ReactWalkMe.initialize(WALKME_ID, WALKME_TEST, [walkMeCallback]);

Value	Notes
WALKME_ID	String. Required. WalkMe Tracking ID.
WALKME_TEST	String. Required. WalkMe Environment to run [Test/Production].
walkMeCallback	Function. Optional. Function to call when WalkMe is instantiated.

Usage

You should put a call to your API on route change. I use the ReactWalkMe.getWalkMeAPI(); that seems to wake WalkMe and make it available to the page.

Example

If you are using react-router-redux you can attach it to your history listen function:

history.listen(() => {
  ReactWalkMe.getWalkMeAPI();
});

function init() {
  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        /* code */
      </ConnectedRouter>
    </Provider>,
  );
}

API

ReactWalkMe.initialize(WALKME_ID, WALKME_TEST, [walkMeCallback]);

ReactWalkMe.walkme();

ReactWalkMe.getWalkMeAPI();

More to come

Development

v0.1.x uses Node v16. Recommend using Node Version Manager (nvm) for local development.

Releases

There is a Github Action task, Publish and Release (publish-nexus.yaml)[.github/workflows/publish-nexus.yaml] which uses (release-on-push-action)[https://github.com/rymndhng/release-on-push-action/tree/v0.28.0/] to automatically manage versions of this library.

Any merge to a release branch will cause the minor version to be updated and a new release published to Nexus. By default, the next release will be a patch release, i.e. 0.1.1 ==> 0.1.2. Use the labels on the PR to control the versioning, release:major, release:minor, or release:patch. For instance the release:minor tag will go from 0.1.1 => 0.2.0. The library uses the Github releases feature to control this.

If you do not want a release with a PR, i.e. you only updated the documenation or the build scripts, you can add the norelease label on the PR.

IMPORTANT: You must manually update the package.json version number to properly version the package to Nexus.