We want to capture the Calculator user info before they get access to use the Results For instance, we are calculating the cost of vacancy for open positions as we are a staffing firm. We want to capture user name, company, email, phone, etc before the Results are shown to them.
Hi @Jerome1
I completely get where youâre coming from, and I agree that it would be great to have such an option.
Weâll try to think this idea over and Iâll make sure to inform you here in case of any changes
Thanks a bunch for sharing your thoughts with us!
I am the web developer for a home remodeling company and want to capture more leads this way too. I was looking for this and was surprised they dont have this option yetâŚ
Hi there, @Noah_Beard
Many thanks for sharing your thoughts with us!
We also agree that it would be a nice option. Letâs hope the devs will be able to consider this idea. If any news comes up, weâll promptly update you here
Thank you.
There should be an option where results arenât show until all questions have been answered / inputs received.
I really miss this feature, I bought it on the calculator to generate more leads, but if you canât hide the result to obtain contact information, then unfortunately you wonât generate as many leads as the calculator intended. Is there any timeframe for such an upgrade, i have been trying a couple of work arrounds but, the it seems like the JS code is not overwriting the CSSâŚ
exactly.
Hey there, guys, @Kastri, @user2869
A huge thank you for your feedback!
The timeline for this feature is still unclear, since we have a lot of requests with the higher priority now. However, if any news comes up, weâll update you here right away
In the meantime, could you please describe how you envision showing results in this case? Should they appear in the widget after clicking on the Submit form button or youâd like to send them in email notifications?
Hi @Max
Thx for your respons.
The ideel way would be to appear in the widget after clicking on the Submit form button, this way the customers can get the information straigt away.
@Kastri, Here is the solution from our devs:
const WIDGET_ID = 'a6dcdae5-8996-44d6-90f9-06d4948100ba';
const MESSAGE = 'Place order to see the results';
const style = document.createElement('style');
style.innerHTML = `
.elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"] *,
.elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"] * {
display: none;
}
.elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
.elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
content: '${MESSAGE}';
}
`;
document.body.append(style);
const waitForElem = (selector) =>
new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(() => {
if (document.querySelector(selector)) {
observer.disconnect();
resolve(document.querySelector(selector));
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
waitForElem(
`[class*="${WIDGET_ID}"] [class*="SubmitMessage__Message-sc"]`
).then(() => style.remove());
The custom message should be set in the 2nd line of the code.
This code should be added to the Custom JS field on the Settings tab of your widgetâs settings. Try it out and let me know how it worked
Guys, if youâd also like to show the results in the widget only after clicking on the Submit button, please let me know. Our devs will come up with a code for your case
It works, i am going to work a bit on the layout, but the code hides the results, and only shows the results after clicking submit!
Could you make a code for me as well? Iâm pretty much the same as Kastri where I dont want customers to see the total until they submit their info. So getting the estimate is an incentive for them giving up info.
You can use the same code mate, just change the widget ID = âa6dcdae5-8996-44d6-90f9-06d4948100baâ to your widget.
Thank you sir.
Hi!
Iâd like to request a feature for the Calculator widget: the ability to hide or blur the calculated values until the user completes the form. This would be incredibly helpful for lead generation purposes, ensuring users engage with the form before accessing the full result.
Iâve actually developed a workaround using JavaScript that achieves this behavior and would be happy to share it as a reference. However, having this as a built-in settingâperhaps as a checkbox like âHide result until form is submittedââ would make the experience much more seamless for non-technical users.
Welcome to the Community, @Marketing_BR
We already have such a request on the Wishlist, and Iâve added your comment there too
By the way, there is a custom solution for this case:
const WIDGET_ID = 'WIDGET ID';
const MESSAGE = 'Place order to see the results';
const style = document.createElement('style');
style.innerHTML = `
.elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"] *,
.elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"] * {
display: none;
}
.elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
.elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
content: '${MESSAGE}';
}
`;
document.body.append(style);
const waitForElem = (selector) =>
new Promise((resolve) => {
if (document.querySelector(selector)) {
return resolve(document.querySelector(selector));
}
const observer = new MutationObserver(() => {
if (document.querySelector(selector)) {
observer.disconnect();
resolve(document.querySelector(selector));
}
});
observer.observe(document.body, {
childList: true,
subtree: true,
});
});
waitForElem(
`[class*="${WIDGET_ID}"] [class*="SubmitMessage__Message-sc"]`
).then(() => style.remove());
Replace WIDGET_ID
in the 1st line of the code with the ID of your widget and add the resulted code to the Custom JS field on the Settings tab of your widgetâs settings
Max, this solution does not work. Hundreds of people have been asking for this feature for months and still no progress. This is the whole reason I got this app to be completely honest because I figured it would eventually have to come out. If it is so easy to make a custom solution, then just release it to everyone in an update. Weâve been waiting for months and everyone who uses the calculator widget says the same exact thing and probable all too got the app for this reason. Just make it, it would take your devs an hour or two out of their day to do so. Please.
Hi there, @Noah_Beard
Thank you for the feedback!
I completely understand your excitement about this option and agree that it would be a great enhancement.
Weâd really love to roll out new features faster, but with so many requests coming in, we have to prioritize them based on their complexity and community votes.
While this feature might seem straightforward, thereâs actually a lot that goes into it. First, we design the feature, then pass it to development. Once the development is over, our team thoroughly tests it to catch any issues before release. All of this takes much time, as we want to make sure everything works smoothly for you
At the moment, there are a lot of requests with the higher priority level and our devs are focused on them now. If this request gets more votes, it might be prioritized sooner, but itâs still hard to give any predictions for now.
If any news comes up, weâll promptly update you here!
As for the custom workaround Iâve shared before, Iâve checked it in my test widget and itâs working great:
Could you please double-check it? If itâs still not working in your widget, please send me a link to the page, where your widget is installed. Iâll gladly check it for you
Note: Keep in mind that the JS code works only upon widgetâs installation, not in the preview mode.