Developer Corner

We are looking to distribute Qualtrics surveys using our customer facing mobile app’s in-app notification system. The app is expected to push a survey invite link to customers when they reach certain points of the customer journey, in real-time (think for example when a customer scans their ticket into an event venue). The survey invite needs to be tied to the customer and the specific transaction that triggered the invite, which is all stored within the notification system.At a high-level, we see two general ways of doing this:Anonymous link with URL parametersWe can store the base anonymous URL in the push notification template, and then dynamically append the customer’s information + transaction data to the end of the URL so that it gets passed through to the survey response. (ie [AnonymousURL]?[TransactionField1]=[Value]&[TransactionField2]=[Value]...)While this path gets the base job done and is the simplest to implement, it has some cons:The customer could manually manipulate

Hi Everyone,We have a survey which is used in a website feedback project. We have a javascript added in survey to Question Q2 which sets the value in ED depending on the answer choice selected by the customer We then use this embedded data in Q3 to display the value in the text of Question 3 in the survey so Q3 looks like this: How easy was it to ${e://Field/Q3CESText}? The logic applied is working perfectly fine when tested on the preview or anonymous link but it is not working when testing the survey on the client website through website project. That means the javascript is might not working when testing the survey on the mentioned website I tried testing with other test sites but it is not working on them as well Can anybody please help to find the cause? The javascript is fetching the value correctly on preview link: https://tuigroup.eu.qualtrics.com/jfe/preview/SV_1AlTOvB9aIxhDOR?Q_CHL=preview&Q_SurveyVersionID=currentBelow is the code we are using in Q2 to set the value of Embed

Dear all,I am design an experiment. My survey question is simple in nature, which is in text-entry type. I have created the html part for the description.<style> .bg_color{ background-color: #FCFC9C; } table.centered-table { width: 648px; margin: auto; border-collapse: collapse; text-align: center; } table.centered-table th, table.centered-table td { text-align: center; } table.centered-table th { border-bottom: 2px solid black; font-weight: bold; padding: 20px; } table.centered-table .border-white { border-bottom: 2px solid white; } table.centered-table .border-light { border-bottom: 2px solid #f1f1f1; } .gray-text { color: gray; } .red-text { color: red; } .blue-text { color: blue; } .transparent-button { background-color: transparent; border: none; padding: 20px; cursor: pointer; }</style><table class="centered-table">

Hi!I have seen this question asked multiple times on this forum, but I could not find a definitive answer. I would like to have the rank order question in the drag and drop modality, where the items are displayed horizontally. I know this problem needs some custom code, which I cannot seem to figure out (even with chatGPT). I am wondering if anyone else maybe encountered the same issue and could help me out with their custom code. Thank you very much in advance! <3

I want to call the Create a New Response API to create survey responses from my application (https://api.qualtrics.com/f1cad92018d2b-create-a-new-response). I don’t see a way to add embedded data to that request. Is there a way to create add embedded data with a survey response creation request, or am I required to send a subsequent Update Response request (https://api.qualtrics.com/daed82306b1ea-update-response)?

Hi all, I am trying to make the arrow on the next button larger. The posts I have found on here only change the size of the button itself but not the arrow. I also found this on the Qualtrics website: “Note that you can’t use HTML or make other rich content edits to the next and back button text” but do not completely understand what it is saying. In sum, is it even possible to enlarge the arrow? If so, how? ( Thank you for your help!

I am trying to make it so my next button is hidden until a certain requirement is met (all the dropdown questions, created using HTML, have an option selected -- if no option is selected, the value for each dropdown is “”).With how it is right now, the next button is hidden, but selecting choices for each dropdown does not make the next button show up as needed. I’ve tried different iterations of this but can’t get it to make the next button show up. Qualtrics.SurveyEngine.addOnload(function() {    //disable next button    this.hideNextButton();var requiredLeftDropdownIDs = [        "dropdown1_left", "dropdown2_left",         "dropdown3_left", "dropdown4_left",         "dropdown5_left", "dropdown6_left",         "dropdown7_left", "dropdown8_left",         "dropdown9_left", "dropdown10_left",         "dropdown11_left", "dropdown12_left",         "dropdown13_left", "dropdown14_left",         "dropdown15_left",     ];allValid = true;requiredLeftDropdownIDs.forEach(function (id) {         

Hi Folks- I can’t seem to find any posts around this particular issue and would appreciate any tips!I want to post a survey to my company’s LinkedIn page, and track how many responses came from LinkedIn. When I go to Distributions> Social Media> LinkedIn, I am able to create a post through Qualtrics, but the survey link does not populate on the post, even if I manually copy and paste the hyperlink into the body of the post. Do I need to be creating an embedded field ahead of time? Should I be using a certain type of link? Is there some mysterious option I’m not thinking of? We’re currently tracking sources with bitly links, but I’d love to be able to use a built in Qualtrics feature if that is an option. Thanks!

Hi ☺️  I am trying to use a library within the worker.js of an XM function and all methods are failing. I have tried both es6 and typescript packages with available notations and executing the task either returns a lib not found or forbidden import. Does anybody know the way to call a library or even a function from another file within the project within the worker.js? Thanks!

I'm developing a system to construct numerous, complex surveys multiple times a year. These surveys necessitate extensive branching logic contingent on data sourced from lookup tables. My primary goal is to fully automate this process, eliminating manual data input into Qualtrics beyond the integration of JavaScript code.A quintessential example involves determining eligible election candidates based on respondent location. By ascertaining the respondent's city and electoral district, I intend to dynamically populate questions with the appropriate candidate list using data retrieved from a lookup table.I’ve investigated Qualtrics’ built-in lookup tasks and Google Sheets integration but found them inadequate for my needs. Lookup tasks demand manual input of corresponding values, while Google Sheets restricts lookups to a single column. I’ve also experimented with embedding data as a string within JavaScript and processing it manually using D3, but compatibility issues with Qualtrics' en

Hi everybody :)I created an experiment that tests working memory in which digits are presented quickly (a lot of them, 38 digits in 3 different blocks), and responding via the mouse is very slow for this.I want to allow my subjects to respond using the keyboard with the letters "M" for an appropriate response, and "X" for an inappropriate response - currently the options appear horizontally with M being the response to the right answer.After wandering around the various forums, I realized that I need to write code in JAVASCRIPT but I don't understand writing code at all.I would appreciate help!I came across this question in the forum - but I still can't find a way to adapt this code to me:https://community.qualtrics.com/custom-code-12/use-keyboard-for-answering-multiple-choice-question-8398?postid=25171#post25171  

Hello! I am trying to have one of my questions a freeform drag and drop (e.g., participants will move icons on a screen) and I want to save either the final image or the coordinates of the icons. I only want 2 of the items to move (imagine there is a square, and the icon for ‘lunch’ doesn’t move, and you move an icon for ‘breakfast’ and an icon for ‘dinner’. I tried the following code but I cannot seem to make it work. I was hoping that someone could have better insight as to what needs to be corrected. Thank you in advance! <div style="position: relative; width: 600px; height: 400px; margin: 20px auto; background: url('https://uwartsandsciences.pdx1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_eXemGs5D7yFpvhz') no-repeat center; background-size: contain; border: 1px solid #ccc;" id="slide-container"> <img style="width: 50px; position: absolute; top: 150px; left: 450px; cursor: grab;" src="https://uwartsandsciences.pdx1.qualtrics.com/Contro

Hi,  I need help making a multi-choice question invisible. I have added a single choice multi-choice question in which the answer is selected when the user hits a Withdraw From Survey button in the footer to withdraw and go straight to the debrief. This all works fine, however I have tried JS code from other posts on this forum and cannot get my multi-choice question to become invisible - the question is just a blank space but the radio button is still visible and highlights blue when the withdraw button is used.  Here is the current working JS Im using in the question. EndNow is the name of my withdraw button: Qualtrics.SurveyEngine.addOnReady(function() {var that = this;var endBtn = document.getElementById("EndNow");function skip() {that.setChoiceValue(1, true);that.clickNextButton();};endBtn.addEventListener("click", skip);});

Hello,  I use a lot of multiple choice questions that have an other open-ended box that I would like to limit the character count.  This javascript has been working great but does not appear to work in the “new survey experience.” The documentation on “new survey experience” from Qualtrics indicates custom code may not work but does not specify how to adjust it to have it work. I also attempted calling in Jquery in the header with no success. Any ideas on how to adjust the following so it works in “new survey experience”?Qualtrics.SurveyEngine.addOnload(function(){  jQuery("#"+this.questionId+" .InputText").attr("maxlength","10");}); 

Hi,I have a survey with a ‘lab.js’ screen included in it. The results from that screen are extracted and stored in a Qualtrics Embedded data field. When I view the results within Qualtrics I can see that all the ‘lab.js’ data is there but concatenated into a single cell. When it is downloaded some of this data has been truncated. I have tried to reformat this data within Qualtrics using Piped data and Javascript. I think that because it includes numerous quotation marks the Javascript is getting confused and my Javascript variables do not get populated when I try to copy the embedded data into them. I have tested that I am able to display the whole concatenation within an HTML tag on a later question screen, so I know the Piped data is accessing the right field. I am only interested in a few items at the end of the concatenated embedded data that are missing from the truncated downloaded field. Is it possible to increase the size of the downloaded embedded data? If not, is it possible

Hi all,I have created a button that forces my survey into full screen. When in full screen, the blocks that scroll beyond the standard height of the page (ie. that require scrolling down) switch from the default background colour to a solid white. This is not a problem when not in full screen. See the screenshot attached that shows the lavender colour cut off to white when the page scrolls down: My question is - Is there a way to extend the lavender colour to the bottom of the page whilst in full screen?Many ThanksOly

Hi everyone,I'm working on a survey and in an answer option I do have a hyperlink. When I hover over the option, I want all the text, including hyperlinks, to change to white. However, I'm having trouble getting the CSS to work correctly.Here's an example of my HTML structure: <b>Option Text <a href="link" target="_blank">htext</a></b><br> <span style="font-size: 11px">additional text</span>.choice.radio:hover a { color: white; /* Ensure link text color also changes to white */ }Due to the trial version, I cannot show the full functionality. When I hover over the option, all the Option Text becomes white, the htext becomes light blue, and the background becomes dark blue.Could anyone help me with the correct CSS to ensure all text, including hyperlinks, changes to white on hover?I've also added a screenshot from the trial login to make more sense to the users.Thanks in advance! 

Hello, I am seeing in the console on my site the following error, seemingly related to Qualtrics. I have a support ticket but they’ve been unable to replicate so far. Any ideas what this could mean?"Uncaught (in promise) Error: Loading chunk 12 failed.(error: https://siteintercept.qualtrics.com/dxjsmodule/12.8fb54ff2c385347a3180.chunk.js?Q_CLIENTVERSION=--blocked--&Q_CLIENTTYPE=--blocked--&Q_BRANDID=--blocked--" 

Greetings to the community!I am facing an issue in my Data Recruitment (SSFF)  that utilizes a native integration with Qualtrics fot a Candidate Experience project. The situation is as follows:Problem: Despite the native integration between my Data Recruitment system SSFF  and Qualtrics appearing to work correctly in terms of adding contacts to the directory, I am unable to view candidate data. This includes crucial information such as names, email addresses, and other relevant details. The candidate viewing screen is blank.Question: Has anyone experienced a similar issue or have any idea why this native integration is not allowing me to view candidate data? Are there any additional configurations I should be aware of or possible solutions I can try?I appreciate any help or suggestions you can provide. Thank you in advance for your support! 

Hi there,I need to update the default calendar field to start displaying years from 2023 onwards, instead of showing earlier years.JavaScript is beyond my capabilities - could someone please assist me with this?Many thanks in advance! 

I would like to add a participant from the directory to a specific project as part of a survey flow, but for some reason I can’t make it work.I have this setup:It should be straight forward, but I struggle to get the body part right. According to the documentation:https://api.qualtrics.com/c03ae4b3e935d-copy-participantsIt should be like this:[  "1234"]I get an “body should be an array type.” error, but the JSON selection should create this.Any help would be much appreciated!

I am designing a survey in qualtrics. A part of the survey requires that people view a pdf on the left side of the screen and then have the answer options on the ride side of the screen. I have been able to add CSS code to make sure that the scrollable PDF is inserted into qualtrics. But I can't seem to find a way to make the native answer layout allow these beside the questionSee image for referenceI have tried a number of CSS codes; none of them have worked. Any suggestions?

Hello Community,We are encountering an issue with our integration between Qualtrics and SuccessFactors. The error message we receive is: "Unable to connect account; review credentials and try again."We have already checked the following details:Username:  API Key:  Datacenter Domain:  X.509 Certificate Private Key: ... Company ID: Despite confirming that these details are correct, we are still facing connection issues. Has anyone experienced a similar problem or have suggestions on how to resolve it? Any assistance or advice would be greatly appreciated. Regards | Savio

I need help with setting up a validation check between two questions. Q1 is a multiple choice question with numeric buckets. Q2 is a multiple choice question with a required entry field for which the entered value MUST be within the range selected in Q1. One cannot proceed to the next screen until correcting their response. How do I set this up?I am including a screenshot of the two questions as well as the JavaScript I am using but does not seem to be working properly.  Qualtrics.SurveyEngine.addOnload(function () { // Define the ranges for Q1 in an object const ranges = { '1': { min: 0, max: 19 }, '2': { min: 20, max: 49 }, '3': { min: 50, max: 99 }, '4': { min: 100, max: 249 }, '5': { min: 250, max: 499 }, '6': { min: 500, max: 749 }, '7': { min: 750, max: 999 }, '8': { min: 1000, max: 2499 }, '9': { min: 2500, max: 4999 }, '10': { min: 5000, max: 19999 }, '11': { min: 20000, max: 49999 }, '12'

Hi,I am in an requirement to add the javascript code into an existing website code which basically functions to capture the embedded data such as CAID and Email ID which I have configured these fields in the survey flow of the particular survey and also in the website intercept embedded data by choosing the type as the Value from Javascript in order to store the values for the particular embedded data field from the javascript code . The javascript code which I have incorported in the existing website code    <script>Qualtrics.SurveyEngine.addOnLoad(function(){Qualtrics.SurveyEngine.addOnPageSubmit(function(type){if(type == "next"){            var EmailID = "xxx@xxx.com";        var CAID = 935326;            Qualtrics.SurveyEngine.setEmbeddedData('EmailID', EmailID);Qualtrics.SurveyEngine.setEmbeddedData('CAID', CAID);    }});});    </script>and also I have placed the website intercept deployment code at the header section I am getting the “Uncaught ReferenceError Reference