Embedding link previews in Weweb using Iframely

So, you know how like when you put a link into say Discord or your Slack or into certain forums, you often see the link expand in sort of like more of a rich preview, kind of like I've got over here on the state change where, you know, I have this thing where I was doing a talk that I gave over at YouTube and I just put in the link and then it expands it into this preview. This is not code I had to copy and paste. I just put in the URL. And it's smart enough to figure out, oh wait, this is how it actually works, right? And then like somebody else has another video, it automatically loads this stuff in, doesn't require me to do special things. So the way that these systems work with that is by using a third-party service like say Embedly or iFrame.ly, which will, which takes those URLs and creates the HTML for what's called an oEmbed. Which is a standard for how to embed those kinds of previews of third-party content into your site just by generating a little bit of interesting HTML. So this is the iFrame.ly homepage and they describe how their stuff works and it's relatively straightforward. You just have a nice simple API where you provide them with a URL like, you know, what, you know, what video it is you want to have the preview of, et cetera. And then you can, you know, they have both a declarative API, which allows you just to use, you know, set up your HTML a certain way to automatically detect this stuff, as well as an imperative API, which allows you to call, uh, the, you know, call the iFrame.ly service and say, hey, I've got this URL, and it comes back with, here is your HTML for what you need to actually embed, and it just works. So this is actually kind of an awesome opportunity to be linking stuff into WeWeb so you can get dynamic previews of content or links that people might be connecting into your system. So let's go back over to WeWeb and we will create a new project. And here's my project and create blank project. And I'll call it, you know, Frame Rate Test. And we'll create it. That way we have a nice blank canvas. I like to do that for the purpose of these demonstrations, just so that we understand what all the moving pieces are. For this, we're going to need to have a place we're going to put a, you know, where are we going to put the text, huh? And this will be, we'll say this is gonna be the link, a preview for, right? And then that's what this guy's going to be. And then we're going to also have a button so that after we've changed this, we can be triggering, let's get ourselves whatever we need from iFrame.ly. And for that, we're going to add another plus and I'm going to give me a button. All right, here's a button. Iframe.ly. Now, the, this button is then going to need to update a, a variable, right? And so let's, you know, create a variable in WeWeb. We're gonna say here's a variable, we're gonna say add a variable and call it oEmbed just to make it easy to work with. And the type is going to be a type of object because the data that we're going to get back from from iframe.ly is going to be, you know, not only just HTML, but also various metadata that's gonna be interesting. We'll get there in just a second. So we'll create that. And now we have a variable that's sitting inside WeWeb. And the purpose here is we're going to go from the link that we type into here, we're going to get it from iframe.ly, and then it's gonna dump things into a variable. And then we're going to have one more item here, which is we need to have a place to store the data we're getting from Embedly. And the different from my_frameley. And the way that we're going to do that is by saying what we want is an embed, right? And here's an embed. And the embed is a way in WeWeb to get arbitrary HTML onto your page. Now it's a little bit of a pain to work with because you have to say what all the HTML is you're going to bind in and generate it all. But this is actually going to be relatively easy for us to do because the HTML we're going to create is going to be whatever the HTML we get back from iFrame.ly is using their API. So let's step back to iFrame.ly and talk about how we do that. So here's iFrame.ly and you can sign up. They have a relatively generous free tier that you can use to start the pilot and the, they don't like you to log in too fast and they give you an API key and here's the API key. I'm going to rotate the API key after I record this video so no, worry about the security on that front. Now, the way that you communicate with iFrame.ly has a couple different ways of going. You can set up, you know, an HTML approach, or you can just be going to their APIs. And so if I go into their docs here, you know, they will explain how to get data from their APIs. And what they'll do is send back data that follows something called the oEmbed spec. And that's gonna be largely what we are going to use using this Embed.js. And so we're going to, let's get the data, we're going to get it asynchronously and we're going to get it by calling, by calling the OEmbed API. We're going to get some data, we're gonna pass the API key and it's gonna provide us with an object of data that comes back. Well, which will look a little bit something like this. Which will say, hey, what kind of data is coming back, how large it's supposed to be, and also what the HTML is. And then we will just inject that HTML onto our page so that we can get this nice preview based on whatever the link was. It'll be pretty slick. So let's go back over to here and say, well, if what our job is, is to go talk to the, go talk to iframe.ly, then we need to go set up a web request that's gonna happen when we push the button. Now, the, the better WeWeb way of doing this is going to be using WeWeb collections. Because that, what we should be doing is like calling a backend, like a Xano backend or something, and then have that turn around to make a call to, to iFrame.ly so that the data is, so that the API key isn't being exposed to the front-end user. But I'm going to sort of shortcut that just for the purpose of the ticker demo. So the better way to do this for collections, I'm going to show you a slightly more low-code and less secure way of doing it. Just to get us going so you can see what the inputs and outputs are from, from iFrame.ly. So this button here, this get from iFrame.ly, this is really the linchpin of it all. And we're going to need to add a workflow that happens when we click it. And we're going to, at this point, you know, ordinarily you probably run fetch a collection because that's gonna be the way you get the data, you know, from your backend. But I'm going to shortcut it by doing a little bit of custom JavaScript here. And we're going to use a command called fetch. And I'm going to say, you know, const response equals await fetch. And this is going to be where I'm going to need to know the URL of whatever this endpoint is. Uh-huh. I don't quite need all of this, right? Right. So embed, cool. Copy that. And, and then I put this in quotation marks and paste. HPS iframe API oEmbed. Great, and now we're going to say question mark because there are two things we're going to need outta this. We're going to need to know what the URL is and we're going to need to know what the API key is. So let's add those to the URL. And the way we'll do that is by saying, you know, URL equals, and now URLs embedded inside URLs need just a little bit of help. So we need to use a function called encode_uri_component that will basically turn all the slashes into like percent character stuff. That just allows you to store one thing within the other. And this is going to be, and what we're going to put into there is going to be the variable, which is from the answer, right? Which is from that, from that input that we created. So it's gonna pull data from the answer value and then it's going to, so that's the URL part. And then we're going to say question mark ampersand, API key, key equals, I feel like I'm missing a parenthesis or something along the lines in here, but it doesn't appear to be. It looks like await fetch plus encode API endpoint. Good. Plus ampersand API key equals, and now we're going to copy the API key that I have in my, here. So let's go back to my account. My account has my API key access and copy that key and by pressing the copy key or copy button there and go back over to here and say paste. And then I can close up my string here and this whole thing together is my dynamically built string that goes to iFrame.ly is pulling the, from the, you know, text component. And then that's the whole, that's the whole thing. So now we're going to wait for that fetch to happen. And then whenever you're using the browser version of fetch, first thing you need to do is wait for the fetch to come back and then separately you need to wait for all the data from the fetch to come back. It can seem weird, there's a two-step process, but it is, there are good reasons for that, but nothing's terribly convenient here. So what we're going to say is we're gonna say const JSON equals await response.JSON. So if you take nothing else from this video, this is a really useful trick to understand how to do a fetch from a URL and then know that subsequent to that, you await the response and convert that into, you can do response.text or response.JSON, a couple other ways of doing it. But the, but most commonly you're gonna be doing something like response.JSON and then we can say return and this is important so we get access to it from the step. Return JSON. Cool. So let's, that will be part 1 of this process and we'll close it up. And then part 2 of that process is we need to update a variable. So we're going to do, do, do, do, do, we're going to set a variable. And where did that guy go? Not return one. Change page, change variable value. There we go. So here we're going to say the choose variable, the variable we're going to choose is the oEmbed and the value is just gonna be whatever we got from the previous step. So I use Lightning Bolt and I can just say from action 1, the result. Now keep in mind that's currently undefined, so it's not super, super, super exciting. And at this point we might ask, well, what do we get? So we can run this test and they'll say it requires URL input. And the reason it's saying that is because if I were to close this up, you can see there's nothing in the placeholder. So if we just go to play for a second and I say, yeah, state change AI, I can say get from iFrame link. And of course it's not going to show me very much right now. So if I go over to the cans up here, I can take a look at my oEmbed and you can see how it currently has some data here, right? And you can see the data it has is sort of not rendering all that nicely, but the, but it has the HTML, it has how big and wide it thinks the thumbnail's going to be, et cetera. So what can we do with that? What we can do is take this HTML and put it into this, which is the big HTML component that we want to be putting our embed. So let's work with that for a second. So now we're going to go back into the Get from iFrame.ly. We're going to, you know, edit the HTML and the settings. We're going to click the HTML here and we're just going to bind it to the HTML from what we got from Embed. Hey, look, it's already there. Let's take a look at that for a second. So this is all quite large., and if I were to simply go back over to here, okay, that's for StateChangeAI. What if I took the StateChange YouTube channel? I copy that and I paste that into WeWeb and get that from my frame. Like, oh, look at that. And now what if I were to take, you know, StateChange Pro part, copy that, and I put that into WeWeb. Uh, it's not that exciting. Circle is the service that we use on top of all this. And what if I said, you know, weweb.io? I get that from iframe.ly and now it's getting that from weweb. You'll notice I didn't even have to put in the HTTPS for that part to work. And that's kind of the long and the short of it. You know, there's a lot more you can do with iframe.ly and of course weweb as well. I mean, one, you should probably be using the collections approach, not my sort of quick hack, although I hope that quick hack for doing the network call is helpful for you in the future. You can definitely check out more about how iFrame.ly does its work. The most straightforward and simple way to do it is using the oEmbed API endpoint. If you're using WeWeb, you probably have enough control of your page, you don't necessarily need the iframe endpoint, but you can, you know, check that out too. And then the way things get a little bit fancier here is gonna be when you use their Embed.js. Their Embed.js works basically the way that you see in, you know, again, like in the Slack or Discord, some of the forums you see where it's, it's detecting on the page where there are URLs and then either replacing those URLs or augmenting them with, uh, with these little previews. And for that, you can drop a little bit of a script tag onto your page and make all that work. That of course is, uh, not as controlled an experience, right? As it is to say, well, I know what the URL is. I'm going to go ask, uh, iFrame.ly for it. And then I'm going to put the preview onto the page that allows you to control the entirety of the user experience. But this other one can be fast, particularly if you're going to have multiple URLs in the sort of that forum or chat style use this case. I hope you found this to be interesting and useful. We work on hard problems like these kinds of integrations all day long over at StateChange, where we focus on the hardest 5%. We have office hours every business day, as well as doing deep dives and examinations of the mental model that allows us to become more successful technologists. Hope to get to see you again in the near future, and I look forward to learning with you.