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:

1
<script src="https://survey123.arcgis.com/api/jsapi/"></script>

The following code sample shows how to create a web form instance with example clientId and itemId values:

1
2
3
4
5
webform = new Survey123WebForm({
    clientId: "TG75Zb6OXqL7jgcQ",
    container: "formDiv",
    itemId: "129132bbedcb490488a162aa996bb693"
});

The following code sample shows how to request your location and pass it to the form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
webform = new Survey123WebForm({
    clientId: "TG75Zb6OXqL7jgcQ",
    container: "formDiv",
    itemId: "129132bbedcb490488a162aa996bb693"
    onFormLoaded: (data) => {
      if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(position => {
          webform.setGeopoint({
            x: position.coords.longitude,
            y: position.coords.latitude
          });
        }, () => { console.error('Unable to retrieve your location'); });
      } else {console.error('Geolocation is not supported by your browser'); }
    }
});

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:

1
https://survey123.arcgis.com/share/acb28b212b5542acbbdbaa35feba0765?mode=edit&globalId={globalid}

Available parameters are listed in the following table:

Web app API reference

For a complete list of JavaScript properties and methods, see the Survey123 web app API reference.