In our last article, we explored how to prefill survey fields using a URL. That method is simple and works well for many campaigns. However, there are times when you need more flexibility. Perhaps you want the survey to adapt in real time, pull information from your site, or calculate an answer before showing it to the user. In those cases, Prefill Surveys using JavaScript becomes a game-changer.
Once you turn on “Values from external sources” (as covered before), you can prefill fields not only from a URL but also from JavaScript variables or JavaScript functions. By doing so, you gain far more control over how your surveys behave and how they interact with your existing site or application.
Why Use JavaScript?
Compared to URL-based prefill, JavaScript offers several advantages.
- First, it can pull dynamic data such as user details, preferences, or purchase history.
- Second, it keeps your URLs short and clean, avoiding extra parameters that can make links hard to read.
- Finally, it can run custom logic before the survey loads, allowing you to personalize every single experience.
Method 1: Using Variables
If the data you need already exists in your page’s JavaScript, passing it to ThumbsUpSurvey is straightforward.
Example:
<script>
window.exciting_feature = 3;
</script>
With this in place, set the External param in your survey block to exciting_feature. When the page loads, the survey reads that value and fills the answer automatically—no query strings required. This is an ideal choice for simple, static values you already have available on the page.
Method 2: Using Functions
For more advanced scenarios, you can use a function to determine the answer dynamically.
Example:
<script>
function getExcitingFeature() {
return 2;
}
</script>
Here, you would set External param to getExcitingFeature. As a result, the survey runs the function each time it loads and uses the returned value. This allows you to fetch live data, perform calculations, or adapt based on user behavior—all before the participant even sees the question.
How the Survey Chooses Between Sources
It’s important to know that the system automatically detects external sources in a specific order. The survey first looks for a value in the URL. If it finds one, it uses that and bypasses both the variable and the function. If there’s no URL parameter, it checks for a variable. Finally, if no variable is found, it runs the function. This priority system ensures consistent and predictable behavior, even if multiple sources are available.
Revisiting the Demo
Let’s return to the “Is this a survey?” example for a practical demonstration. Instead of passing the value through the URL, you can set the External param for the question “Which feature excites you the most?” to a variable or a function. When the survey loads, it detects the answer, skips that question, and moves the user directly to the next step. This creates a smoother, faster experience.
When JavaScript Works Best
In general, JavaScript prefill shines when:
- You want to prefill personalized details about the respondent—for example, their name, membership level, or account status.
- You need to load customer-specific values from a token provided in the URL, often used for customer feedback or loyalty surveys where answers depend on who is taking the survey.
- The information changes frequently, such as live stock levels or user location.
- You want to keep survey links short, clean, and easy to share.
- Your answers need to be calculated or generated dynamically.
Final Thoughts
Although this method is more advanced than the URL approach, the benefits can be significant. With a small amount of JavaScript, you can make your surveys faster, more relevant, and deeply integrated with your site.
If coding isn’t your thing, don’t worry—we’re happy to handle it for you. Get in touch, and we’ll make sure your survey runs exactly the way you want, without you having to touch a single line of code.