Skip to content
  • There are no suggestions because the search field is empty.

Step Type: Web View

The web view step allows for embedding any HTML, CSS, or JavaScript inside a survey. It allows for extreme flexibility in creating custom experiences, but requires the user to be able to code in HTML, CSS, and JavaScript.

Properties

PROPERTY

FUNCTION EXAMPLES

Content Type

Note: Only available with Standard Survey V2.

Specify the type of web view step you wish to have.
  • Partial HTML: Wraps the web content in some HTML, providing default styles and MyDataHelps.js. Applies the survey's Look & Feel settings.
  • Specify Url: Load a view, including those from the View Builder.
  • Full HTML: Provide the exact HTML you'd like to run for the web view step.
Web Content HTML, including CSS or JavaScript, for the step. Sample content is provided when you create a web view step.

 

Developing Web View Steps

Partial HTML & Copilot

In most scenarios, it is recommended to use the Partial HTML content type with your Standard Survey V2 since it loads your survey's Look & Feel settings. Additionally, an optional Web View Step Copilot is available, which uses AI to help you generate code for your Web View step. Here are a few tips on using the copilot:

  • Prompt: Provide the Copilot with a prompt for the step you'd like to see and it will generate HTML and JavaScript attempting to match your prompt.
    • The copilot cannot receive files or visit webpages.
    • You're encouraged to click the information tooltip to explore different example prompts!

  • Revisions: You can make edits directly to the code and/or ask the copilot for further revisions.
    • Anytime you submit a prompt to the copilot, it receives a copy of the current code, so it will be aware of your manual edits.
    • If you want to go back to a prior version of the code, you can either navigate to that survey version if you saved it or ask the copilot to revert.
Example Copilot Prompt

In this example, the user submits a prompt asking the Copilot to create a response time test. Based on the prompt, Copilot generates the test automatically, without requiring the user to write any code!

Full HTML

Web View steps can use HTML and CSS for styling and JavaScript for behavior. The Full HTML content type contains some basic styles, as well as the minimal JavaScript necessary to handle the "Next" button and submit your answer.

For more help developing Full HTML Web View steps, see our Developer Site.

Using Web View Step Templates

Sometimes you will have several different steps within a survey utilizing the same custom web view design. Perhaps you have a unique style for your instruction steps, or several different mood questions that have the participant choose from a range of emoji. Web view step templates allow you to have multiple steps with similar looks and functionality, but individualized message prompts.

Your developers will create your custom template(s) using the instructions on our Developer Site. Once created, these templates will appear in the "Web View Step Templates" section of the survey.

The template will also appear in the step types list when creating a new step.

Any template-specific fields will appear in the step editor. This allows you to customize the message prompts every time you use the template.

 

The specific list of fields and their data types is determined by the template developer. In the example above, the developer has allowed the title, text, and next button prompt to be customized.

Importing Web View Step Templates

Templates can be imported from other surveys within the same workspace by clicking the "import" icon, and selecting one or more templates to import. Once imported, changes to Web View Step Templates are not synchronized across surveys so they can be modified to suit each distinct survey.

Web View Step Examples

Web View steps can be used to create study-specific views for sharing study materials and content.

For example, a study may want to share videos with participants in MyDataHelps surveys while keeping them private and inaccessible to the general public. To do this, you can use the "Web View Step: Display Vimeo Videos" survey in the survey library. This survey includes a Vimeo Step type where you can paste your Vimeo URL to display your private (or public) video. 

Visit the MyDataHelps Designer Survey Library to explore additional examples of Web View steps that can be used in your projects.