Making links inside text field clickable

Hi, We are building a messaging functionality for our client and we ran into a problem. If a person inputs a link in the message and sends it, then the recipient of the message sees the link as a plain text and needs to copy paste it in the browser. What would be the way to make the links clickable in such messaging?
there is a “extract” operator for text fields, but it works only with email type of links, not URLs. Maybe you could add URL type too?
Or ad an option to make the URLs clickable within the text field?

1 Like

Even if the input is rich text ?

we use multi line input and there is no option to configure it as rich text. as a matter of fact it’s not possible for a standard input either - you can only choose a content type for it (there is email but not URL)

What we use for this is BBcode. But I admit that having users type BBcode isn’t ideal. The rich text input element is probably your best way right now.

1 Like

Yes, Rich Text will format links for you. But they have to input it as a link. It won’t do the auto format thing.

This is a real limitation for a messaging functionality for any app. Rich text input looks very bulky and bbcode is not an option. @emmanuel any chance to implement something more natural?

1 Like

You could extract the urls using blockspring (if it works). But that doesn’t help much.

This part of a wider text extract function, and there must be something that does it already.

This email@here.com and www.google.com and #extract should all be able to be accessed.

1 Like

We have quite a lot on our list right now so I can’t commit on a timeline. However, there is always the option to to sponsor the feature (that’s why we have this process, to let people change the priority list). If it’s for a client that could be a good idea, as there is a budget for it. Reach out if you want to talk about it.

Yes, it’s for a client, I will ask if he’s willing to sponsor it.

I would love to have @mentions, #hashtags, and auto-detected/embedded links. I bet some other folks might agree.

10 Likes

I have the same problem. Cobubble said just a couple days ago that clickable links weren’t viable right now. Which seems weird to me, since that seems to be a pretty basic function.

1 Like

This is definitely something that is essential. I’m onto my second app that requires @ mentions and auto-detected URL’s.

Anyone aware of a crowd-funded campaign going on for this?

2 Likes

any news on that feature? we would be intereste din it too…and willing to contribute to it of course…

Hi Urban, we didn’t get to sponsoring that feature, so it wasn’t implemented. You can reach out to @emmanuel to discuss it and sponsor it if you are interested.

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partnera

http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtonbubble.com - Collection of apps built on Bubble

Can go part of the way with regular expressions putting in rich text links.

Converted the following to clickable links:

Pattern: (\w+\://\S+)

( and ) capture matching text to be used in the $1 in the replacement.
\w+ matches a word of one or more letters.
\: matches a colon.
// matches two slashes.
\S+ matches one or more non-spaces.

Replace with: [u][url=$1]$1[/url][/u]

$1 is the captured expression from above.
The rest is rich text to show as a url. I added [u] underline to make it visible, could also put in colours.

10 Likes

I have sort of got there with creating a little webtask.io that pulls hashtags (or anything else for that matter, it just uses a regex.

However whilst I get a list of hashtags back according to the API Connector…

So …

gives…

… as raw response when using JSON it doesn’t return anything when it is a text.

And if you try to pull it in as JSON you get a very weird error.

So I added a JSON.Stringify to the webtask and I am now returning valid JSON …

Or Parse a Stringified object…

…however Bubble just doesn’t like it.

Actually… if you stringify the JS array, and then pull it into Bubble, you get an array of every letter … which is something we have seen on another thread.

Sorted, needed to format the output in JSON on the node.js side.

A bubble hashtag extractor. Using a couple of lines of javascript to create a node.js API hosted on webtask.io.

Webtask now has an online editor, so you don’t need node locally anymore.

Feel free to use the API.

https://wt-nigel_godfrey-gmail_com-0.run.webtask.io/gethashtag

Single parameter of qtext

1 Like

I’m going to use this, Thanks @NigelG !
Can you help me to achieve the same thing with mentions using @?

Yes, just replace the # with an @ in the

function getHash(qtext) {
var match = qtext.match(/@\S+/g);
return(match)
}

module.exports = function(context, cb) {
cb(null, { hash: getHash(context.query.qtext) });
}

Here is the API. Bear in mind I have a limit of 1 query per second on this, so if you need more you will have to set up your own webtask.

https://wt-nigel_godfrey-gmail_com-0.run.webtask.io/getmenions