Best practice for adding an element that previews/unfurls a url?

App Building
,
1

Use-case: an internal app where users submit specific urls/links with a Button click and a "thumbnail" displays in the UI with data generated from that url

Disclaimer: I am incredibly new to Retool and am maybe a js novice/intermediate(?) user, so Im trying to start with the use-case and understand ways to approach implementing this.

From what I google around, it seems like Retool does not have a "component-ized" approach for this, and I should consider using a library like this? unfurl.js

Would love any other pointers or suggestions?

2

Hello! I think an iFrame might be what you're looking for! Though, it may not work for all URLs:

https://retool.com/components/iframe


Also, here are our docs on how to use custom JS libraries.\

https://docs.retool.com/docs/custom-js-code#custom-javascript-libraries--npm-modules

Another option would be using a custom component, but there's definitely more JS involved with that! If you need to go this route, I would recommend writing into support for help. :smile:

1 Like
3

thanks @jSims, that's definitely a creative answer I hadn't considered!

Unfortunately, i tried embedding an "embeddable" youtube video link (which is the "preview link" Im largely targeting here) and it just is a blank/black screen which suggests it's not quite there.

I'm thinking now I'll likely create my own little backend service to retrieve the data from the inputted link (ideally this http service/query is triggered on a "change" event capture from the inputText field) and then custom code that formats the data into a component - with that context:

  1. should I use a custom component or just write some code that turns the JSON into a formatted HTML snippet and return that into a retool HTML element?
  2. or should I just do a straight up custom component?

Of course, feel free to suggest an alternative approach :slight_smile:

4

Hmm...do you see any errors in the browser console when the embedded YouTube link doesn't work? Also, if you're interested in displaying videos/YouTube links the video component might be the way to go!

I don't thiiink a custom component would be necessary. But, would depend on exactly what you're going for. Would you be able to write into support using the chat icon on the bottom right and perhaps we can step into your app? Or you could also share a JSON export of what you have so far. :smile:

1 Like