Make the price blurry until they opt-in to collect leads

Ask the Community Customization
3

Hi there, @Resultat_Grabbarna and welcome to the Community :waving_hand:

We already have a similar request to hide the results until the form completion - Hide results until form completion. Feel free to upvote it!

While the feature isn’t available in the settings, it’s possible to achieve this with a custom code and I’ve shared it here :slightly_smiling_face:

By the way, I’ve slightly adjusted this code and here is the new version that will make the results blurred until the form completion:

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"] {
    position: relative;
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
  }
  .elfsight-app-${WIDGET_ID} [class*="result-primary__PrimaryContainer-sc"]:after,
  .elfsight-app-${WIDGET_ID} [class*="result-secondary__SecondaryContainer-sc"]:after {
    content: '${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;
    filter: none;
    z-index: 10;
  }
`;
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 ID of your widget and add the resulted code to the Custom JS field on the Settings tab of your widget’s settings. Here is how the code works in my test widget:


Try it out and let me know if you like the result :slightly_smiling_face: