The PB&J of CRM customization: React based Custom cards

Sam Sat to the developer HubSpot user group. And today we will talk about the.

Peanut butter in jelly of CRM customization. React based custom cards and THUN will.

Take over with the agenda.

Hi everyone, I'm Dan Ritter, lead developer at Bright Digital and I am incredibly excited to announce the following industry experts who will be presenting presenting during the second D Hog webinar. Now to start we have John McLaren, Senior Developer Advocate at HubSpot, who will give us an amazing introduction to React. After that we have Tamara Yu, staff technical lead at HubSpot, who will show us how you can start building UI extensions with React. And if that isn't enough, we also have Justin Givens, Director of possibilities at Imagine in the box, and Carter McKay, lead developer at Pivot Global, who will introduce you to the brand new CRM Customization Bootcamp where you can guess what learn about CRM development. Don't worry, we got some examples coming as well as we have Mark Raiba, Director of technology at Aptitude 8, who is going to show us some amazing use cases for CRM cards. Now to top it all off, we have Sejal Parikh, product manager at HubSpot and the face behind UI Extensions, who will discuss what the future will hold for for CRM customization. And maybe, just maybe, we have just enough time for a little Q and A. Now, to start it all off, let's go to John McLaren with an introduction to React.

So today we're going to talk about React, how to think about it conceptually, ways you can use it in HubSpot, and how to learn quickly in general. I'm John McLaren, Senior Developer Advocate at HubSpot, and learning complex technical stuff quickly is a huge part of my job. I need to be able to learn to the point of being able to teach to others in a short amount of time. So today we're going to be doing an introduction to React, but we're going to try and practice some of the tricks that I use to learn things quickly so that you can apply the ones that work for you. Sorry about that. If you were like me, the notification sound was triggering. First, speed learning tip. You have to dedicate time and prevent distractions. This might feel obvious, but if you're planning on trying to work while attending this hug, I have tough news for you. Your brain literally can't multitask. The human brain only has the ability to switch between focusing on one task at a time and us humans are really inefficient at it. So turn on, do not disturb and close anything that might distract you. If you get a notification, I want you to look at it without clicking it and opening the app. Ask yourself this question. Will someone die or be seriously, physically or emotionally armed if you were to respond or address it 15 minutes from now instead of right now? If yes, I hope things are okay and there will be a recording on YouTube. See you later. If you answered no, then ignore it and come back to it 15 minutes later. And if you get anxious, like you have a desire to check your phone or see your notifications, grab something to fidget with or take some notes. All right, before we get into what React is, you need a reason to care. Something motivating you. Why learn it? Having actual REACT skills will make you more competitive when you're looking for a job, and React skills make you more valuable in your current job. And I know in the HubSpot sphere there are still agencies using jQuery heavily. According to the State of JavaScript survey, of the people who responded to what other tools do you use? Only 1.9% say they still use jQuery. This makes sense because most of what jQuery was great for got baked right into JavaScript itself. And for more complicated user interfaces, typically a reactive framework like React, vue, svelte, angular, etc. Is easier to work with. React can make you more efficient and make it easier to build complex interactive interfaces for displaying and manipulating data. And HubSpot has a new feature called UI extensions that lets you use React to build custom interfaces right inside of HubSpot. And HubSpot also has a CMS REACT Building Blocks beta where you can build modules and templates using React. So the TLDR there's money to be made. You're going to inherit a React project someday. It's fun and HubSpot is making it so you can build cool stuff. React JS is an open source JavaScript library for building user interfaces developed by Meta. React allows developers to create reusable UI components in a declarative way, which makes the code easier to read and understand. As web interfaces become more and more complicated, they start to have a lot of different pieces of state that you are trying to track and handle in your ui. If you've never tried React, Vue or similar, you probably spotted a word that's new to you. Declarative. What's that? If you were at a restaurant, which way would you rather order the majority of the time? Point to a picture or basic description of the food, or give the server detailed cooking instructions so that the cook can successfully create the food exactly the way that you expect. Most of us are going to pick the picture and basic description. We might ask for different toppings, but we're not going to tell the waiter. Here's a list of all the ingredients. Thaw and form a half pound of ground beef into the shape of a ball. Repeat one more time but with a quarter pound of beef. Place a half pound of beef in the center of a stuffed patty. Press press down until you've made a patty in the shape of bowl. Add 8 ounces of grated cheddar cheese. Add the second ball of beef pressed together. I think you get the idea by now. That was a recipe for a Juicy Lucy burger, by the way. Special burger from the state of Minnesota where I grow. Now, that recipe is what we call imperative. It's telling exactly how to do the thing, and the picture or basic description is declarative, showing the end result that you want so what does this look like in code? So, first, here's an example of imperative code for a button that, when clicked, displays some text that says the button was clicked. There we go. Writing code imperatively gets complicated and cumbersome quickly, because as you build your interface, you have to consciously think about every combination of interactions a user can make and how they all affect each other. Let's change this so that instead of just saying that the button was clicked, let's count the clicks and add another button that subtracts from the count. Okay, just to show you it's real and it works. The code works. All right, it's a simple example, but already we're in a situation where we have to make two variables for buttons, add click handlers, and then increment or decrement the count based on which gets clicked, and update the output text. It's starting to get verbose, and we have a lot of duplicate code for setting the output text. Sure, we could refactor this into a single function, or make the text a string variable so we only have one place to update it. In small projects, that's completely fine. But as projects grow in complexity, it gets harder and harder to maintain and reason about this kind of code. To sum up, imperative coding means you're telling the computer directly what to do. Here's that same counter with increment and decrement buttons, but done in React without any prior React experience. You can probably already intuit a bit of what this code does, even if you don't understand how to write it. Notice my code isn't assigning variables for every element. The JavaScript and HTML are composed together in jsx. The on click handlers are now just changing the count variable and it's easy to read and understand. The count is being tracked in a state variable updated by button clicks. This is like the burger you showed what you want the output to be instead of giving detailed instructions on how to do it. In React, you write HTML like code called JSX. JSX literally means JavaScript XML, but you can think of it as Fancy HTML in JavaScript with extra roles basically inside your JSX you've got HTML like code, but it can contain variables and functions. One special rule in JSX is that every element needs to be closed. In HTML, for example, you don't need the n slash on an image element, but you you do in jsx. Additionally, in your return statements your jsx needs to be all within one parent element. You'll notice there's an element without a name here. This is something you can do to miss a link. Don't worry, I'll give them to you again. With front end React and serverless functions, you can also build custom interfaces inside of HubSpot, displaying information stored both within and outside of HubSpot in useful ways and make it interactive. The ways that you could use this are endless. From integrating the tools that a service sales or service rep uses directly into HubSpot, or creating brand new tools that enable them to do their job more effectively. There's a whole lot of cool things you could build tailored to your or your client's individual business needs. From tracking shipments right in the CRM, to tracking billable hours, to enrollment in courses at a school, to enabling a rep to manage software licenses, to enabling a support technician to remote access their client's computer from one button click right from the CRM. A few of these examples you're seeing though on screen are actually just some for fun projects that our engineers have been building for the holidays. But a couple more little tips. This one feels obvious, but surround yourself with folks who know things you don't. The people around you should challenge you to grow. So I encourage you to join the Dev Slack and the Community forums. There's a lot of great smart folks there. Last tip, and it's the most valuable Teach someone Else Sometimes when I tell people this, they get worried that by teaching someone else they're going to somehow lose like a competitive advantage. I can tell you from a career built on this that the exact opposite is true. When you teach somebody something, not only do you have to learn it more deeply and you start to connect dots in your mind that you might not otherwise connect. The other side of it is that when you've taught somebody something, they're more likely to then teach you something that they know in return. Teach multiple people and multiple people will teach you back. Keep repeating that cycle and you'll end up being seen as a thought leader. In my agency life, this literally led to other HubSpot partners and and devs in the community sending my company work when they were at capacity or the type of work felt too technical for them. They did this because by teaching I showed we have the technical chops to do the work. And if you think you don't know enough to teach, reality is everyone here has something they know that someone else doesn't, or they have a way of explaining something, maybe through a lived experience or a result of relating things to the topic that others didn't. So that was a short period of time to try to cram a whole lot of React learning into you can view a blog post reviewing some of the same ideas in a different form on the developer blog. Short URL is on screen. I have all the other links I showed on on that page. And just like I compared HTML HubSpot modules, native web components in React, I did that even more thoroughly in the blog post. You've all been wonderful. The excellent Tamara is now going to show you more of what you can do with React based UI extensions directly in HubSpot.

