CRO / Conversion

4 min

How to Show a Message to Returning Visitors in Webflow

Learn how to show a custom message to returning visitors in Webflow with localStorage.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to display a personalized welcome message for returning visitors on your Webflow site with localStorage.

Example

localStorage variable	Value	Use
visit-count	Number of visits	Differentiate first visit / returning visitor
last-visit	ISO date	Calculate time since last visit
Banner	ID returning-banner	Returning welcome notification

1. Create the elements in Webflow

Create a Div with the ID returning-banner in Fixed position, at the bottom or top of the page, with display: none by default. Add first-visit-msg and returning-msg Divs for the conditional messages. Add a Text Block visit-count-display to show the number of visits.

2. Add the script in Footer code

(function() {
  var visits = parseInt(localStorage.getItem('visit-count') || '0') + 1;
  localStorage.setItem('visit-count', visits);
  localStorage.setItem('last-visit', new Date().toISOString());

  var banner = document.getElementById('returning-banner');
  var firstMsg = document.getElementById('first-visit-msg');
  var returningMsg = document.getElementById('returning-msg');
  var visitCountEl = document.getElementById('visit-count-display');

  if (visitCountEl) visitCountEl.textContent = visits;

  if (visits === 1) {
    // First visit
    if (firstMsg) firstMsg.style.display = 'block';
    if (returningMsg) returningMsg.style.display = 'none';
  } else {
    // Returning visitor
    if (returningMsg) returningMsg.style.display = 'block';
    if (firstMsg) firstMsg.style.display = 'none';
    if (banner) {
      banner.style.display = 'flex';
      // Hide after 5 seconds
      setTimeout(function() {
        banner.style.opacity = '0';
        banner.style.transition = 'opacity 0.5s';
        setTimeout(function() { banner.style.display = 'none'; }, 500);
      }, 5000);
    }
  }
})();

3. Advanced customization based on the number of visits

var visits = parseInt(localStorage.getItem('visit-count') || '0');
if (visits >= 3) {
  // Very engaged visitor: show an offer
  document.getElementById('engaged-offer')?.style.display = 'block';
} else if (visits === 2) {
  // Second visit: show a testimonial
  document.getElementById('social-proof')?.style.display = 'block';
}

good to know

localStorage is persistent across sessions, but it's tied to the browser and device. A visitor who comes back on mobile after visiting on desktop will count as a first visit. For reliable cross-device tracking, you need an authentication system or a server-side cookie. For most UX use cases, localStorage is enough.

Conclusion

Recognizing returning visitors creates a sense of connection and improves conversion. Use cases:

Personalized welcome-back message
Special offer unlocked on the 3rd visit
Different CTA for hot leads (2+ visits)

👋 You're back! Visit #?×

First visit 👋

Welcome! See how Gemeos can help you.

You're back! 🎉

This is your visit #?. Ready for the next step?

How to Show a Message to Returning Visitors in Webflow

Example

1. Create the elements in Webflow

2. Add the script in Footer code

3. Advanced customization based on the number of visits

Conclusion

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

Similar tutorials