Question

我创建了一个Azure QnA网络聊天机器人。

<!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>

这是我的HTML，带有与机器人聊天的窗口。

我的机器人已连接到qnamaker.ai的知识库

我有一个QnA配对：

Question: gimmenumber

Answer: +49 5251 123456

现在是我的问题：

此浏览器：

Microsoft Edge 41.16299.611.0
Microsoft EdgeHTML 16.16299

将数字视为超链接。我可以单击它，然后选择使用Skype（例如）拨打该电话。

例如，像这样的浏览器2：

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

和

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

看不到电话号码超链接。因此，我无法单击它。这些浏览器只是普通文本。

我尝试将答案从+49 5251 123456更改为此<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>。

但是答案似乎就像那些标签<a></a>并不是标签而是正常文本一样。（因此仍然无法点击，而且看起来很丑）。

出于好奇，我创建了以下HTML：

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

所有浏览器的情况相同（适用于1。不适用于2）

为什么会这样？我可以解决吗？我该如何解决，以便单击电话号码？

编辑

我刚刚注意到，电子邮件text@email.de在所有浏览器中都能正常工作。

将鼠标悬停在电子邮件上将显示重定向到mailto:test@email.de。

将鼠标悬停在电话号码上

Microsoft Edge 41.16299.611.0
Microsoft EdgeHTML 16.16299

不显示任何重定向地址。

edit2

我觉得电话号码实际上应该可以点击。也许是浏览器有问题，或者是天蓝色的网络聊天内部有问题？

我已经做过的一些例子：

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

最终看起来像这样：

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

Answer 1

您可能应该在单独的元素中显示电话号码。当元素显示为嵌入式块时，Web浏览器将不会创建超链接。

Answer 2

如果您能够达到<div>+49 5251 123456</div>。您可以尝试添加一个onclick事件和一些CSS，例如下面的代码片段吗？

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

在某些浏览器中无法点击电话号码

2 个答案: