I am seeking code that will allow phone numbers provided by the chatbot to be clickable links to either text or call. Is this possible?
Hi @PeterC
insert this Text at the Instructions
Display the phone number as a link
The bot then creates the following link tel:0123xxxx
Please try it out and let me know if you like the result
Hey there, @PeterC
Sina is absolutely right, it’s enough to ask the bot in the Instruction to display phone numbers as link. Please try it out and let us know if it worked for you
By the way, if you’d like to change the color of the links, this CSS code might be helpful - Change link color
Sina and Max, thank you! Very helpful. Any suggestions to tell the Chatbot to only link phone numbers for Mobile View? I’ve worded the instructions in many different ways with no success.
I’ll discuss it with the devs and let you know once they respond
Please try to use this code in the Custom CSS field on the General tab of your widget’s settings and let me know if it helped:
@media (min-width: 540px) {
[class*="widget-window__MessagesContainer-sc"] a[href^="tel:"] {
text-decoration: none;
color: inherit !important;
pointer-events: 'none';
}
}
@Max Crazy, there’s nothing that can’t be done. Instead of blood, you have CSS code in your veins.
A valuable combination to archive in CSS/AI chat..
@Max The link is still there, but the text-decoration makes it less obvious.
Oh, I see, thanks!
I’ll discuss with the devs if it’s possible to make the numbers unclickable
hmmm. perhaps ??
pointer-events: 'none' !important;
not work with :hover
@media (min-width: 540px) {
[class*="widget-window__MessagesContainer-sc"] a[href^="tel:"] {
text-decoration: none;
color: inherit !important;
pointer-events: 'none' !important;
}
[class*="widget-window__MessagesContainer-sc"] a[href^="tel:"]:hover {
cursor: not-allowed;
}
}
cursor: not-allowed; is not exactly elegant
Interesting workaround, thanks for sharing!
Let’s wait for the devs response and see how to achieve this without cursor “not allowed”
this works
@media (min-width: 540px) {
[class*="widget-window__MessagesContainer-sc"] a[href^="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
}
What a magic, works perfectly! Thank you so much
@PeterC Please try to use the code suggested by Sina
We don’t want to interrupt the devs’ work on the new apps because of a few adjustments.
Works like a charm, thank you
@Max We are integrating the phone number 854-223-9313 as an SMS Text option customers. It is displaying as a link in our Chatbot, but it redirects to our homepage. Is there JS code available to redirect the user to text this number?
Hi @PeterC
I’ll check it with the devs and will get back to you a bit later
Hi @PeterC
Thank you for waiting!
Now, the phone number can be displayed as a link and redirect to the SMS messenger. For this, use the link in this format <a href="sms:8542239313">854-223-9313</a>
Check it out and let me know if it helped
Amazing!! Well worth the wait