Thank you John for that excellent intro to React. I bet you're all thinking how do I get started building UI extensions using this newfound knowledge. Well, one of the great resource that we provide is a collection of getting examples to help you get started. If you're wondering what a custom card looks like, come to this GitHub repo and you can see there are many great ones. Today I'm going to dive into the deal Summary 1 but feel free to come back and explore now. I've already cloned this example into my own repository. One thing I really like about the HubSpot development tools is that it has really easy GitHub integration. The way I like to set up my development is I would have a production portal production account and that is connected to the main branch of my repository and then I would have the development sandbox account that is connected to another branch of that repository. What that means is when I'm doing development I can actually do most of it inside my sandbox. I can make changes, push code itself.

There are no Props. In React, we use the Use State hook to declare a state variable and create a corresponding function, commonly named set, followed by the variable's name. And the purpose of this is to enable automatic updates of the component whenever the underlying variables change. So unlike native JavaScript, React provides a workaround for monitoring variable changes through the use of a set function. All right, you now have the foundation of how to work with React. It's entirely about building with reusable components, managing their state and Props. My next tip for learning things quickly is to integrate the thing that you're trying to learn into the work you're already doing. And I really mean that. Integrate React into your real world client projects Obviously don't commit to doing something crazy and huge on your first go, but if you find yourself building an interface you've built a bunch of times, why don't you try using React to build that UI instead? Or try giving your clients a very simple user interface for getting at data that's critical to them in a HubSpot UI extension? There's nothing better for learning things quickly than than giving yourself a client deadline that you have to meet. All right, to be able to integrate it into your work, you need to know what you can do with it. First up, you can build websites on HubSpot with React. In fact, we completely rebuilt the HubSpot Inspire Gallery using a mix of server side and client side React. The site has filtering, it has components for each of the submissions, and then it also has a component for sharing the submissions. And then it also has a React powered lightning fast React powered search and then it also uses HubSpot's Dynamic Pages functionality and server side React to layout detail pages for submissions, complete with a gallery. If you're interested in building websites on HubSpot using React, you can start today by going to the shortened link here. If you miss a link, don't worry, I'll give them to you again with front end. With front end React and serverless functions, you can also build custom interfaces inside of HubSpot displaying information stored both within and outside of HubSpot in useful ways and make it interactive. The ways that you could use this are endless. From integrating the tools that a service sales or service rep uses directly into HubSpot, or creating brand new tools that enable them to do their job more effectively. There's a whole lot of cool things you could build tailored to your or your client's individual business needs. From tracking shipments right in the CRM, to tracking billable hours, to enrollment in courses at a school to enabling a rep to manage software licenses to enabling a support technician to remote access their client's computer from one button click right from the CRM. A few of these examples you're seeing though on screen are actually just some for fun projects that our engineers have been building for the holidays, but a couple more little tips. This one feels obvious, but surround yourself with folks who know things you don't. The people around you should challenge you to grow. So I encourage you to join the Dub Slack and the community forums. There's a lot of great smart folks there. Last tip, and it's the most valuable Teach someone Else Sometimes when I tell people this, they get worried that by teaching someone else they're going to somehow lose like a competitive advantage. I can tell you from a career built on this that the exact opposite is true. When you teach somebody something, not only do you have to learn it more deeply and you start to connect dots in your mind that you might not otherwise connect. The other side of it is that when you've taught somebody something, they're more likely to then teach you something that they know in return. Teach multiple people and multiple people will teach you back. Keep repeating that cycle and you'll end up being seen as a thought leader. In my agency life, this literally led to other HubSpot partners and devs in the community sending my company work when they were at capacity or the type of work felt too technical for them. They did this because by teaching I showed we had the technical chops to do the work. And if you think you don't know enough to teach, reality is everyone here has something they know that someone else doesn't, or they have a way of explaining something, maybe through a lived experience or a result of relating things to the topic that others didn't. So that was a short period of time to try to cram a whole lot of React learning into. You can view a blog post reviewing some of the same ideas in a different form on the developer blog. Short URL is on screen. I have all the other links I showed on that page. Just like I compared HTML HubSpot modules, native web components in React, I did that even more thoroughly in the blog post. You've all been wonderful. The excellent Tamara is now going to show you more of what you can do and with React based UI extensions directly in HubSpot.

