Embed a survey using JavaScript
Use JavaScript to embed, style, and interact with a survey in your custom web app.
Configure a survey in ArcGIS Experience Builder
ArcGIS Experience Builder allows you to create web apps and pages using flexible layouts, content, and widgets that interact with 2D and 3D data.
Experience Builder uses the Survey123 web app API so you can add a survey to your web app without writing any code. Use the Survey widget to add a survey. You can configure whether the user creates a survey or selects an existing survey, the appearance of the survey, and where data from the survey is sent.
An example of embedding a survey in a web app using Experience Builder is the US Government Employee Travel Information for France survey.
Embed a survey in a custom web app
You can use JavaScript to embed, style, and interact with a survey directly in your web app.
To do this, create a survey object in your app. You can precalculate answers to questions, listen to events or other parts of the web app, and change or add steps to be completed when the user clicks the Submit button.
Start by importing the Survey123 web app API into your HTML page using the following code:
The following code sample shows how to create a web form instance with example client
and item
values:
The following code sample shows how to request your location and pass it to the form:
Parameters
When you embed a survey in either ArcGIS Experience Builder or your custom web app, you can add parameters to control the way survey is displayed.
The following ArcGIS Experience Builder example displays the form for a selected record in edit mode:
Available parameters are listed in the following table:
Parameter | Description | Example | Type |
---|---|---|---|
| Centers the map to known latitude, longitude, and optional altitude. |
| String |
| Populates survey questions with field values. |
| String |
| Specifies the URL to the portal where the survey item is hosted. |
| String |
| Specifies the app used to open the survey. Valid values are |
| String |
| Hides elements of the survey in the web app. The parameter can accept multiple values separated by a comma. Valid values are |
| String |
| Switches the language of the survey. It only works if the survey includes multiple languages. |
| String |
| Sets the mode of the web app. Valid values are |
| String |
global | Specifies the survey record that's loaded into the form. Valid values are the global IDs for existing survey records. The name of this parameter is case sensitive. |
| String |
| Can only be used with |
| String |
version | Sets the version of the web app that will be used. The only valid value is |
| String |
token | Passes a valid token for a survey. It can be used to allow respondents to respond to a survey that requires an ArcGIS account to access it without signing in. |
| String |
| Refreshes the survey after submission. Specify the delay (in seconds) before the survey is refreshed. |
| Integer |
encode | Obscures URL parameters. The resulting URL will instead include a |
| Boolean |
| Sets the width for the survey, in pixels. This also affects other controls within the survey, such as text boxes. |
| Integer |
Web app API reference
For a complete list of JavaScript properties and methods, see the Survey123 web app API reference.