Lessons

Lesson Info

Incorporating Third Party Widgets

What I want to do now is I want to show you how to incorporate some third party widgets. Where to find them, how to pull them down, how to embed them and put them into your sites and some really amazing things. The first thing or the thing we're going to do now is we're going to actually incorporate a third party widget that shows you background video, so how to do that. I've got a site open here, it's a really simple website, it's a responsive site, and I'm going to open up this home page. And what I did was I put a background video on the page. Now you can't tell. You're looking at it going well, where is it? When we work with third party widgets we are actually a lot of times working with a panel on the right called library. So if you open up the, it should be showing on the right by default, but if you open up the library panel you'll see that we can download widgets from third party vendors, some of them are free, some of them are paid, it really depends, there's a whole gamut, I'...

ll show you. And on the right over here we can add them to our sites, to our content, and then what you do is you drag them out on your page wherever you want to use them. So what we can do is if we want to get started with these, if you have a site open, if you open up the library panel with nothing selected in there you're gonna see at the top here it says something like find more library items online. I'll click on that, that little link right there. It'll take me out to the browser and it's gonna take me to this Adobe Muse widget directory page. Now this widget directory, there's a lot. I'm not going to lie to you, there's a whole bunch of stuff going on here. The first thing that I did to be perfectly honest, is I looked at the free stuff just to see if maybe it met my needs. There's a lot of powerful widgets in here, if you need to sell things, social content, whatever it happens to be, there's probably somebody who's created a feature for that. If you come in here you're going to be able to go in and look at, first of all, the type of vendor, there's a lot of vendors that put these in here. We can also go and sort them by newest, by name, and then down here you can say filter based on whatever you want. So if we go in here and we want to look for video for instance, I want to look for tooltip, text, whatever, I'll choose and sort the content based on that. And just take a look in here, I mean it's kind of mind boggling. Forever in a day, we couldn't put a responsive video on the page, okay? Now a lot of people came out with these widgets that you could just download and do it, but we've got a lot of other things we can do as well. So what I want to do is I want to download, I'm gonna show you how it works, and then we'll incorporate that content into a page, now this is gonna be kind of a, it's a simpler one to get started with. But what I want to do is want to sort based on Adobe Widgets. Now like I said, these are free widgets, these are widgets that are a good starting point in some cases. You're going to find that there are a lot of third party vendors that make some amazing widgets out there. But these were created by Adobe along with third party vendors, and these are free, like I said. So if you come out here you're gonna see we've got things like a mobile menu. If you want to sell things we're going to talk about that in a little while. We've got Shopify, Jotform for forms, all kinds of things. I'm going to use this background video widget. So if I click on that you're going to click on one you want to use, it's going to take you to another page and it's going to show you a couple things here. It's going to give you first of all a preview of what this thing does, and that's actually really important because there's 50 different background video widgets in here and if it doesn't do what you want it to do, like some of these video widgets will only incorporate social content like YouTube content, things like that. You have to have it hosted on some kind of social platform. If you want to do your own video, some of these are great for that. So you need to make sure that it's gonna do what you want it to do first of all. If I come in here and click on preview widget, it'll take me to another page that you can then just see what it does, essentially. You can see, there it is right there, it's putting a video in the background. Now I'm gonna go back over, I'll close this page, just a quick peek at what it does. We can click on get this widget. Now I do want to mention this as well, clicking get the widget is great, it's gonna allow you to get it, pull it down, I'll show you how to incorporate it into Muse, it's really easy. But you want to actually in some cases look at the tutorials that come with these or the help because there's not a lot of help in some cases with some of these, you kind of have to figure it out on your own. So if you go to online tutorial I'll click on that. I'll just show you, Adobe actually has a help page for this one, so if you really need to figure out how to work with it you can doing this. This one's pretty straightforward. So I'll choose get this widget, it's just gonna pull it down. Let me go out and grab it and I'll just pull it out to my desktop. Now what this is essentially is this is actually a MULIB. It's a Muse library file, essentially. If you want to use this you can import it into Muse, clicking buttons in the panel, I'll show you that in a second here. You can also double click and it'll put it in Muse for you. I've already done that so I don't want to do it again, but let me go into Muse and I'll show you how you can bring it in there as another method. So I'll go back over to Muse. In the library panel you can see, I've already got it right here. What it's gonna do is it's actually gonna put the background video widget right there. Down at the bottom of the panel you're actually gonna see import Muse library, so that MULIB file, essentially. If you click on that you can go find the file you downloaded and it will just put it into the panel for you. And you can just use it from here on out no matter where you are. So what I'm going to do, I've actually go the final version here, let me go over to my start file that way I have a blank page to start with. I'll open up this home page and I'm going to put the background video here. So if I come to the, actually if you look right here at the widget, you're going to see there's a couple things here that are worth noting. If you click on the actual widget in the library, you're going to see a preview up top which is great, you can search for library items if you want to do that. You'll also notice there's this little button to the right over here, it's kind of hard to see but if you drag the library item in from that button right there, if there are responsive break points in that thing, they're saved in it, they'll actually come into the file you're working on. In some cases that's perfect, that's what you need to do. In this case I'm just going to drag it out here, drop it on the page, and this widget is one where we can't preview or we're not going to preview it right here, so it could make design a little bit more difficult. What you can do is you can actually go to the preview within Muse, the preview window, and just kind of bounce back and forth to test that out if you want to do that. I'm gonna put this up here, let me just put it up in the corner there, and it's gonna be full screen, that's the whole idea here. So I'll click on the widget options here, this is very much like the widgets library panel options that we have, and you're going to see that these are the third party options from the vendor. So we can go in here, we can say where's the YouTube or Vimeo video URL? Like I said, this one using this widget needs to be hosted, okay? So they have a placeholder in there, we can just check it out if we want to do that. I'll put my own in there. So let me go out to YouTube and let me open up my site. I actually have a channel out there, I'm gonna grab a video that I got from it. I'm gonna go to the videos portion. And I've got something I created which is kind of simple. This is actually a little test video. I'm not gonna play it, but this is something I created in Adobe Premier Clip. It doesn't really matter as long as it's hosted on Vimeo or YouTube. I'm gonna go in here and share, and all we need to do is we just need to copy this link, this bit of code here. So let me go back over to Muse after copying that. I'm gonna go back over here to the options and I'm going to paste it in there. And I'm hoping that gives us what we need, alright? Now there are other options we can set if we want to. You're gonna see that we have audio, we can set the volume really low, we can keep it higher, it depends on what it is. In this case it's kind of a background video that I don't really want to have the audio going, so we'll just set the audio volume low. We can go in and do things like HD, you can loop it, have video controls which I'm not going to do, I want this to be in the background, it's just kind of hanging out back there. You can say hide the adverts. You want to do that, especially on social like YouTube and Vimeo, things like that. And then you can even hide the video if you want to for design time, it's up to you, like while we're designing. So I'll just keep that on or off rather, it doesn't matter and test it out. So I'm gonna go out to file and I'll go preview page and browser and you'll take a look. Like I said, it's a video out there and it's just gonna play in the background and you can see my link is not correct. So I'm gonna grab another link here and make sure, hopefully that works. So let me go back over to YouTube real quick. I'm just gonna grab the URL up here. I'm gonna copy that, that's gonna be the easiest way to do it, it's got an HTTPS. I'll go back over to Muse and I'll go back into the widget and I'm just gonna paste that into the URL, these are the options and I'll press enter or return and then I'll go out and test it, give it a chance to kind of catch up, there we go. Come under file, preview page and browser. And you'll notice that when we went out there, when we go out there, I'm not gonna have to set this to be full screen or different things like that. It's just gonna kind of happen. It's gonna run in the background, it's gonna kind of be it's thing and it's also responsive to a certain point here. You've got to be careful when you get to things like mobile though, you'll notice that it's doing the bars there, so it depends on the orientation or the scaling of the video, et cetera. So there is is, that's a background video. Now working with these third party vendors, there are, let me go back over to Muse. There are a ton that you can work with. And as you work with them, as you bring them in here, you can just keep using them, keep building your library. Like I said, some of them are paid, some of them are free, it really depends on what you need to do or what you need to get done. I would try to explore. There's just so many things you can do. Some of the things that I tend to do for most of my Muse sites that are responsive or any other, things like social media, there's a lot of social widgets you can work with. You can pull those in, bring them right into your pages, and just basically hook up what you need. You can also go in and do things like do Google content if you need to for search engine optimization. There's a lot of widgets for things like that. There are load screens, there's just a lot of different things we can work with. But check it out, try it out. It's funny, but in that library panel, we're going to talk about this in just a little while, you don't just have to put these Muse library objects. You can also put other content if you want to, and when we get to working with the creative cloud content, when we work with creative cloud libraries and content for Photoshop and Illustrator, I'll show you that, we'll kind of tuck into that as well. But that's working with some of the widgets that we can adjust.