ambitious-aqua•15mo ago
How to add a phone number type to Open URL/hyperlink?
If I just use html, I can specify the type of link like this: a href="tel:1234..". But, there is no such option in card or text or even ai.
Is there any easy solution for this?
31 Replies
To add text or a hyperlink in Voiceflow, you can use the Text Markup Editor. Here’s how you can do it:
1. Adding Text Markup:
- Access Text mode by selecting it from the assistant's top menu or using the keyboard shortcut
T.
- Click on the canvas where you want to add your text.
2. Creating a Hyperlink:
- Type the text you want to display as the hyperlink.
- Highlight the text you want to turn into a hyperlink.
- Click the link icon in the Text Markup Editor or use the keyboard shortcut CMD/Ctrl + K.
- Input your desired link and hit enter.
This will create a clickable link in your Voiceflow project.
For more detailed instructions, you can refer to the Voiceflow documentation on Text Markup.ambitious-aquaOP•15mo ago
The bot is answering for something else above @Tico | Voiceflow Assistant
You can create the card using a Custom Action block. 🙂
ambitious-aquaOP•15mo ago
@W. Williams (SFT) , thanks for your comment. I looked at Custom Action but not sure what you mean.
Actually, I found the issue is with Text block. I can create tel: link in path for button and card paths, but it does not look good in terms of style and alignment for long text.
Here is the issue with text block. even when I create tel:link it strip off the tag, while mailto works.
ambitious-aquaOP•15mo ago
ambitious-aquaOP•15mo ago
ambitious-aquaOP•15mo ago
Here is the one I created with card/buttons (fake details). It does not look good.
ambitious-aquaOP•15mo ago
Perhaps, I can build a custom card with code, but it is a bit of hassle...
@KimLooo Perhaps, the team can add the functionality to the text box for tel: link?
ok, just create a card, add a button and then in the URL enter tel:12345...
see if that works. Never tried it but it should work.
ambitious-aquaOP•15mo ago
@W. Williams (SFT) yup, I tried that as in the screenshot above, and it does work But, the styling looks terrible.
I spent some time this evening, I managed to do it with custom Extension and custom action block. But, it is such a hassle. It is no longer no code just to add tel: link... I hope VF will fix this very soon @NiKo | Voiceflow . Anyway, now I know how to create custom extensions, and I achieved the outcome I wanted. So, that is good.
Oh, but extension is somehow limited as I cannot import it into the VF workflow. I can only test it on a site.
absent-sapphire•15mo ago
@nobyf Why don't you just have the buttons saying stuff like, "Email us, Call our Office, call oru mobile, visit us"
and then have it linked to literally call or email them
and have the "visit us" link it to a google maps link
ambitious-aquaOP•15mo ago
Sometimes user wants to see these details without being hidden.
@whipabenz
absent-sapphire•15mo ago
Okay then just have a button for contact information and then when they ask you for particular contact give them only that
ambitious-aquaOP•15mo ago
I have one like that. But for this use case, we need them displayed just like emails.
absent-sapphire•15mo ago
NOT in a carousel/card
Let me show you
absent-sapphire•15mo ago
absent-sapphire•15mo ago
It's just going to look ugly if you try to display that in buttons
use text blocks
Maybe use dynamic buttons if you know how to do that
ambitious-aquaOP•15mo ago
So, you are using text box?
Our email is ..
I am taking about phone numbers.
Can have buttons, etc. But not display the number that is clickable.
I guess we can separate the number to display and button to call, but it is verbose.
It should be simple. Email works, but not phone numbers.
It is a standard html a tag, but not implemented in the vf editor.
absent-sapphire•15mo ago
You mean
you want them to be able to click the number and call?
ambitious-aquaOP•15mo ago
I made custom extension anyway, but lots of work just for that.
Yes
It is a standard behaviour.
absent-sapphire•15mo ago
I see
so you want them to click the link of a number to call
ambitious-aquaOP•15mo ago
Yes
Like you can clock email
Click 🙂
absent-sapphire•15mo ago
Okay
So why don't you just hyperlink it to a link that opens the call app
Let me see if I can find a video for that
ambitious-aquaOP•15mo ago
Ok
It is already hyperlink, no?
absent-sapphire•15mo ago
Just hyperlink it and put tel: +
ambitious-aquaOP•15mo ago
I just need to do tel:12234
Yes
absent-sapphire•15mo ago
that's what should work
ambitious-aquaOP•15mo ago
Nope
absent-sapphire•15mo ago
you never added + before the number
ambitious-aquaOP•15mo ago
Vf editor removes it when render
Ok
Add +?
On the web it works without +
But i have not tried that with vf.
Will try later.
ok, I tried. It is the same. It does not work. VF removes it.
absent-sapphire•15mo ago
👍