Code to make Phone Numbers serve as links

Ask the Community General Questions
1

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
2

Hi @PeterC

insert this Text at the Instructions

Display the phone number as a link

The bot then creates the following link tel:0123xxxx

image
image368Ă—339 14.6 KB

image
image313Ă—182 15.8 KB

Please try it out and let me know if you like the result

4 Likes
4

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
5

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
6

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

2 Likes
7

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
8

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

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

2 Likes
10

Oh, I see, thanks!

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

1 Like
11

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
12

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
13

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
14

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
15

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
16

Works like a charm, thank you :100:

3 Likes
17

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

Hi @PeterC :wave:

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

2 Likes
20

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
21

Amazing!! Well worth the wait :star:

3 Likes