Getting Started

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

Contents

Accessing MyDataHelps.js
- Web View Steps
- NPM
- CDN
Quickstart

Accessing MyDataHelps.js

Web View Steps

MyDataHelps.js is already included in any Web View Steps you create within your MyDataHelps surveys.

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.8.0/MyDataHelps.js" integrity="sha384-1FcHnj1RPsYJCdbx5bZijGEQzeRLCZhpwDLAcGj3HGVIOAUVr6YQ1urYmcjbaMet" crossorigin="anonymous"></script>
  <script src="https://cdn.careevolution.com/mydatahelps-js/3.8.0/MyDataHelps.js" integrity="sha384-1FcHnj1RPsYJCdbx5bZijGEQzeRLCZhpwDLAcGj3HGVIOAUVr6YQ1urYmcjbaMet" crossorigin="anonymous"></script>

    Minified 
    
    <script src="https://cdn.careevolution.com/mydatahelps-js/3.8.0/MyDataHelps.min.js" integrity="sha384-AnvbLdDWX3rYJV1rHB/kOn4oDx2Tyc3bJWiikUWqHOhV/kJ00c1yk6Vjq4ryaIQm" crossorigin="anonymous"></script>
  <script src="https://cdn.careevolution.com/mydatahelps-js/3.8.0/MyDataHelps.min.js" integrity="sha384-AnvbLdDWX3rYJV1rHB/kOn4oDx2Tyc3bJWiikUWqHOhV/kJ00c1yk6Vjq4ryaIQm" 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.

Create a survey.
Add a Web View Step.
Replace the sample body block with the code below. Note: Do not replace the entire step, just the body portion.
Save and publish the survey to your project.
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.
When you open the survey using your test participant, you will find that it greets you with the test participant’s name.
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.

Tip
Make sure to include the latest version of the jQuery library in your page’s head block.

    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>