Thank you John for that excellent intro to React. I bet you're all thinking how do I get started building UI extensions using this newfound knowledge? Well, one of the great resources that we provide is a collection of getting examples to help you get started. If you're wondering what a custom card looks like, come to this GitHub repo and you can see there are many great ones. Today I'm going to dive into the Deal summary one, but feel free to come back and explore. Now. I've already cloned this example into my own repository and one thing I really like about HubSpot development tools is that it has really easy GitHub integration. The way I like to set up my development is I would have a production portal production account and that is connected to the main branch of my repository. And then I would have the development sandbox account that is connected to another branch of that repository. What that means is when I'm doing development, I can actually do most of it inside my sandbox. I can make changes, push code up to GitHub and the change will be automatically built and deployed in the sandbox and I can iterate. Once I'm happy with it, I can push to production. This is the way that I like to develop. The thing that I want to. Let's look, look in delve a little deeper is let's look at one of the custom cards. This is the Deal summary custom card. It looks and feels just like HubSpot, but it's using that new React stack that John was describing earlier. What this card does is simply look at what are the deals that are associated with the contact and then tally up how many deals there are and what is the total price. I already have a similar car set up. I did a little bit of cleaning, but I'm going to show you what the code looks like behind this card. Here's my repository and you can see that there is the extensions directory and an app functions directory. The extensions directory is that React front end piece and App functions is the back end piece. Anytime you need to Talk to a third party API or HubSpot API to do some server side things. You can create a app function that runs in a serverless environment. Then on the extension side this is your React component. Now we start with the card the card has. It's a top level React.

