Phone Number not clickable in some Browsers

问题

I created a Azure QnA Web Chat Bot.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Page Title</title>
        <!-- <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script> -->
        <script src="https://cdn.botframework.com/botframework-webchat/4.6.0/webchat-es5.js"></script>
        <link rel="stylesheet" href="mycss.css">
    </head>
    <body>
        <div id="projekt-window">
            <div id="projekt-chatHeader">
                    <div id="projekt-text">
                        Chat Bot
                    </div>
            </div>
            <div id="projekt-chatView">
            <div id="projekt-webchat" role="main"></div>
            </div>
        </div>
        <script>
         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')
         );
        </script>
    </body>
</html>

This is my HTML with a chat window with the bot.

My bot is connected to a knowledgebase from qnamaker.ai

There I have a QnA Pair:

Question: gimmenumber

Answer: +49 5251 123456

Now my problem:

This Browser:

Microsoft Edge 41.16299.611.0
Microsoft EdgeHTML 16.16299

Sees the number as a hyperlink. I can click on it and choose to call that number with (for example) skype.

But Browsers like these 2 for example:

Google Chrome Version 78.0.3904.108 (Official Build) (64-Bit)

and

Microsoft Edge Version 79.0.309.40 (Official build) beta (64-bit)

Do not see the phone number as a hyperlink. Hence I cannot click on it. It is just normal text for those browsers.

I've tried to change my Answer from +49 5251 123456 to this <a href="tel:123-456-7890">123-456-7890</a> and this <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:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>+49 5251 123456</div>
    </body>
</html>

Same situation for all the browsers (works for 1. Doesnt work for 2)

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

edit

I just noticed that e-mails text@email.de work fine for all browsers.

Hovering over an E-Mail shows a redirect to mailto:test@email.de.

Hovering over a phone number with

Microsoft Edge 41.16299.611.0
Microsoft EdgeHTML 16.16299

doesn't show any redirect adress.

edit2

I feel like the phone numbers should actually be clickable. Maybe something is wrong with the browsers or internally with the azure web chat?

a few examples I have done:

                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)"));

ends up looking like this:

edit3

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

回答1:

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.

来源：https://stackoverflow.com/questions/59196143/phone-number-not-clickable-in-some-browsers

标签

html

azure

chatbot

phone-number

qnamaker