Phone Number not clickable using Azure Bot Framework Web Chat

Question

Setup

I created a Azure QnA Web Chat Bot using QnAMaker, Azure Bot Service, and the Bot Framework Web Chat client in JavaScript.

Here's an example of how I'm initializing the bot with HTML + JS:

<script src="https://cdn.botframework.com/botframework-webchat/4.6.0/webchat-es5.js"></script>

<div id="projekt-webchat" role="main"></div>

window.WebChat.renderWebChat(
    {
       directLine: window.WebChat.createDirectLine({
          secret: 'SECRETHERE'
       }),
       userID: 'YOUR_USER_ID',
       username: 'Web Chat User',
       locale: 'en-US',
       botAvatarInitials: 'WC',
       userAvatarInitials: 'WW'
    },
    document.getElementById('projekt-webchat')
);

My bot is connected to a KnowledgeBase from QnA Maker which has a QnA Pair like this:

Question: gimmenumber
Answer: +49 5251 123456

Native Browser Detection

Some browsers will render this as a clickable hyperlink and Ichoose to call that number. However, others browsers do not see the phone number as a hyperlink, so I can't click on it

Works - Microsoft Edge 41
Works - Microsoft EdgeHTML 16
Broken - Google Chrome Version 78
Broken - Microsoft Edge Version 79

I've tried to change my answer from +49 5251 123456 to the following:

<a href="tel:123-456-7890">123-456-7890</a>
<a rel="nofollow" class="external free" href="tel:+49-30-1234567">tel:+49-30-1234567</a>.

But the answer just looks like as those tags <a></a> are no tags but normal text. (So still not clickable and it looks ugly).

Just out of curiosity I created this HTML by itself which has the same situation for all the browsers above:

<div>+49 5251 123456</div>

Why is this happening? Can I fix it? How can I fix it so the phone numbers are clickable?

Markdown Rendering

The bot service will also render markdown in answers to format text as bold, italics, or links.

So the following examples work

//making headings works with this
await turnContext.SendActivityAsync(MessageFactory.Text("# " + turnContext.Activity.From.Id));
//bold works
await turnContext.SendActivityAsync(MessageFactory.Text("**" + turnContext.Activity.From.Id + "**"));

However, when I try to render telephone numbers using markdown, I still run into issues. Here's what I've tried so far:

await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:123456)"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:+49 5251 123456)"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:+495251123456)"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:05251123456)"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:05251 123456)"));

Which ends up rendering incorrectly like this:

You need to use an anchor with tel:{number here} as the href - developer.mozilla.org/en-US/docs/Web/HTML/Element/a — Pete
works fine for me in chrome and edge: jsfiddle.net/ryan4wtu - do you have anything that can make the calls on the device you are testing it on - if not the obviously nothing will happen — Pete
I assume it has something to do with the Azure WebChat Bot itself. In qnamaker.ai and the web chat window the message looks like this: imgur.com/a/IwVwNz3 - Another thing I noticed is that I can use markdown format in qnamaker.ai like this [example](tel:12345). But in the webchat window I only see "example" which is not clickable. — axbeit
Another thing I noticed: If I write something like this ´**myText**´ myText will be bold in the webchat window. Is there anything other than markdown where text goes bold if between those ´** **´? — axbeit

Migats21 Migats21 · Accepted Answer · 2019-12-06T10:01:13

You should probably show the phone number in seperate elements. When the elements are displayed as an inline block, the webbrowser will not create a hyperlink.

Phone Number not clickable using Azure Bot Framework Web Chat

Setup

Native Browser Detection

Markdown Rendering

2 Answers