使用 Azure Bot Framework 网络聊天时无法单击电话号码

Question

设置

我在 JavaScript 中使用 QnAMaker、Azure Bot Service 和 Bot Framework Web Chat 客户端创建了一个 Azure QnA 网络聊天机器人。

这是我如何使用 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')
);

我的机器人已连接到来自 QnA Maker 的知识库，该知识库具有如下 QnA 对：

问题：gimmenumber
回答：+49 5251 123456

本机浏览器检测

某些浏览器会将其呈现为可点击的超链接并选择呼叫该号码。但是其他浏览器不把电话号码看成超链接，所以我无法点击

• 作品 - Microsoft Edge 41
• 作品 - Microsoft EdgeHTML 16
• 损坏 - Google Chrome 版本 78
• 损坏 - Microsoft Edge 版本 79

我已尝试将我的答案从 +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，它对上述所有浏览器都有相同的情况：

<div>+49 5251 123456</div>

为什么会这样？我可以修复它吗？如何修复它以便电话号码可以点击？

Markdown 渲染

机器人服务还将在答案中呈现 markdown，以将文本格式化为粗体、斜体或链接。

所以下面的例子有效

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

但是，当我尝试使用 Markdown 呈现电话号码时，我仍然遇到问题。到目前为止，这是我尝试过的：

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

最终会像这样错误地渲染：

Answer 1

如果你能达到<div>+49 5251 123456</div>。你可以尝试添加一个onclick 事件和一些CSS，比如下面的sn-p 代码吗？

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

Answer 2

您可能应该在单独的元素中显示电话号码。当元素显示为内联块时，网络浏览器不会创建超链接。