Max
May 30, 2025, 12:46pm
1
Want to blur calculation results until the form in your Calculator widget is submitted? We’ve got it covered
Add the script below to the Custom JS field on the Settings tab of your widget’s settings:
(function () {
const MESSAGE = 'Place order to see the results';
const css = `
.es-blur-outer {
position: relative;
}
.es-blur-inner {
filter: blur(5px);
pointer-events: none;
user-select: none;
}
.es-blur-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
white-space: nowrap;
z-index: 10;
}
`;
util.waitForElement('[class*="result-primary__PrimaryContainer-sc"]').then((primaryEl) => {
const root = primaryEl.getRootNode();
const parent = primaryEl.parentNode;
const style = document.createElement('style');
style.innerHTML = css;
root.appendChild(style);
const resultEls = [primaryEl, ...parent.querySelectorAll('[class*="result-secondary__SecondaryContainer-sc"]')];
const outer = document.createElement('div');
outer.className = 'es-blur-outer';
parent.insertBefore(outer, primaryEl);
const inner = document.createElement('div');
inner.className = 'es-blur-inner';
outer.appendChild(inner);
resultEls.forEach((el) => inner.appendChild(el));
if (MESSAGE) {
const message = document.createElement('div');
message.className = 'es-blur-message';
message.textContent = MESSAGE;
outer.appendChild(message);
}
util.waitForElement('[class*="SubmitMessage__Message-sc"]', { root }).then(() => {
style.remove();
resultEls.forEach((el) => parent.insertBefore(el, outer));
outer.remove();
});
});
})();
This video shows how this feature works:
Guys, was this solution helpful to you? Share your feedback in the comments
David57
September 12, 2026, 4:03pm
2
Hi @Max The code doesn’t seem to be working for me. I used the exact Tile Calculator shown in your video, added the code, and replaced the Widget ID with my own. I then embedded the calculator on my website to test it, but the results are still showing and don’t appear to be blurred.
I’m not sure if I’m missing a step or doing something incorrectly. Any advice would be greatly appreciated. Thank you!
Max
September 14, 2026, 12:10pm
3
Welcome to the Community, @David57
Thanks for bringing this up!
We’ve updated the script and here is a new version that should work great:
(function () {
const MESSAGE = 'Place order to see the results';
const css = `
.es-blur-outer {
position: relative;
}
.es-blur-inner {
filter: blur(5px);
pointer-events: none;
user-select: none;
}
.es-blur-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
padding: 10px 20px;
border-radius: 5px;
font-weight: bold;
white-space: nowrap;
z-index: 10;
}
`;
util.waitForElement('[class*="result-primary__PrimaryContainer-sc"]').then((primaryEl) => {
const root = primaryEl.getRootNode();
const parent = primaryEl.parentNode;
const style = document.createElement('style');
style.innerHTML = css;
root.appendChild(style);
const resultEls = [primaryEl, ...parent.querySelectorAll('[class*="result-secondary__SecondaryContainer-sc"]')];
const outer = document.createElement('div');
outer.className = 'es-blur-outer';
parent.insertBefore(outer, primaryEl);
const inner = document.createElement('div');
inner.className = 'es-blur-inner';
outer.appendChild(inner);
resultEls.forEach((el) => inner.appendChild(el));
if (MESSAGE) {
const message = document.createElement('div');
message.className = 'es-blur-message';
message.textContent = MESSAGE;
outer.appendChild(message);
}
util.waitForElement('[class*="SubmitMessage__Message-sc"]', { root }).then(() => {
style.remove();
resultEls.forEach((el) => parent.insertBefore(el, outer));
outer.remove();
});
});
})();
Give it a try and let me know if you like the result
David57
September 14, 2026, 11:22pm
4
Thank you @Max That worked. would you happen to also have the other code to hide it vs blurring it? Thanks again.
Max
September 15, 2026, 10:47am
5
