Code to make Phone Numbers serve as links

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?

2 Likes

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

4 Likes

Hey there, @PeterC :wave:

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 :slightly_smiling_face:

By the way, if you’d like to change the color of the links, this CSS code might be helpful - Change link color

2 Likes

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.

3 Likes

I’ll discuss it with the devs and let you know once they respond :slightly_smiling_face:

2 Likes

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';
  }
}
2 Likes

@Max Crazy, there’s nothing that can’t be done. Instead of blood, you have CSS code in your veins. :flushed: :face_with_peeking_eye:

A valuable combination to archive in CSS/AI chat..

3 Likes

@Max The link is still there, but the text-decoration makes it less obvious.

2 Likes

Oh, I see, thanks!

I’ll discuss with the devs if it’s possible to make the numbers unclickable :slightly_smiling_face:

1 Like

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

2 Likes

Interesting workaround, thanks for sharing!

Let’s wait for the devs response and see how to achieve this without cursor “not allowed” :slightly_smiling_face:

1 Like

this works

@media (min-width: 540px) {
  [class*="widget-window__MessagesContainer-sc"] a[href^="tel:"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
  }
}
4 Likes

What a magic, works perfectly! Thank you so much :heart:

@PeterC Please try to use the code suggested by Sina :slightly_smiling_face:

1 Like

We don’t want to interrupt the devs’ work on the new apps because of a few adjustments.
:grinning_face_with_smiling_eyes: :flexed_biceps:

2 Likes

Works like a charm, thank you :100:

3 Likes

@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?

2 Likes

Hi @PeterC :wave:

I’ll check it with the devs and will get back to you a bit later :slightly_smiling_face:

2 Likes

Hi @PeterC :wave:

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 :slightly_smiling_face:

2 Likes

Amazing!! Well worth the wait :star:

3 Likes