Component.

You can see if you do HubSpot extend, that's all it takes to take that React component and embed it into this card over here. Now within that you can see the first thing that I do in this component is to fetch the data. I want to get the deals that are associated with the contact that's currently being displayed. Now once I do that, there is a little Bit of if we're loading, then we want to put up a spinner. If there's any error that has to do in the course of making that API call, then we want to display an error. But otherwise we show this statistics component with two items. One is the total deal amount and the other one is total deal count and the other one is the total amount, which is what you're seeing here. Now let's go to a little bit about how do we actually fetch data. We have this handy util HubSpot serverless which allow you to call a preregistered app function. In this case it's called Get Deals. Then once we get the data back from there, I can essentially update the states inside my component, the deal count and the total amount. And if there's any error, we set the error message. That's how those values gets populated. Populated and shown in this card. So let's take a look at what Get Deals look like. Here's a service function or app function you can use Async Await in the latest version of the platform. And what it does is to set up a HubSpot client makes a call to get the deals that are associated with this account, this contact, I mean, and then getting additional information about each of those deals, things like the dollar amount, the stage, etc. So now that we have looked at this, why don't we jump in and play around with development. One thing we can do here is we can actually use the HubSpot project. This is the HubSpot API. Now I'm going to start this command and we're going to do local development against this card right here. Now, once my process has started, I'm going to refresh this page here and you'll notice that it's now saying developing locally. What that means is what you're seeing in this car now is all powered by the code that's on my machine.

Cool.

Next up, what could we do? Well, I think that we can. It's nice to see the total number of deals, but I want to know how the tally based on different stages of the deal. Some of them is already in close one, but others are in earlier stages. So I want to have a little filter. How do we do that? I started working on this earlier and I'm going to bring back some code. Let's check this out. Now what has changed? I've updated a service function such that it returns all the deals instead of pre calculating the number of steals and the total amount. Once I get the deal, I Store the deals inside my component as a state. Then I calculate the deal count and the total amount here. Another thing that I added is now you can see I'm using the flex component inside there. I actually added a multi select component and I still have my statistics here. Let's look at what the car looks like now. We've added this selector so we can actually select a different steel stages. What I want is as I make changes here, it'll be nice if we say I only want to look at the ones that are in fairly late stage. Maybe close one and close contract sent. What I want to see is like how many deals are in those states and what is the amount. So how do we go about doing that? Earlier you heard from John that when you interact with a component there are these callbacks that you can make. So in this case, in my multi select, when there is a change in the selection, I can actually call this callback, update selected stages. Then in that callback I want to update these two states. Why don't we do that today together? I left myself a little to do earlier. First of all, this is a callback function and we get a value. Why don't we just take a look at what that looks like, what is in the data here? This is what happens when you have a live demo. All right, what's happening? Let's see. I should be able to start. Oh yeah, that's right. Now I need to actually interact with the multi select. So let's say I removed one of the stages. Now I can see the stages that are selected now is three of them. So if I remove it again, I see two. That's what the value is about. These are deal stages. The next thing is I have my deals up here. We have my deal state. I want to be able to filter these deals. Let's say there's my deals. I filter for each of these deals. I want to see that it's one of the selected deal stages. Let's see, includes deals. And I happen to know that this is already inside of properties and in there there's a deal stage. Let's do it again. Take a look at what's in our deals now we should be able to see the deals filtered once again. Actually didn't have to refresh that. If I delete a few things. And now I can look inside and see here we have three deals that matches the contract sent or close one stage and you can see the content in here. That's good. I think we're getting what we want with the data. Now we just have to set the deal count filter deals. Here are the deals that matches the criteria. Let's see how many there are and set that as the deal count and total amount. And we have this handy. Oh, that's not the one.

The other one.

