Access and update Qualtrics embedded data from javascript

On multiple occasions when designing surveys in Qualtrics, I’ve run across situations where I need to both access embedded data from javascript and update the embedded data. Unfortunately, it is not immediately obvious how to do this, and it takes a few steps to accomplish this correctly.

Take an example where I’m storing a count of how many times a user is clicking in a specific area in each question (triggering a javascript function), but I only want an aggregate count across multiple questions. Assuming I’ve already added and initialized the embedded data (TotalKeyClicks) in the Qualtrics survey flow, each time I need to reference the embedded data in the javascript, I first need to add a hidden HTML element with the embedded data value:

1

2

3

<span id="EmbedDataTotalKeyClicks"style="display: none;">

${e://Field/TotalKeyClicks}

</span>

The best practice next step would be to create a javascript utility function to access this embedded data. For simplicity here, I’ve directly referenced the DOM element instead of creating a utility function:

saves the value of totalKeyClicks to the Qualtrics Embedded Data field: TotalKeyClicks. This is the line that does all of the magic that allows the value to be accessed via the data reports. However, none of this would have been possible if the javascript could not access the Embedded Data in the first place.