Using Web View Steps

Web View steps allow you to present a custom step inside a MyDataHelps survey.

Examples of Web View Steps

Web View steps can be used to present customized selections, instructional text, embedded videos, feedback forms, and any other step that isn’t covered by the built-in MyDataHelps step types. This gallery shows just a few examples of actual Web View steps.

For examples of Web View steps, see the case study.

Creating a Web View Step

When you add a step to your survey, select “Web View Step” for the step type.

The “Web Content” editor at right will contain some starter HTML, including CSS styles. Use this as a launching point, or replace it with your own web content.

Using Sample Web View Steps

In addition to the starter HTML, several sample surveys are available to aid in the design of Web View steps. To browse these examples:

1. Go to the Survey Store.
2. Open the “Sample Surveys” folder.
3. Select one of the Web View step templates to preview it.
4. Click the “Import” button to import a copy of the survey into your project. You may use the survey as-is, modify and extend it for your own use, or copy/paste the code from the step editor into your own Web View step in a different survey.

Using Custom Views in Web View Steps

You can use a custom view in a Web View step. Just reference its URL instead of providing code in the code block.

This view must be externally hosted and reviewed by CareEvolution before it will appear in the survey. Also, you will probably want this view to mimic the look and feel of a survey step, including a “Next” button to save results and advance.

The MyDataHelpsUI React component library contains many ready-made components that can be incorporated into custom views. You can see these in action under the “Survey Step” section of the MyDataHelpsUI Storybook, including a completion step with animated confetti and a component that lets you easily display YouTube videos.

Using Participant Fields

As with other survey steps, you can utilize dynamic participant fields (identifiers, demographics, and custom fields) in your Web View steps. These may appear in either the HTML or JavaScript. For example:

<p>Welcome back, <%DemographicField.FirstName%>!</p>

or

if ("<%DemographicField.Gender%>" == 'M') {}

See Using Participant Fields for more details, including a complete list of available fields.

If a dynamic field contains HTML, it will be encoded and displayed as raw text.

Using JavaScript

You can use JavaScript in your Web View steps to create a dynamic experience. The following topics cover common tasks for Web View steps scripting:

• Saving Survey Results and Advancing
• Accessing Previous Steps

You can also use the MyDataHelps JavaScript SDK to leverage your project’s data–past survey answers or compliance, detailed participant information, and device data–to tailor the behavior of your Web View steps.

Contact MyDataHelps support if you need to host JavaScript assets within MyDataHelps.

Adding Links

You can create hyperlinks to other content within a Web View step, but always use target="_blank" to open the links in a separate browser window. Without this tag, links within the MyDataHelps app may not work as expected. For example:

<a href="https://example.com" target="_blank">Example Information</a>

Sharing Styles

If you have styles shared across multiple Web View steps, you can create a shared CSS file and reference it from within your HTML header:

<link rel="stylesheet" href="https://example.com/yourstyles.css">

Contact MyDataHelps support if you need to host CSS assets within MyDataHelps.