Getting Started

Get started by learning how to use the MyDataHelps.js SDK in your project.

Contents

Accessing MyDataHelps.js

Web View Steps

Web View steps using Partial HTML mode automatically include the SDK, as does the sample HTML for Full HTML mode. Custom views used in Web View steps will need to include the SDK using either NPM or CDN, as described below.

NPM

You can download the latest MyDataHelps.js files and host them alongside your application.

The MyDataHelps.js SDK can be found on NPM. NPM is a popular tool and resource for sharing code libraries. Download NPM with Node.js, and use it with your preferred command line interface.

Add MyDataHelps.js to your project by installing it with NPM:

Installing MyDataHelps.js in Your NPM Project 
Add the package to your project:

> npm i @careevolution/mydatahelps-js --save
Add the package to your project: > npm i @careevolution/mydatahelps-js --save

Once installed, you can import the SDK for easy reference:

Referencing the MyDataHelps SDK 
import MyDataHelps from "@careevolution/mydatahelps-js"
import MyDataHelps from "@careevolution/mydatahelps-js"

CDN

MyDataHelps.js is available as a standalone file, which can be included in a <script> tag almost anywhere.

A Content Delivery Network serves static content with high uptime and low latency.

Use one of the following <script> tags to retrieve MyDataHelps.js.

Uncompressed 
<script src="https://cdn.careevolution.com/mydatahelps-js/3.27.0/MyDataHelps.js" integrity="sha384-Pt27YLEqfMMbYLNoZQqwRN9bepmLCeUR03+X1ZdGsNOdjGYFcv2oDJTN04hg4S6a" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.27.0/MyDataHelps.js" integrity="sha384-Pt27YLEqfMMbYLNoZQqwRN9bepmLCeUR03+X1ZdGsNOdjGYFcv2oDJTN04hg4S6a" crossorigin="anonymous"></script>
Minified 
<script src="https://cdn.careevolution.com/mydatahelps-js/3.27.0/MyDataHelps.min.js" integrity="sha384-ZScgFoHP023/7PvoBATePV81rorx6/DaZ4Zkl3VtKxP9agUwd5pJdX9udPa80bhV" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.27.0/MyDataHelps.min.js" integrity="sha384-ZScgFoHP023/7PvoBATePV81rorx6/DaZ4Zkl3VtKxP9agUwd5pJdX9udPa80bhV" crossorigin="anonymous"></script>

Quickstart

The easiest way to get started with the MyDataHelps SDK is using a Web View Step within a survey. The following example demonstrates how to get participant data and complete a step using the SDK.

  1. Create a survey.
  2. Add a Web View Step.
  3. Replace the sample body block with the code below. Note: Do not replace the entire step, just the body portion.
  4. Save and publish the survey to your project.
  5. Deliver the survey to one of your test participants. Ensure your test participant has a first name set. See Testing Projects and Surveys for help.
  6. When you open the survey using your test participant, you will find that it greets you with the test participant’s name.
  7. Clicking “Next” will complete this step with a result of “complete”. This also advances to the next step, or completes the survey if there are no more steps.
Web View Step SDK Quickstart 
<body style="display:none">
   <div class="step-container">
      <h1>Welcome, <span id="participantName">Participant</span>!</h1>
      <button class="next" onclick="MyDataHelps.completeStep('complete');">Next</button>
   </div>
</body>
<script>
   function onLoad() {
     
     MyDataHelps.getParticipantInfo()
     .then( function(result) {
       var name = result.demographics.firstName;
       document.getElementById('participantName').innerHTML = name;
     } );
     
     
   };
   window.onload = onLoad;
   onLoad();
</script>
<body style="display:none"> <div class="step-container"> <h1>Welcome, <span id="participantName">Participant</span>!</h1> <button class="next" onclick="MyDataHelps.completeStep('complete');">Next</button> </div> </body> <script> function onLoad() { MyDataHelps.getParticipantInfo() .then( function(result) { var name = result.demographics.firstName; document.getElementById('participantName').innerHTML = name; } ); }; window.onload = onLoad; onLoad(); </script>

A few things to note about using the SDK in Web View Steps:

  • Most SDK methods will not work in “Try It Out” mode in the MyDataHelps designer because there is no participant associated with that session.
  • The second onLoad(); call may seem redundant, but it is necessary on some platforms due to the way Web View Steps are loaded. Views and Embeddables do not require that extra call.
  • In this example, the string value “complete” will be saved as this step’s result. You can pass other values to MyDataHelps.completeStep() to save your own custom step data.

Many developers like to use jQuery for convenient access to page elements and other utilities. jQuery is not required to use the SDK, but it can be a helpful adjunct. The same example with jQuery is shown below.

Web View Step SDK Quickstart with jQuery 
<body style="display:none">
   <div class="step-container">
      <h1>Welcome, <span id="participantName">Participant</span>!</h1>
      <button class="next" onclick="MyDataHelps.completeStep('complete');">Next</button>
   </div>
</body>
<script>
   function onLoad() {
     
     MyDataHelps.getParticipantInfo()
     .then( function(result) {
        var name = result.demographics.firstName;
        $('#participantName').html(name);
      } );
   };
   $( document ).ready(onLoad);
   onLoad();
</script>
<body style="display:none"> <div class="step-container"> <h1>Welcome, <span id="participantName">Participant</span>!</h1> <button class="next" onclick="MyDataHelps.completeStep('complete');">Next</button> </div> </body> <script> function onLoad() { MyDataHelps.getParticipantInfo() .then( function(result) { var name = result.demographics.firstName; $('#participantName').html(name); } ); }; $( document ).ready(onLoad); onLoad(); </script>

Have questions about MyDataHelps? Contact us.

© 2025 CareEvolution, LLC