Calculate total amount from the filtered deals. Last but not least, because we're updating the selected stages, we also should do that. I think that's about it. Let's see if this works. I know I have one of the big deals that's in the contract sent stage. Let's remove everything. Now there's one deal. It's 200 of $250,000. Let's add a close one. Now we're adding Jamaica Plane, a few others. Seems to be working. There we go. We just added a new feature to this card. Now what we could do is actually get out of local development. And if I simply commit the changes here, page filter, I can push the code. And let me show you that in my branch I have four commits. Now my most recent one, the one that I just pushed, is right here. In fact, I already have a pull request open and at this point if I merge the branch to the change in the sandbox branch to the main branch, then that would effectively promote a change to production. But in the meantime I should be able to refresh this in my sandbox. Voila. I'm no longer in local development. This change has been deployed to the sandbox. If I make these interactions, the deal count and the total amount are updating dynamically. That's it, folks. That's why I want to give you a quick overview of how we can develop UI custom cards just using React as the front end and service functions as the back end to interact with APIs. And we go through how you can use local development to really iterate quickly on the card features and use GitHub integration to make your changes incrementally through different production environment, different stages in the environment. With that, I want to bring on Justin and Carter who they have an excellent announcement about boot camp.

I heard, you know, every time I hear announcements, I just want to say the song back from camp. Announcements, announcements, sorry. Tomorrow, John. Oh my gosh. Getting some amazing work right there. I mean, you know, you got to do the claps all around, folks. Everybody, here we go. That is awesome. And the power of React is outside of HubSpot is awesome.

Bundle that together.

Yeah, bundle it.

Yeah.

It's almost like we're going to Mars. But Carter, I want to say I heard Someone say something about a boot camp. Do you know what they're talking about?

You know, I was, I was just learning about this myself. But yes, I do know what we're talking about. January 31st, me and Justin are putting on a boot camp. The first ever developer boot camp for HubSpot. We're going to be talking about CRM customization. We're going to be talking about APIs, custom objects, just react cards, just a HubSpot developer bootcamp. That's going to be awesome.

Yeah. And you're not going to want to miss this. Everything that John and Tamara are talking about are things that we're going to show you how to put into practice and you're going to learn so much about Riley Rentals and you're going to have fun being a mock engineering team to actually put cards into production in a beautiful sandbox environment. Nothing messing with your live production, but you will get from start. Hey, I don't know what I'm doing with CRM customization to being. After six weeks, you're going to love it, you're going to enjoy it, and you're going to be thinking about all these other ideas that you can do. Now what we hear, Carter, is, hey, who is this for?

Yeah, yeah, exactly. Right? So we're looking for Primarily for developers, HubSpot developers with two years of development experience and anyone that is taking a developer academy course. This bootcamp is for you. Will take you from 0 to Hero on React, CRM cards, and HubSpot development in general. We'll be reviewing some things that you probably already know, but this course is probably for you. If you're interested in HubSpot development, you'll definitely want to be in it.

Yeah. And you know, it's one of those things. It's an early Christmas present. For those who celebrate Christmas, get in. Even if you see, hey, it's full for the winter, sign up for the wait list because it will tell the boot campers how quick we need to put out the next one. So we're going to drop in the chat, we're going to throw that over the dentist. Dennis, get that in the chat there so everyone can see how to sign up for the CRM customization bootcamp for developers again. I really hope y' all can get there. It's gonna be a lot of fun. We're gonna have six weeks of just dev talk. I mean, everything that Tamar and John talked about to, hey, this is the groundwork. This is how you can get yourself customizing HubSpot CRM.

In six weeks, some of the most, most intense CRM extensions will be built during this bootcamp. We'll be demoing some really awesome ones, some really advanced. Yeah, people are going to love it.

Yeah, it's going to be more intense than tomorrow's doing live coding. That was impressive. I can't get past that. I love it.

That is awesome.

With that, Carter, anything else you want to add before we pass it over to Mark?

I think we're doing pretty good.

Yeah.

If you sign up right now, you're pretty much guaranteed a spot in the spring. In the spring course, we filled up the winter course, and we're filling up that spring bootcamp really quickly here. So if you. If you sign up now, you're. You're pretty much guaranteed a spot. So definitely recommend signing up as soon as possible.

Boom.

Don't wait, don't delay. Mark, let's get you on camera. And I know you've got some really cool stuff that you want to share, and I'm excited to see what you got, man.

Heck, yeah. Not quite as exciting as a boot camp, I don't think. I think everyone's riled up for that now. Thank you guys both for the announcements there and really looking forward to seeing how that goes for everyone. Yeah. So we've learned a lot about REACT today. We've learned about react in the CRM. This whole concept of CRM development is a little bit new in HubSpot. A lot of the examples that you're going to see are pretty boilerplate or showing specific use cases. We here at Aptitude 8, my name is Mark Raiba, director of technology here at Aptitude 8. We've been building these for a while now. I wanted to show you guys some demos of real world applications of these CRM cards, how we're using React for some of our clients to give you guys some ideas for how you can pitch these projects. One of our clients is actually a supplier flyer for, like, vape shops, and one of their business processes is calling certain companies every week to talk through different scripts, do other kind of related sales activities. They have used the game plan, some of the other tools in HubSpot in the past, but they really wanted to have the data input for these activities directly in the company record itself. So we built out these cards to allow each rep to essentially bring up the company that they're talking to have this up while they're talking to the company and then talk through which game plan they went with. So one from Tableau, one from HubSpot, what categories they talked about, different topics and then also input notes. Let's go ahead and put test here. And then whenever they submit this activity, this game plan then is set saved as a custom object. If we go ahead and refresh, we will see that we now have two where did it go? Activity. There we go, two activities saved. It's going to automatically create the new custom object and associate it with the company. This allows us to then do subsequent automation based on the creation of the new custom object as well as run reports. Then same deal over here. They also wanted essentially a call log feature, being able to save if a particular call with a company was a sales call or support call. If they talk through a campaign, they talk through any specific support items. They can log this and yeah, basically just do as much data capture directly on the company record as possible. We're getting a lot of data entry use cases. We also have a pretty popular use case for building deals or adding line items. This is an advertisement or publication company or client of ours and they basically sell ad space both on digital platforms as well as in print publications. They wanted a way to quickly be able to use both the product library in HubSpot as well as a custom object which is an inventory item. Basically a product is just a SKU. You can have unlimited number of SKUs. An inventory item, literally like once you sell one it's off of inventory, you can't sell it again. So we built this experience. This is actually an iframe card. So when you click this button, this UI is actually hosted on a HubSpot either HubSpot CMS page and it is also using React. So this is fully custom UI React, even though we've styled it to still look like HubSpot. So we're able to extend and that experience in this case, we can either add a predefined bundle of ad space or we can go down and select both print and digital ads. We'll put in an inventory, start date and end date. And the reason we have this is just because there are so many items or products that they have available, we're able to bring in just the products that the sales rep wants to actually promote. And then if it is an inventory item, you can click this button to see what dates are available for the given inventory item. If it's a print item, we're going to go ahead and just say add to deal and you can add however many it'll reset after a second. So if we want to sell three of those and then if you Go up, you'll see Edit line items is up here. We also have a calendar view, so if you want to open up a calendar and see products or specific ad spaces for specific days, they're also able to access that. Then if we go over to the Edit line item view, you'll see very similar to the quote editor. They're able to manipulate all these fields and all these fields are coming directly off the product property description. So validation is essentially built in. We even rebuilt the discount feature where they can select USD or percent and yeah, once they're done we can click Save deal and we'll get a little notification saying that the deal is saved. They can close out refresh and those line items are now applied to the deal. Just some sample use cases to get your ideas going for how you can actually leverage this for your clients and promote CRM cards as a viable project. To go down for some more inspiration, we've actually built out a full CRM card playbook with a whole bunch of other ideas for how CRM cards can extend HubSpot and make it really specific for your clients use cases. There's a short link there, feel free to check it out on our site, give it a download. Thanks for everyone for their time and over to Sejal.

