Getting Started
Get started by learning how to use the MyDataHelps.js SDK in your project.
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:
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:
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.
<script src="https://cdn.careevolution.com/mydatahelps-js/3.24.0/MyDataHelps.js" integrity="sha384-pDwa4TPJnIAq/I8LcMouvkELgDW0/2D+xuxE5OSEplbScxUbPEXIzu8so5qL10QU" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.24.0/MyDataHelps.js" integrity="sha384-pDwa4TPJnIAq/I8LcMouvkELgDW0/2D+xuxE5OSEplbScxUbPEXIzu8so5qL10QU" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.24.0/MyDataHelps.min.js" integrity="sha384-OVAqLS+K1qRlgV0Iq1d/h8eyFNdnXqOE49EXmTZGQBx8BhHnedDp+n7+rAvZXmwW" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.24.0/MyDataHelps.min.js" integrity="sha384-OVAqLS+K1qRlgV0Iq1d/h8eyFNdnXqOE49EXmTZGQBx8BhHnedDp+n7+rAvZXmwW" 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.
<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.
<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>