Exit Intent Mobile Pop Up!

Hey All, I came up with a workaround to get the Exit Intent trigger to work on cell phones and tablets!
By default, the trigger does not work on cell phones and tablets. Here is the video, message me if you have any questions - happy to help!

1 Like

Can you share your code you reference in your video?

1 Like

it was under the video on actual youtube , here it is

It is long but give this a spin and let me know, happy to help :slight_smile:

1 Like

Thank you so so much, Dillon! It works!! So appreciate your help.

2 Likes

that makes me incredibly happy! aside from the actual business people making the websites and ads etc… I dont know anyone who uses computers anymore LOL

1 Like

You’re awesome. Do you know how to remove the functionality of the pop-up being triggered upon tapping a new page link in my footer or any links on my page that route to other pages on my site?

try this:

// Function to show the Elfsight widget using the provided API method
function showElfsightPopup() {
if (typeof widget !== ‘undefined’ && widget.show) {
widget.show();
}
}

// Variables to track scroll position
let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
let scrollThreshold = window.innerHeight * 0.35; // 35% of the viewport height

// Detect upward scrolling
window.addEventListener(“scroll”, function() {
let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
if (lastScrollTop - currentScroll > scrollThreshold) {
showElfsightPopup();
}
lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
}, false);

// Detect back button press on mobile
window.addEventListener(“popstate”, function() {
showElfsightPopup();
});

// Push a new state into the history to enable back button detection
history.pushState(null, null, window.location.href);

// Detect visibility change event
document.addEventListener(‘visibilitychange’, function() {
if (document.visibilityState === ‘hidden’) {
showElfsightPopup();
}
});

You did it again! This works beautifully. Thank you!!

awesome, I’m just a marketing bro who found himself in a depth of ChatGPT coding he had no business being in! Glory be to God on this one LOL!

I’m back. hahah @dillonandrew Do you know how to get the title of the pop-up to pull my font from my website? I have “use font from website” selected with no luck. I’m building my site on Framer so I don’t have an option to add a font url into the css either.

What is the site?

Hey guys :wave:

@dillonandrew A huge thank you for your amazing assistance here! It’s highly appreciated :heart:

@Melody_H I see that you’ve opened a support ticket and our support agent will contact you really soon.

However, if you’d like us to help you here, please share a direct link to the page where your widget is installed. We’ll be happy to check it for you :slightly_smiling_face:

Please Share your complete code Youtube video unavailable

1 Like

Hey there @hamid_waheed :wave:

Here is the code:

// Function to show the Elfsight widget using the provided API method
function showElfsightPopup() {
  if (typeof widget !== 'undefined' && widget.show) {
    widget.show();
  }
}

// Variables to track scroll position
let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
let scrollThreshold = window.innerHeight * 0.35; // 35% of the viewport height

// Detect upward scrolling
window.addEventListener("scroll", function() {
  let currentScroll = window.pageYOffset || document.documentElement.scrollTop;
  if (lastScrollTop - currentScroll > scrollThreshold) {
    showElfsightPopup();
  }
  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
}, false);

// Detect back button press on mobile
window.addEventListener("popstate", function() {
  showElfsightPopup();
});

// Push a new state into the history to enable back button detection
history.pushState(null, null, window.location.href);

// Detect beforeunload event
window.addEventListener("beforeunload", function() {
  showElfsightPopup();
});

// Detect pagehide event
window.addEventListener("pagehide", function() {
  showElfsightPopup();
});

// Detect visibility change event
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'hidden') {
    showElfsightPopup();
  }
});

Give it a go and let me know if it helped :slightly_smiling_face: