Brooke from HubSpot Academy shows how to add UI extensions to your CRM preview panel. You can edit cards, code and deploy extensions, and customize views for different teams to work faster.
Hey, y', all, It's Brooke with HubSpot Academy. Today I've got an exciting new update on our UI extensions. Previously, UI Extensions only lived on the Record page in either the middle panel or the right sidebar. Now you can add these useful extensions to the preview panel of your CRM objects. This lets your HubSpot users interact with the UI extension and in multiple places. Let's check out all the new places where you can see your UI extensions. So first I'm on our Contacts Record page that shows all of our records within our HubSpot account. To preview a contact record, you just hover over the record and click the Preview button and it'll come up in the right sidebar. And then you'll see here that you have our deal Summaries card. So to update what shows up within this preview sidebar, you're just going to click on the Gear icon and this takes you to the Edit Card section. Here you can change which properties show up in the About Card section. We're just going to keep that as is. We click Save. And then here is where you can add, edit and reorder your preview cards. So you can click Add Cards. And now you have access to all of the different card types and you can change them around. So. So only the ones that you want to show up on the preview sidebar are going to show up. And we have our Extensions card here. And so when you like what you see, you can go ahead and click Save and Exit. So let's take a look at how to use it on the company's Record page. So let's say you're on a company page and you see all of the contacts that are here listed that are connected to this company. You can go ahead and click Preview when you hover over a contact that's associated with this company and it'll bring up that panel again and your extension card will be right there available on the company's page so they don't have to go to the Contact Record page to see this UI extension. Finally, you can use this when you're looking at lists. So in your list, if you hover over a user and and click the Preview button again, it brings up that Preview sidebar and you see your UI extension. That's so great. Now let's jump into the code to see how we make this happen. Now we're in my VS code, which I've already set up with my HubSpot config YAML file that connects my VS code to my HubSpot account for this UI extension, I went ahead and used one of our UI extensions examples, that Deals Summary card. So all I have to do to go ahead and download this is run the HS Project Create CLI command and then use the template source. And you can find that on our GitHub repository, which is linked down below. And once that is built, you see that we've already have all of our files that we need. So we're going to CD into our Deals Summary folder and then we're going to run NPM Install just to install any dependencies that we need for this to work. Now that all of our dependencies are downloaded, we're going to go into our folder, we're going to go into Source and then into Extensions, and then we're going to go into our Deals Summary Example JSON file. This file has all of the information for our CRM card, including the location section, which is what we're going to change. Right now it reads CRM Record tab. We need to change it to just CRM Preview and go ahead and save that. And now that we've changed that location, it's going to show up in our Preview sidebar. And now we just have to use HS Project upload to go ahead and upload this to our HubSpot account. We're going to say, yes, we want to build it, and then once we do that, it will build and deploy it to our account. Now that it's deployed, let's go back to our HubSpot account. In our HubSpot account, I'm going to go to my CRM development in the main navigation and then click on Projects and then we should see our deal summary here. And it's deployed. Now I'm going to show you how to go ahead and customize that preview sidebar in the top navigation, clicking on the Settings icon. Then you're going to scroll down to Data Management and click on Objects and then click on Contacts. And then you're going to click on the tab called Preview Customization. Here you can create different team views. So if you want it to be different for your marketing, sales and service teams, you can create different team views and you can also update the default view for everyone. So I'm going to go ahead and click on the default view and then we're back at that page that you saw earlier. So we're going to go ahead and click Add those cards again. Click on the extension card type, check the checkbox beside the Deal Summary example card. Close this. And then there's so many different cards, so we're going to just make it easier to find by taking it all the way up to the top of the Preview sidebar and then click Save and Exit. And then once again, we're going to return to our Contact Records page by clicking on CRM in the main navigation and then Contacts. And then when we're here, hover over any of your contacts and click Preview. And that's all you have to do to get your UI extension in multiple different places in your CRM, making your users more efficient in getting tasks done. Thanks for watching. Make sure to check out the Resources section to learn more like and subscribe to the HubSpot Developers YouTube channel. And I'll see you all in another video. Bye bye Bye.
