Learn how to build a UI extension that embeds external websites directly in HubSpot contact records. The tutorial walks through setup in VS Code, using HubSpot developer tools, and customizing contact tabs with an iframe modal to display external content.
Sites into your HubSpot account without having to leave your contact record page. So here, if we just click this button, it'll go over a great new UI extension you can add to your HubSpot account today. UI extensions are currently in public beta, so please join the beta if you want to test out these amazing features. Now, let's check out what's possible with HubSpot development. So here in our account we are on a contact record page and and in the middle pane we have the Overview tab, the Activities tab, and this new custom tab. So inside of this custom tab here is where I have this new UI extension which will display an iframe modal, a great way for you to bring the power of other websites into your HubSpot account without having to leave your contact record page. So here, if we just click this button, it opens up our modal and. And now we are on Wikipedia. And then you can just quickly click the X button and then the modal goes away and it looks like it's built into your HubSpot account. Awesome. So how can we go about building this? Well, let's go ahead and jump into VS code so that we can go through how to make this UI extension for yourself. So now I'm in my VS code and I'm in a folder that already has a HubSpot config YAML file. This YAML file is already connecting me to my HubSpot account and my developer Sandbox account. So we can go ahead and already build our UI extension. And with the quick start guides that HubSpot has available on our GitHub, it's super easy to go ahead and build these really fast without having to write all the code yourself. So what we're going to do is we're just going to put in this into our terminal HS project create and we're going to use the template source and we're doing the display iframe modal, which is what I showed you at the beginning. And then we will run this and it will build out all of the files that we need for our iframe modal to work. So that's awesome. And we have our HS project JSON file here and we have a new feature that everyone needs to be aware of when with platform versioning. And we're on 2023.2. So just make sure that if you download anything from the GitHub repository with the examples that that's updated to 2023.2 and that will help to make sure that Everything that you're doing is up to date. So now that we have this in our account, we now need to CD into that folder that we created. And then inside of our folder we just need to go ahead and run NPM install so that we can go ahead and get those node dependencies that we'll need in order for this to work. So now that we've installed our dependencies, we're going to upload our project to our dev sandbox and I just want to make sure that we're on the correct account so that it goes to our dev sandbox. So I'm just going to go ahead and use HS accounts use and then this will swap me over between my personal account and my dev sandbox account. So now that we are in our dev sandbox and it's really nice because VS code will let you know which one you're in really quickly down here. I really like that. So it's Saying Our default HubSpot account is our dev sandbox. We're going to go ahead and run HS project upload to upload it to our account. And it said that this is not existing yet, so we're going to go ahead and say, yes, we would like to create it and then it will do it and this will automatically build it as well. So it'll go ahead and work in your developer account. So now that that's done, let's hop over to our developer account. So now that I'm in my dev sandbox, it will tell me up at the top you're in dev sandbox, which is a development sandbox account, and then it'll give you a link to go back to your production account. So now we'll just go into contacts and contacts and we'll go to Brian Halligan. And now what we see is unlike in my production account, I don't have that Customs tab. So what you can do is you go ahead and click on the customize tabs button here and then this will open up a place where you can customize the middle column for contact records. So you just click on that default view. And then here, if you want to, you can add a brand new tab here to hold all of your custom ones. Or you can add it to the Overview tab just to make it easy for us to know where these are. I'm going to go ahead and create a custom tab and then I'm going to click the Add cards button here and then you will have to scroll down till you see extension cards and then it'll say the displaying iframe modal. That'll be whatever you name it yourself. So we'll go ahead and click on that and now we'll just click save and exit. And then it will take us back to here. And we're going to refresh our page because you need to refresh in order to see that. And then now we have our custom tab, we can click on this and we have our displaying iframe modal. And if we click the button, just like we saw, we get the Wikipedia page right in our HubSpot account. That's so awesome, y'. All. It's such a powerful tool for you to use and you don't even have to do any coding yourself because we've already done the code for you. So thank you all so much for watching. This is a new form of content I'm working on, so please leave any comments down below and I'm happy to iterate on these videos to make them even better for y'. All. Have a great day and I'll see you all soon. Bye. Bye. Bye.
