Disable Lync Click to Call detecting numbers in a web page

Question

Is there a way to stop Microsoft Lync from detecting phone numbers in a web page, and adding its click to call icon to that phone number in Internet Explorer?

Obviously the client can disable this functionality in Internet Explorer, however I would like to disable this for all who visit a particular website, as it is not playing nicely with embedded fonts in use on the website.

To do this for Skype I would add the following meta tag into my web page's header:

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />

Thanks,

Peter

Answer 1

I've found a few options, but none are as simple or clean as adding a META tag to the page (which Microsoft absolutely should give us as an option).

Option #1: Insert markup into your phone number

Adding something like a blank SPAN into the middle of a phone number is sufficient to throw off Lync's detection. This is a highly manual option, as it requires you to edit every phone number on a page. But it could be handy for disabling one or two numbers on a page, while allowing any others to be detected.

<p>For help, please call 1-<span></span>800-555-1234.</p>

---

Option #2: Script away the additional markup

Lync appears to format phone numbers in a very predictable way. It wraps a SPAN around the number using a (as far as I can tell) consistent class name, then appends an A anchor which contains the dialing icon.

<!-- Lync formatting -->
<p>For help, please call
  <span class="baec5a81-e4d6-4674-97f3-e9220f0136c1" style="white-space: nowrap;">
    1-800-555-1234 
    <a title="Call: 1-800-555-1234" style="...">
      <img title="Call: 1-800-555-1234" src="data:image/png;base64,..."/>
    </a>
  </span>
.</p>

Given that very unique Guid used for the classname, you can target that with your own client script and hide it or do whatever. A jQuery approach to hide all Lync icons might look like:

$("span.baec5a81-e4d6-4674-97f3-e9220f0136c1 > a").hide();

UPDATE! Option #2a: Style away the additional markup

Using the same technique as the script example above, you can simply style away the offending anchor tag using CSS. This should be preferable to a script-based solution.

span.baec5a81-e4d6-4674-97f3-e9220f0136c1 > a {
   display: none !important;
}

---

Option #3: Use a TEL anchor as a preemptive strike

There is a standardized way to markup a phone number for compatibility with VOIP/dialing programs. It uses a standard A anchor with a tel: protocol. This has the dual effect of not only disabling Lync's intrusive markup, but also providing better support for anything that knows how to dial a number (Skype) and mobile devices (both iOS and Android).

<p>For help, please call <a href="tel:1-800-555-1234">1-800-555-1234</a>.</p>

Now Lync users can still click the link, which will prompt them to "open" it with Lync, regardless of the browser they use (I've confirmed compatibility with IE9, Firefox and Chrome). This strikes me as the best of both worlds: compatibility with users' telephony application, without trouncing all over your markup and layout.

---

Until Microsoft comes up with a META tag to solve these issues, we've opted for #3.

---

UPDATE: Incorporated the suggestion from @marsman57 for improvement to CSS option #2

Answer 2

I have suggested an edit to option #2, but until it is approved, I'll go ahead and drop this here. The reason for user2200197's problem is that the !important tag needs to be specified because the anchor tag specifies a display value that overrides it otherwise.

span.baec5a81-e4d6-4674-97f3-e9220f0136c1 > a {
   display: none !important;
}