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
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
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;
}
I've found the following regular expressions (on this blog) which the Lync plugin seems to use:
(\+?1[\-\. ])?(\(\d{3}\)|\d{3})[\-\. ]?\d{3}[\-\. ]?\d{4})
((\+?1[\-\. ])?(\((800|880|888|877|866|855|844|900)\)|(800|880|888|877|866|855|844|900))[\-\.0-9A-Za-z]{7,9})
(\+\d+[\-\. ](\(\d+\)[\- ]?)?\d[\d\-\. ]+\d)
((x|X)\d{3,5})
So using
or ‐
should prevent Lync from detecting the numbers.
I was unable to get Option 2 to work. I think this is because the add-on is triggered after the page is loaded. So that got me to thinking... If I trigger this after 5 seconds of the page loading, then hide the elements. This theory proved successfull, but it hid the phone number too.
I took it a step further and rebuilt the element for the Lync Click to Call class after stripping out the phone number. My steps may be crude, but effective.
var ie = (document.all) ? true : false;
function hideClass(objClass){
// This function will hide Elements by object Class
// Works with IE and Mozilla based browsers
var elements = (ie) ? document.all : document.getElementsByTagName('*');
for (i=0; i<elements.length; i++){
//Loop through the elements until it finds one with the correct class name
if (elements[i].className==objClass){
//Extract the phone number from the element
strPhone = getPhone(elements[i].innerHTML);
//Replace the element with the phone number
elements[i].outerHTML = "<SPAN class='baec5a81-e4d6-4674-97f3-e9220f0136c1'>"+strPhone+"</SPAN>"
}
}
}
function getPhone(thisStr){
newStr = "";
for (n=0; n<thisStr.length; n++){
currChar = thisStr.substr(n,1)
//Loop Through until it hits the first tag opening
if (currChar != "<"){
newStr+=currChar
}else{
break;
}
}
return newStr;
}
function viewHTML(){
alert(document.body.innerHTML)
}
function startTimer(){
// 5 Seconds after the page loads, run the
window.setTimeout(function(){hideClass('baec5a81-e4d6-4674-97f3-e9220f0136c1');},5000);
}
window.onload=startTimer();
I found a useful snippet to remove the Lync Call sign here. It replaces the hyphen in the phone number with a similar looking character, and it is no longer identified as a phone number.