Hello everyone and thanks Mark. It's been so energizing looking at everyone present doing the demo in that demos by Tamara and use cases showing more UI extension examples. And there are many more developers who are out there who are furiously building UI extensions. We already showed some of them during Inbound this year and this time we've got even more from our community so let's check them out. Oh, by the way, I'm Sejal. I'm Sejal Parikh. I work as a product manager inside HubSpot and I focus on making a platform extensible for the external developers like you. And before I move on to the next parts, here is a forward looking statement. What we discussed today is based on current circumstances and can change in the future. Your purchasing decisions should not be made based on designs on these statements. All right, first up we have Cristobal from Process Flow Consultancy who built this company health Tracker that acts as a centralized place to understand a company's health without having to jump between multiple record pages. And not only that, it lets the reps submit a new health report through one three steps process and even adds notes on the record page. And then we have hypindexter, another HubSpot agency. Their team built this address lookup option that finds matching addresses on the company's record page and based on that it updates the relevant properties on the record page itself without getting outside of it. Netoroeshow is one of HubSpot's customers and Ayman from their team build this extension that allows them to streamline the internal processes and save events for each of the deals and auto generate related custom objects in multiple line items all in one step based on the internal guidelines. Everything built as a native looking experience with UI extension you can see the UI can get more complex and here's one example that I've been personally playing with these days. These extensions fetches all your tasks from an Asana project and displays as a sortable table with pagination on the record page and it allows you to update with checkboxes on the record page itself. There's a lot that you could do in this integration itself and Byron here thinks that CM customization doesn't have to be all about business, so they build an extension that lets you play Minesweeper right from inside HubSpot and talking about fun things. Brandon Rogers, one of our tech leads on the team, built this Christmas Wishlist builder just in time for holidays. You can also see he's used the latest custom panels later in this demo and these custom panels are right now going to alpha phase and I'm going to talk about that later. As you saw, UI extensions unlock boundless possibilities of what you can build on top of HubSpot and we continuously make ongoing improvements to the experience and capabilities. In fact, I'm going to walk you through some quick recap of everything we have shipped since we launched this for public beta at Inbound this year. First thing first, if you haven't switched to the latest version of HubSpot projects in the configuration file, I highly recommend that you do so. It has lots of goodies. The version comes with many other features, but the biggest one being the removal of 4 KB log limits and support for new log tracing functionalities. This log tracing capabilities helps you connect all the front end react logs and backend serverless logs with one single trace ID so that you can view the full trace of events that has happened in case of failures. This is already available for you all to explore in your accounts. Then to help you build better UX for your extensions, we also delete a couple of new components such as toggle inputs, dropdown component, all generic list and you can visualize CI object data easily also with CI Statistics component and we continue to improve existing components based on your feedback. Some of the Notable improvements are the tables have now sortable headers, input types can be password and you have better handling of truncation of the text as well. And some of you asked on the Slack channel we have a dev Slack community dedicated for CRM customization and on that channel some if you asked if you could access the extension location or the object type so that you can conditionally serve the UX based on where the card is rendering. And now it's possible with these information available right inside the context object. For example, you can display different information when the card renders on the contact or company object or tailor the UX based on whether it's on tab or sidebar. One example here in the screenshot is that there are two cards showing using a shared component that tailors different information based on whether the location is tab or the side by. So one component used for both cards and it allows for the better code the use as well all right, one of the big problem right now is having to manually refresh page every time something gets updated using the custom card. It's a huge pain point. With this we released new property refresh method and we are just beginning to solve this larger problem of Data Freshness inside HubSpot pages based on whatever actions you take inside your extensions. So you can see in this example that the phone number gets updated on the custom card and it will update the left side by properties and then CIM data component that is used right below the form that gets updated and there is a ui. There's a card created with a page editor layout on the UI and that also gets updated when you update something in the custom card. We are going to make more improvements in this area continuously. We released three new sample extensions in our public Code Samples repository. Flex Playground helps you understand how you can manage layout using Flex components and play around with it. There is a properties extension that shows a complex use case of layout management. In the same project we also released another sample extension that shows you how to add an iframe model on your custom card. This was frequently Asked Questions on the community as well. Finally now you can run multiple extensions in the local dev mode. Tamara showed you how to use how to run one extension but with the same command. You can run more than one extension in local dev mode. You can see in the screenshot here I have three running in the local dev mode and it'll change based on changes in any of your cards. This is a lot, but I'm sure I missed a few more. But you can subscribe to the changelog so that you don't miss anything future. Now I'm going to give you a small, very small sneak peek in what you can expect next from us. When was the last time you felt that it'll be nice to have a drill down into something and not have everything smoosh inside the card? Custom panels will come handy in these kind of situations and some of you are already in the alpha. We are validating that with this group. Once we have done that and once we have validated the API and the exploit, we'll make it available to everyone inside Public beta. You can see in the screenshot one of our tech lead Anderson created this calendar view of all his fun extension. We have a fun challenge going on inside our team on building more and more UI extensions so you can see some of the demos here. On top of the log tracing we also have a custom logger utility now that we are going to work on that you will be able to use inside your extension front end and you can send your custom log events into the log tracing UI so that they can be useful to debug any failure scenarios that happens when the card is running in production. Lastly, we are also looking into improving our APIs continuously and one such example is the API for running serverless calls, making it more intuitive so that you can use it without it being inside being A prop inside HubSpot extend will allow you to call serverless functions directly from inside the sub components. We welcome more feedback from you on this API and other things as well. Now I'm shifting the gears a little bit from extensions to the the locations or the surface areas inside HubSpot where you can plug in the extensions. We call them extension points or locations. One of the goals for us is to identify more extension points where you can plug in your UI extensions and preview sidebar is one such location. It's available for standard and custom objects and in 2024 our teams are going to work on teams that are working on declarative customization are going to make it available for the customizable in a way that you can add UI extensions on it as well. And next year we'll also bring super smooth customization experience for the entire record page using the record page editor where all location can be customized from one single place including the left side by the record page which you can't customize today. So this was just a sneak peek into some of the next few items. We are also working out next set of components configuration and structure inside developer projects handling and debugging and more. Once again, if you subscribe to our change log, you can stay posted with everything that we need, everything that we share. That's it for my end. I'm sure you all are jumping around trying to try everything I just showed and build more UI extensions. As always, we are here to listen for your feedback for this beta. I'm wrapping this up with this last extension built by Joe on my team. It integrates with image flip to generate means. Over to you, Dennis Sejal.

