Hi,

I’m struggling with setting embedded data in a qualtrics survey in an Web/App insights project with an intercept. 

Within the intercept I’ve set up the following: 

On the survey page I use the following code:

Qualtrics.SurveyEngine.addOnReady(function() {
	// Verstecke und deaktiviere den Weiter-Button
    var nextButton = document.getElementById('NextButton');
    if (nextButton) {
        nextButton.style.display = 'none';
        nextButton.disabled = true;
    }
	var element = document.getElementById("SurveyEngineBody");

	let pageData;	
	const setBackgroundBasedOnDevice = () => {
		const width = window.innerWidth;

		// mobile breakpoint
		if (width < 768) {
			document.body.style.backgroundColor = pageData.data.mobileColor;
		} else {
			document.body.style.backgroundColor = pageData.data.desktopColor;
		}
		console.log('changed Backgroundcolor');
	};

	const getKameleoonData = (event) => {
        const daten = event.data;
		if (daten.type === 'Kameleoon') {
			pageData = daten;
			window.removeEventListener('resize', setBackgroundBasedOnDevice);
			setBackgroundBasedOnDevice();
			window.addEventListener('resize', setBackgroundBasedOnDevice);

			Qualtrics.SurveyEngine.setEmbeddedData('Customer type', daten.customerType ? daten.customerType : null); //Embedded data is set here.
		}
    };

    const qualtricsmessage = { 
		type: "qualtrics",
		status: 'ready',
	};

	window.addEventListener('message', getKameleoonData);
    window.parent.postMessage(qualtricsmessage, "*");

	const labelIds = /
		"QID1-76-label",
		"QID1-77-label",
		"QID1-78-label",
		"QID1-79-label",
		"QID1-80-label"
	];

	const ariaLabels = 	
		"Skala Wert 5 Sehr Gut",
		"Skala Wert 4 Gut",
		"Skala Wert 3 Neutral",
		"Skala Wert 2 Schlecht",
		"Skala Wert 1 Sehr Schlecht"
	];

	labelIds.forEach((id, index) => {
		const labelElement = document.getElementById(id);
		if (labelElement) {
			labelElement.setAttribute("aria-label", ariaLabelsaindex]);
			labelElement.tabIndex = 0;
		}
	});

	const inputIds = /
		"QR~QID1~76",
		"QR~QID1~77",
		"QR~QID1~78",
		"QR~QID1~79",
		"QR~QID1~80"
	];

	inputIds.forEach(id => {
		const inputElement = document.getElementById(id);
		if (inputElement) {
			inputElement.tabIndex = -1;
		}
	});
});


Qualtrics.SurveyEngine.addOnload(function() {
	const sendHeightWidth = () => {
        let qualtricsmessage = { 
			type: "qualtrics", 
			height: document.body.scrollHeight, 
			width: document.body.scrollWidth 
		};
		window.parent.postMessage(qualtricsmessage, "*");
    }

    window.addEventListener("load", sendHeightWidth);
    window.addEventListener("resize", sendHeightWidth);
});

Can anyone help me and explain what I’m doing wrong and what I have to do to make it work?

Thany you very much and best,

Liam