Extract URL within a text using Regex, and show Link/YouTube Previews

[aphz88]

how about, just like in twitter, when a user posts a text that contains a link to a youtube video, an embedded youtube video displays, or when a link is to a website, the website shows a screenshot of it.

[fayewatson]

Hey @aphz88 I’m pretty sure that you can set the data source of a youtube video player to be an entire link. Then create a conditional statement on a video player which is "When [the dynamic link]'s value contains “www.youtube.com” --> This element is visible.

If you’d like that element to collapse in height, then you would place the player in a group, set the group collapse when not visible, and place the conditional statement on the group, instead of the video. *Set the group/player to not be visible on page load.

Also, please try not to post the same question multiple times to different threads. It is easier to keep everything organized and for people to help with just one thread. Thank you so much!

[aphz88]

thank you so much. this saved me so much angst. i was so stressed out about it.

now i have to figure out how to make it so a link to a page like nytimes, posted in a message/post would lead to a screenshot of it. theres multiple plugins for that but they all have low ratings and im unsure about how to actually implement them into a workflow, and conditions for the text.

[aphz88]

the one issue the video container has is that it wont play youtu.be links, which are the shareable youtube links if you click on share below a youtube video.

i wonder if there is a way to use find&replace to convert a youtu.be to a youtube.com to make the video container recognize it.

[fayewatson]

Aw, glad to hear! It’s no problem at all!

Have looked at this more, and it seems this is possible with :regex and the Coaching Bubble Link Preview plugin. Before starting, make sure to get an API key from the Link Preview site for this as well: https://www.linkpreview.net/)

In your app, if Users type a post such as “Hey! Check out https://www.bubble.is!”, and we want that message to display, as well as a link preview for Bubble, one way to set this up could be:

I set everything visible for this example, but in your app - the yellow and green groups would not be visible on page load, and set to collapse in height when hidden.

To ensure the yellow group is only shown when the extracted link is not empty, and it doesn’t contain a video, we can use this regex pattern below to extract the URL from a string (the string being the Message Text):

(http|ftp|https)://([\w_-]+(?:(?:.[\w_-]+)+))([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?

I found it on StackOverflow here: regex - Regular expression to find URLs within a string - Stack Overflow

And we can set up this conditional statement on the Yellow Group:

• “When Input New Message’s value is not empty” (making sure the Message value is not empty)

• "When Input New Message’s value doesn’t contain “https://www.youtube.com”. (making sure the link is not a youtube link)

• “When Input New Message’s value: extract with Regex: number of Characters: count is not 0” (making sure the URL pulled , is not empty and does contain a link. Not sure if I am doing something wrong here, but I wasn’t able to use “When Input New Message’s value: extract with Regex is empty”, so I used number of characters: count is not 0.

Then the green group uses only becomes visible if the link preview has a youtube video:

The last step is to set up the dynamic data within the yellow and green groups correctly:

For example, for the Link Title you’d select “Get Data From an External API → Link Preview”.

Then adjust the path for that Link Preview so that the path is Message Input value, extracting the URL with Regex again:

(Regex again):

Then you can repeat that dynamic setup for the other elements:

Link Preview Image:

Link Preview Description:

Video (using the Link Preview’s URL as the Video data source):

So in preview mode, I can type a message such as:

And then the Yellow Group will display, with an Image Preview of Bubble:

Then if I delete that and enter a different message containing a Youtube video instead, it will be:

Sorry this was quite long, but I think this should work as expected! Feel free to let me know if anything isn’t clear, or if you have any questions at all

[aphz88]

wow you are a genius. thank you so much. im going to try all of this. im sorry for asking so many questions, i have been working with Bubble for the last 6 months and still feel like a newby. seeing this community be so helpful shows me that people can really care about each other, even complete strangers, especially when it comes to building great things and participating in projects.

[fayewatson]

Thank you so much @aphz88! (though I am definitely no genius, but thank you for the kind words!)

Regex looks really complicated, but generally I just Google “[my question] + stack overflow” which then brings up some pretty helpful threads (if there are no similar threads within the Bubble forum). That’s how I found this all out! I honestly had no idea what Regex even was until very recently, when a fellow Bubbler explained what it could be used for!

Couldn’t agree with you more about the forum, definitely some of the nicest, most generous and helpful people around! Absolutely no way I would know most of what I know about Bubble, without learning from so many other Bubblers’ posts/examples!

P.S. And no worries at all about the questions! I was just referring to reposting the same question more than once previously, but nothing wrong with asking questions here of course!