使用Azure Bot Framework Web聊天无法单击电话号码 [英] Phone Number not clickable using Azure Bot Framework Web Chat

问题描述

我使用 QnAMaker ，

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

以下是我如何使用HTML + JS初始化机器人的示例:

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

我的机器人已从QnA Maker连接到知识库，该知识库具有 QnA对，如下所示:

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

问题:gimmenumber
答案:[phone]

某些浏览器会将其呈现为可单击的超链接，并选择呼叫该号码.但是，其他浏览器没有将电话号码视为超链接，因此我无法单击它

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
• 已损坏-Google Chrome版本78
• 已损坏-Microsoft Edge版本79

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

我试图将答案从[phone]更改为以下内容:

I've tried to change my answer from [phone] to the following:

• <a href="tel:[phone]">123-456-7890</a>
• <a rel="nofollow" class="external free" href="tel:[phone]">tel:[phone]</a>.

• <a href="tel:[phone]">123-456-7890</a>
• <a rel="nofollow" class="external free" href="tel:[phone]">tel:[phone]</a>.

但是答案就像这些标签<a></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).

出于好奇，我自己创建了此HTML，它对于上述所有浏览器都具有相同的情况:

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

<div>[phone]</div>

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

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

机器人服务还将在标记中提供降价标记，以将文本格式设置为粗体，斜体或链接.

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

因此以下示例有效

//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呈现电话号码时，仍然遇到问题.到目前为止，这是我尝试过的:

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:[phone])"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:[phone])"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:[phone])"));
await turnContext.SendActivityAsync(MessageFactory.Text("[example](tel:[phone])"));

最终会导致这样的错误渲染:

Which ends up rendering incorrectly like this:

推荐答案

如果能够实现<div>[phone]</div>.您可以尝试添加onclick事件和下面的代码段之类的CSS吗?

If you are able to achieve <div>[phone]</div>. Can you try adding an onclick event and some CSS like the code snippet below?

<div onclick="window.open('tel:[phone]', '_self');" style='cursor:pointer'>[phone]</div>

这篇关于使用Azure Bot Framework Web聊天无法单击电话号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！