5

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:

Example Chatbot Output with tel not working

KyleMit
  • 30,350
  • 66
  • 462
  • 664
axbeit
  • 853
  • 11
  • 35
  • You need to use an anchor with `tel:{number here}` as the href - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a – Pete Dec 05 '19 at 13:26
  • @Pete https://imgur.com/a/d9S6g9j did not work sadly :( – axbeit Dec 05 '19 at 13:36
  • 1
    works fine for me in chrome and edge: https://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 Dec 05 '19 at 15:04
  • 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: https://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 Dec 06 '19 at 09:01
  • 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 Dec 06 '19 at 09:29
  • So it sounds like you narrowed down the problem to an HTML / browser issue, and the chatbot/azure context is not relevant? If so, can you simplify the question? – Bernard Vander Beken Apr 16 '20 at 13:38
  • Here's the officially supported [markdown format reference from QnA Maker](https://learn.microsoft.com/en-us/azure/cognitive-services/qnamaker/reference-markdown-format). Links should definitely work, but it doesn't seem to process non https? URIs – KyleMit Apr 16 '20 at 14:12
  • You have created the following html `
    +49 5251 123456
    `. Can you also add a click event/ class on that HTML?     – AhmerMH Apr 22 '20 at 17:44

2 Answers2

0

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.

Migats21
  • 176
  • 11
  • I have created an example .html only with this in it `
    +49 5251 161920
    `. The number is clickable with Microsoft Edge 41.16299.611.0 Microsoft EdgeHTML 16.16299 but not in the other 2 browsers. Do I have to activly deactivate the inline block for the 2 browsers somehow?     – axbeit Dec 06 '19 at 10:48
0

If you are able to achieve <div>+49 5251 123456</div>. Can you try adding an onclick event and some CSS like the code snippet below?

<div onclick="window.open('tel:+49 5251 123456', '_self');" style='cursor:pointer'>+49 5251 123456</div>
AhmerMH
  • 638
  • 7
  • 18