Streaming live at 10am (PST)

Make phone number text partially hidden, reveal on click

I’m trying to make the phone numbers partially hide on both the dropdown menu as well as the phone button on the ‘email’ page (i.e. hide the last 4 digits to be revealed on click, so I can set a Google Analytics event to record the event. I can’t figure out how to do that.

Can someone please point me in the right direction?

https://preview.webflow.com/preview/test-phone-obfuscation?utm_medium=preview_link&utm_source=dashboard&utm_content=test-phone-obfuscation&preview=be2e242a126550d3df43c4b1390d8181&mode=preview

Hey @egd

This is what you need to do;

In (Dashboard > Custom Code > Footer Code) ;

<script>
    $(function(){
      let phoneNotShown = true;
      const phoneNumber = $('#phoneNumber').text().trim();
      const hiddenPhoneNumber = phoneNumber.slice(0,-4) + '****';

      $('#phoneNumber').text(hiddenPhoneNumber).attr('href', '#');

      $('#phoneNumber').click(function(e) {
        if(phoneNotShown) {
          e.preventDefault();
          $(this).text(phoneNumber).attr('href', 'tel:' + phoneNumber);
          phoneNotShown = false;
        } else {
          return true;
        }
      });
    });
</script>

What we are doing above;

  1. Giving the phone link an id of phoneNumber
  2. Adding the obscured number on page ready.
  3. Preventing the link from dialing the phone no. before it is revealed.

Let me know if this helps;

Thanks @AlexManyeki . Really appreciate you taking the time to respond.

1 Like