-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Phone number auto detection and rendering as a hyperlink #2780
Comments
Hi @arman-g. If we added auto-detection to WebChat's core logic and did what you suggested, what would the hyperlink link to? Keep in mind the need to support desktop browsers and mobile environments. We have the activity middleware mechanism to allow consumers to consume and render activities in any way they would wish, and as it's designed this would be the way to support what you are looking to do: write your own phone number detection algorithm and run it inside the activity middleware pipeline. |
@cwhitten I was just thinking about using middleware for this. Thanks for confirming it. |
@cwhitten I can't find how to effect the rendering of the message from activity middleware. I don't think it is even possible unless it is just a simple text change. If I change (321) 789-4623 to TS Code:
Edit* |
Web Chat uses the Markdown-it npm package to render markdown into HTML which by default supports the tel protocol. However, Web Chat also uses the sanitize-html npm package to sanitize the resulting HTML from the markdown renderer, and we currently don't have the tel protocol listed as an allowed schema. As a result, the sanitizer removes the link. There are two options to enable the tel protocol in Web Chat and remedy this issue: Option 1Add the tel protocol to the list of allowed schema's const SANITIZE_HTML_OPTIONS = {
...
allowedSchemes: ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel'],
...
};
Option 2Developers can currently pass their own markdown renderer to Web Chat that does not sanitize the HTML. <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/10.0.0/markdown-it.js"></script>
<script>
(async function() {
const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
const { token } = await res.json();
const markdownIt = window.markdownit();
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({ token }),
renderMarkdown: text => markdownIt.render(text)
},
document.getElementById('webchat')
);
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script> ResultBot Framework SDK v4 (Node)context.sendActivity("[(505)503-4455](tel:(505)503-4455)); Screenshots |
@tdurnford thank you for the information. I am using the CDN and not sure if I can add 'tel' to sanitize options. Can this option be added in the next release of the webchat? |
The tel protocol would have to be added to the ‘allowedSchema’ in a PR. @compulim @corinagum @cwhitten Thoughts? |
@tdurnford that makes sense to me - it seems |
Feature Request
Is your feature request related to a problem? Please describe.
Currently webchat does not detect phone numbers in a message and relies on a browser auto detection which might be a browser configuration setting. It also not consistent from browser to browser.
Describe the suggestion or request in detail
A better solution and It will be desired to have auto detection on webchat which will detect a phone number and convert it to a hyperlink.
This could be a setting option giving the developer to control it.
Describe alternatives you have considered
None
[Enhancement]
The text was updated successfully, but these errors were encountered: