Get started by learning how to use the MyDataHelps.js SDK in your project.
MyDataHelps.js is already included in any Web View Steps you create within your MyDataHelps surveys.
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"
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.7.0/MyDataHelps.js" integrity="sha384-1FmeyjtKUyZj1YSamhpnSzqEfVRswOJFvCQ7li76aapngpsUC5bAdfMqs49lRR4x" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.7.0/MyDataHelps.js" integrity="sha384-1FmeyjtKUyZj1YSamhpnSzqEfVRswOJFvCQ7li76aapngpsUC5bAdfMqs49lRR4x" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.7.0/MyDataHelps.min.js" integrity="sha384-YHRsWfN/kJXzvDDOpiCMrRLlLsOODFfz1ehcsmA5OMaTbjqDorL64DyNNR9hcpk5" crossorigin="anonymous"></script>
<script src="https://cdn.careevolution.com/mydatahelps-js/3.7.0/MyDataHelps.min.js" integrity="sha384-YHRsWfN/kJXzvDDOpiCMrRLlLsOODFfz1ehcsmA5OMaTbjqDorL64DyNNR9hcpk5" crossorigin="anonymous"></script>
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.
body
block with the code below. Note: Do not replace the entire step, just the body portion.<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:
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.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.
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>