Leveraging iFrames in Empath

Hey there, my Pack-a-Derm Posse! It's me, Dean, Head of MSP Success here at Empath, to talk about some new ways that you can leverage our platform to benefit your MSP. Before we get into that, I do want to address two things because you're in the channel and you notice these things. The first one is Why am I wearing this ridiculous '80s getup? It's not because I always dress like— well, I do always dress like this, but it's because I was just recording some promo clips for an upcoming show that I am producing for Empath called Managing Up. And the other thing I wanted to talk about is my lingering Chrome needs an update over here. I know I'm a bad employee. I'm uploading something to Box in the other screen. Please don't cancel me for not having an up-to-date Chrome. I understand zero days and all that. All right, so today we're going to talk about one of our features that many of you have used, but an element to it that you might not have thought about how to use best. And that's our Lesson Text Editor. As we get into this, I want to highlight, as I always do, I am using Chrome and I do have extensions in Chrome. And amongst my extensions in Chrome, I have Privacy Badger and uBlock Origin, both of which disable tracking cookies. So please make sure on your browser you don't have any tracking cookie blockers running on Empath, or you've whitelisted us. Okay, so with that, let's get into it. So as you can see, here is our beautiful new UI from our main dashboard. This is a teaser of what we're going to be rolling out to the rest of the platform. If you like it, you're going to have to wait, and if you don't like it, well, tough luck. There is a button to toggle dark mode to light mode. So if you are one of those people that absolutely likes having your eyeballs burned out of your skull, you could do that. I don't know why you would, but we're going to keep it in dark mode. So from that, let's talk about iframes in a text lesson. I'm going to navigate over to something I prepared ahead of time. I'm going to go to the courses in our infamous demo tenant that, as I say every time, is famously full of nonsense. And I am going to look for the DNS course I have used in other videos. And let's see, it's going to load up here and you'll see hopefully a familiar site, this simple DNS course consisting of a Network Chuck video on DNS, which is a great YouTube channel, a quiz, which I failed, that I demonstrated on a previous video, And you notice there's a new lesson today asking me to practice with MX Toolbox. So let's check this out for a minute. So an employee that comes in and goes to watch this course and watch Network Chuck teach them about DNS, as they get through this and read the instructions and whatnot, they'll move on to the quiz. As they— in this case, I'd have to retake the quiz because I'm terrible. As they go through all those things, the next lesson that they're prompted with is down here, MX Toolbox Practice. And I apologize if my little bubble is blocking. Let me move me out of the way. Look at that, MX Toolbox Practice. When I click on this, that opens up a text-based lesson that I have used an iframe to embed an instance of the DNS lookup tool from MX Toolbox. This is live right here, completely live data. If I put in empathmsp, hit DNS lookup, you can see our A records and a little bit of other information about us as anyone will be able to see on MX Toolbox. You can see below I put in some instructions here for an employee to log into MX Toolbox and practice looking up different types of DNS TXT records. Now, this is all very generic, but the point is this is basically a tiny little lab I've built in Empath just using the text editor and the iframes. You can go in and click the full screen button, and now it will present and render the MX Toolbox website in full screen. And you can see the way I did it, you've removed the bar or the header on MX Toolbox. Of course, anyone who's familiar knows we can use this to get to different tools in here, but to the average employee coming in, they're presented with exactly what it is I want them to use. So of course, this is a fairly limited way to use the iframe. I want to show you how I got here, how we built this, and use it to build something that I know a lot of you are asking for and would really appreciate. A common request that I get on my strategy calls is, do you have an integration with? And oftentimes the answer is not yet, or unfortunately no, or it's on the roadmap. And there's a variety of reasons for that. And go pester your vendors if you want them to integrate with us faster. But a large part of it is we are ultimately Switzerland. There are so many different ways that vendors make their training content, and to get every single one of them to integrate with us in the time frame that we want is going to take a while. So we need some compromises. As we've talked about before, you can certainly use the YouTube importer to import a video, or you you can go and if you have the ability within the terms of service of your vendor to download their videos, upload them manually. But well, I went to school for engineering and one of the things they teach us is to be smart and lazy and who has time for that? So I want to show you how to use the iFraming to get around sometimes a lack of a direct integration. What I'm going to go ahead and do is I'm going to pop over to our content admin screen. So I'm going to click on my profile here. You need the content admin role to do this. I'm going to go here to content admin, and I've already done this ahead of time. I've selected the DNS course from my content admin screen under the courses tab, and now I'm in edit mode where I can of course go in and edit everything, the graphics, the text, and the content. As I scroll down, we see the YouTube imported Network Chalk video, the quiz we've talked about before, and the MX Toolbox practice. Lesson that I just added. Well, let me go through how you would add another lesson here to give you some ideas. So we're going to go and add something that— a tool that I know a lot of you use. I would go so far as to say it may be one of the most cherished, most well-liked tools in the entire MSP space, regardless of your loyalties or product ecosystem. And of course, what am I talking about? I'm talking about good old ScreenConnect, our favorite remote connection tool. But we run into a problem. There's not a lot of official ScreenConnect training exposed to YouTube, and ConnectWise University, for the most part, the actual trainings are locked behind an iframe blocker, which I'll talk about more a little bit later on in this video. So we can't just go and embed regular ConnectWise University. What do we do? Well, Luckily for you, ConnectWise University and a lot of other vendors do have a documentation section. You'll notice in the URL here, it's docs.connectwise, not the normal University header, and there is no frame blocker on this. And as I go and look into the ScreenConnect documentation and poke around, they've already done the needful for me. There is a Getting Started section. If I click in that Getting Started section, well, what's this? A remote support guide. How to create a one-time connection to a machine. Quite possibly the most basic thing that a new MSP employee has to learn really on any remote tool, but likely ScreenConnect, because who hates ScreenConnect? Literally none of you hate ScreenConnect. I know you don't all use it, but go find me somebody that hates it. They don't exist. It's that good. So we go in here and we click on their remote support guide and we're presented with something that's actually pretty great. It is a whole step-by-step guide with some hidden, not exposed to the internet YouTube videos, which yes, my enterprising viewers, you absolutely could pull the link out for this YouTube video and embed it directly, but somebody's gone through and put screenshots, instructions, the video, kind of everything you need to teach somebody the basics here, and then tells them what to do next. This is really not too bad if you're using ScreenConnect, but I don't want to recreate this. You don't want to recreate this. And in the past, we've just simply linked to it. Let me show what we can do. We're going to grab the entirety of the URL to this exact page here, and we're going to go give that the good old-fashioned Ctrl+C. If you're on a Mac, what is that, Command+C? We're going to save that URL. We're going to come back over to Empath to this edit course screen, and we're going to go to add content, lessons, and we're going to create a new lesson. Now we're in this lesson, and we're going to go over here to add text. When I go to add text, in the past, I might have told you before we added our iframe feature just to paste the link here and to put some instructions in that explain to the employee exactly what you expected from them. So in the past, we would have had something like this, just the link and then some instructions, maybe asking the employee to click the link and to go ahead and Watch the content, follow the examples, and test it out. This is perfectly adequate and it works okay, but it could be better. So now we're going to improve. We're going to take this link and this little globe icon you have in the text editor screen here. We're going to go ahead and drop that link in right there into that iframe embed area and hit save. We're going to specify the duration in seconds. I think this should take somebody a little bit of time to get through. I don't want them flying through this in 15 seconds. And now suddenly I have an iframe in here that embeds that entire document in the lesson. I'm going to take the instructions I wrote, and please write better instructions than I did, put it into the description. I'm going to give it a title, ScreenConnect Ad Hoc Session Lesson. Perfect. That is for a beginner. Nothing else I want to tweak right now. This looks good to me. I'm going to go up here and hit Create Lesson. That's now created a ScreenConnect Ad Hoc Session lesson within my course. I got to remember to save my course. I'm going to do that. And then if I pop on back over to regular old-fashioned Empath, go back to the dashboard where I have the courses, go ahead and type courses. I'm going to type in my DNS course here, which now should be updated. With my new ScreenConnect lesson. Well, let's see what that looks like. I click on this. This is what an employee would be seeing. And now I have this lesson that's telling me to log in and follow the examples. Fair enough. And I have ScreenConnect right in front of me. It's pretty cool. If I hit that button, I now have this ConnectWise University support guide right in front of my employee within Empath. Tracking the time that they're in here. I can even go ahead and watch the video ConnectWise has put in within this iframe, follow all the instructions, and get a great idea of exactly how I should be using the ad hoc session connector in ScreenConnect. All done for me simply by embedding an iframe. It is in fact that simple. Now, this is not perfect. There are going to be websites that this just does not work for. And I want to show you how that happens. And I also want to explain that just because you've iframed a website does not mean that this is a supplement for how you do it at your MSP. It is still going to be helpful for you to link in your own SOP or guidelines or even make a short video that gives me some context on exactly how it is we use a tool like this at our MSP. I don't want to rely only on the vendor documentation for that, but let's go look at exactly how this might not work right for us. If I pop back over into the edit mode, pull up my DNS course, and I come back down here and I go to add another lesson in here, I'm going to create a new lesson and I'm going to pick another really common tool that a lot of us use. Good old Wireshark, an excellent tool, not even an MSP tool for scanning a network and getting an idea of what's going on. Wireshark has great documentation section on their website with a bunch of useful and helpful information. And look at this, a masterclass on Wireshark as a YouTube video, which you could directly import, dramatic foreshadowing people, but we're not doing that today. Instead, we got all this documentation here. Let's go to this user's guide. And I'm going to want an employee maybe to go through this in Empath for some reason. I mean, I think that's quite a bit, but for the sake of demonstration, there you go. Wireshark.org. I got the URL and I want this in an iframe. I'm going to do what we did before. I'm going to copy that. I'm going to come back over to Empath, add text. I'm going to go up here. I'm going to pop it in and look what happens when I pop that in. It refused to connect. If I hit save, And we'll do the same thing we did before. It won't load. What's up with that? Why won't it load? Why is it refusing to connect? That's because Wireshark has something going on on their website. What's going on on their website? They have frame blockers in the header in some JavaScript. This is basically a bit of dynamic code that sits in a JavaScript that sits in the header of the website that says if somebody tries to render me as an iframe, don't let them do it. There's a variety of reasons this could happen, and we have no control over it. Only the original web developer can change this. And many of the reasons there are frame blockers are totally legitimate. So you could run into a situation where a website will not render. Remember a few things. This is based on the domain that you were on. So if there are subdomains, they may not be frame blocked, and there is no real way to get around a frame blocker, unfortunately, at least not that I'm aware of. So iframe option in MPATH is not going to be the perfect solution for every website, but I do encourage you to give it a shot. Remember, we're going to create a lesson. We're going to add text. We're going to come to the globe and we're going to put the address of the website we want to render as an iframe into this box. I always also advise you add some instructions that let somebody know just exactly what they're supposed to do here. So they're not looking at a random website and Don't forget underneath to manually specify about how long you think they ought to spend on this so that the course gets updated properly. And that timer here, for example, when I made the ScreenConnect one, when I put in 1,000 seconds, that's why this says it should take about 16 minutes. Otherwise it would say it should take 9 seconds 'cause I have 1 or 2 lines of text. Do make sure you update that last bit. If you have any questions about how to use this, when you're inside Empath, there is a little chat bubble down here. Go ahead and click that, type out your question. This is not an AI. It is actually our team that answers you. We'll do our very best. And as always, if you'd like to book a session with me for help on any of this, please grab my link, which will be distributed with this video. And I am happy to get on with you and help you out, help you try building this out. Iframes are a really cool way to integrate other vendor platforms we don't have a direct integration with, or render really any webpage that doesn't have a frame blocker inside a lesson for your team. I encourage you to go out and experiment and have fun. And as always, keep learning, my friend.