Thank you so very much. I'm going to go ahead and pull everyone back here up on the stage because we have a few minutes left to throw in some questions. Questions I think I got everybody. Okay, first of all, I want to say y' all did an amazing freaking job. As usual. Didn't doubt it one bit. I knew you would. And secondly, tomorrow, the live coding, live debugging is probably. Wait, did I not put you on stage?

Where are you?

I don't see you. Oh, there you are.

Hi.

Hi, friend. Sorry. You were amazing. Okay, done. I do want to remind everyone we just launched, so you might not have seen yet. There is going to be a developer hug in June, January, it is on the 18th and I will throw into the comments right now a link to it. See, should go there, put on the screen, make it all fancy like. All right, that is going to be on membership, CMS memberships. So if you have any questions around that, go ahead and sign up for that. It's going to be amazing show. Go ahead and like and subscribe the YouTube channel so you get all the notifications, all the good stuff. And now let's do some Q and A. There's not a lot in the. In the burner, the pipe line right now. So I'm gonna ask the three that I have. First of all, Goran asked about a boot camp question. Is it okay to watch recordings instead of live for us to. On the upside down part of the world?

Yeah, so I'll.

I'll jump in and handle that one. We in the first boot camp of this new beta Boot camp. We need everybody to show up live. We are working with the HubSpot developer community Advocates to get other time zones out there. So. But I don't have a set time. I don't have any of that. So the best thing is if you can make the time work. If not, just join the wait list so you keep getting notified about the next courses because we might be able to push out. It depends if we can get Carter to stay up late and teach Some courses.

I'll do it, I'll do it. It's worth it.

Yeah, if you just, if you don't mind, just talk a little bit more. So if someone goes to that link right now to sign up, they're going to be put on a wait list right now. And do you know any, any insights on the how that's going to work, how they'll be notified in the future?

So probably within the first three weeks of the year of 2024 we'll have a great idea because in this boot camp you're getting access to an enterprise HubSpot portal with a sandbox. So there's a little bit background that we have to do. That's why we limited the this one. But in this beta we're going to see how well it works and then we'll probably open up for the spring one to be a lot more size. So joining the wait list then gives us the ability to notify everybody when we open up the next course. So there's no way except for the developer Changelog and the developer blog to know about this. So signing up for that wait list is going to be your best way to get notified first. Of course you'll see it on LinkedIn, Slack in the dev community, so there's a lot of avenues. But signing up for that wait list now is going to be your best direct one to one message.

Cool. Cool.

This one goes out to Mark. Thanks for presentation. Quick question. Inventory was a custom object with a limited inventory or availability. And so what was the relationship with the line items?

Yeah, so line items in HubSpot are essentially a superset of products. So any property, anything that you change or set on a product is going to then apply also to line items. And line items of course are what eventually get applied to quotes. So in this example, inventory is essentially also a superset of products, but it has a product ID key. So essentially it's a many to one relationship. One product can have many inventory items and they also have a dedicated date associated with them. But you could just use it as essentially like a stock system or something like that. Products are your full product library and then you're looking for individual instances of that product in the secondary object. Essentially what we're doing is once an inventory item is added as a line item to that deal, another automation triggers to essentially say this inventory item is no longer available. Cool, cool.

And if anyone has any more questions, I want to post a link here to the Every time I do that, I want to do that again without the opens in a new tab, so I'll learn someday.

Maybe there's a react component. You need to drop it.

There you go.

This is if you want to learn more about Serum customization, go ahead and go to this link. We update this frequently with all kinds of new information. Go now. Do it. Last but not least, I have one thing. It's not really a question, it's a call out where I think we have a little competition where I think Minesweeper was not enough. I think we need someone wants to build Doom and I expect to see this on Sajal's desk within the next two weeks. Brennan, you've been called out. You're on. Would that be glad? Go ahead, John.

I was just going to say if someone manages to get doomed to work in CRM one I want to play it, but two let me know. Send me a message. I'd love to highlight it. It's a cool way to show even though we don't expect everyone to be building games inside of HubSpot, it's a cool way to show what you can do inside of HubSpot and push HubSpot to its limits. Absolutely. Send it over.

We have one more question from Victor here. I'll throw up here on the screen tomorrow. Sejal, this probably for you. Excellent presentation. Thank you very much. Is it possible to create conversations in the contact inbox using the UI extensions.

And greetings from Peru.

Either one tomorrow or Sejal, if you want to just technically do it.

Technically yes, you can do it. But it's a live conversation so there are limits to it.

Makes sense. That's good. If there are no more conversation or conversation questions, I want to end this right now. We are two minutes over the time again. Check out on the 18th members only the next developer hug session. And you all are amazing. Have yourselves a great day. Talk to you later.