Build Deep CRM Customization to Supercharge Your Business | HubSpot Developers at INBOUND23

Hi, everyone. We. We got a great crowd here today who's excited to be here at Inbound.

Woo. Yeah. Yeah.

Well, welcome and thank you for coming to building deep CRM customizations to supercharge your business. Today we're gonna cover why CRM customization matters, show you how developers can supercharge your business and demo the greatest the newest tools we have this year that make CRM customizations easy for developers and more accessible to customers. I'm Lori Chen. I'm a product lead in the developer product group here at HubSpot. When I'm not presenting at Inbound or building products at HubSpot, you can find me out taking nature photography and working on my very much nascent tennis game. Today I'm joined by my co presenter, John McLaren.

I'm John McLaren, and as the title on the screen behind me says, I'm a developer advocate. And what that means is that I create developer education content and I hang out with our developer community, taking their feedback back to our product teams. Outside of all that, I enjoy a bit of disc golf and. And camping. It's really intense. I'm really excited to get started, but the HubSpot spotlight has just ended, so if y' all don't mind, if you can try to squeeze together just a little bit more to make some room for more people to join us here, that would be awesome. Laurie, if you'll do the honors of kicking us off.

All right, thanks, John. Now, before we start, we'd love to get to know you a little better. So a quick raise of the hands. How many of you are sales or service reps? Whoo. All right. All right. There's some. And how many sales or service managers do we have in the house?

Cool. Cool.

Very nice. Now, don't be shy. Are there any developers in the house? Yes. Well, we're so glad that you joined us today. Let's kick it off with why deeper CRM customization matters for my sales and service managers out there. How many of you know where your reps spend the majority of their time in the CRM? A few. Well, according to our internal research, we found that reps spend an average of 10 hours in the CRM per month, and the majority of that time was spent in the CRM record pages. That's contacts, companies, and deals. Your reps rely on the CRM record to be be that single source of truth, the point of connection between your data, processes and insights. After all, the CRM should be the heart of your business, and your reps rely on the System. A system that scales with your business while out of the box functionality is a great start, Your business grows in complexity as it grows in size. You're adding new processes and evolving your existing ones. You're adding new systems to your growing tech stack. And all of this, what you find when you compare notes with your neighbors is that your processes and systems are completely unique. And that unique system, a unique business requires a uniquely customized CRM. There's so much on the line, from visibility across your organization to streamlined business processes, from enhanced collaboration and efficiency to valuable insights across your business. And let's not forget all the great mission critical integrations across your other business tools. So how do we know it's time to customize? We should ask our reps out here. Have you been frequently switching between tabs? Are you getting data from multiple systems? Are you spending lots of time performing repetitive tasks or experiencing high error rates because of complex processes? Are you spending tons of time manually generating insights? Not investing in customization comes with risks. Tasks take longer to complete. Your rep's frustration builds and opportunities are lost over time. Actually, let's start with. Let's make this real with an example. Now, spoiler alert. This might be long, complex and I might lose you somewhere in the middle, but that's kind of the point. Now, let's imagine you're a sales rep and you're about to get on a call with a prospect. You pull up the prospect's contact record. You get on the call and as you're talking to them, the prospect asks for a custom quote. And that's when you realize you forgot to pull up your quote calculator. So you scramble to find the bookmark and all the while trying to keep the conversation going. But ultimately you have to ask your prospect to hold while you pull it up.

So.

So the conversation starts, you start putting critical information into your calculator and your prospect mentions something really important. So you switch back to the contact record to note it and then you switch back again to your quote calculator. Are you still with me? Cool. Now you finish the conversation, you generate the quote, you download it to your local machine, and then you switch back again to the contact record and send the actual quote to the prospect. And that's just managing one tool over one phone call. I see some heads nodding out there. I feel your pain. Let's do some math. If the rep spends on average three minutes managing this one task and they have to do it 16 times a day, that's going to add up to over 200 hours of wasted time per year. And realistically, you're going to probably manage five different types of pro bloated tasks repeatedly on any given day. That brings us to over a thousand hours of wasted time and our sales team, our sales rep, sales managers and service managers. You know that you have teams of 10 or more and that's going to add up to over 10,000 hours of wasted time a year. Wasted. More wasted time equals money lost for your business. Your sales reps take longer to close deals. Your service reps take longer to close tickets. Customer NPS goes down, which decreases customer retention all the while employee engagement goes down. Now imagine a world where your reps never have to leave the CRM because all the data and tools they need are right there on the records page. If you had a magic wand, what would you want to add to the CRM? Well, today I'm excited to announce that the HubSpot CRM is open for building.

Woo. Yeah.

Now you can customize your CRM to give your reps the data and information they need to when and where they need it. This is now available in public beta for sales and service Hub enterprise accounts. Now you can create custom cards that look and feel like part of the rest of HubSpot. Each custom card can display third party data and give users the ability to take action right there on the record. You can place custom cards on the custom tab in any record page. And who's going to be your magic wand? Who's going to make this all happen? Where are my developers out there? Yes, developers are the superheroes who will partner with you to make this a reality. Now developers, we made it super easy for you to build these powerful customizations. And just to start it off first, we introduced a new tech stack for building custom cards. The new REACT based components allows developers to build engaging visualizations and advanced interactions. And our new local development makes building and deploying seamless, taking your ideas to reality faster. Also last year we streamlined our tool set and introduced new tools including sandboxes, developer projects and GitHub integrations, as well as CLI support across all of them. This year we heard your feedback and we further streamlined them and delivered a number of updates that make building, testing, deployment and debugging easier. Now I'm going to hand it off to John McLaren who's going to show us the power of CRM customization in action.

I'm going to walk you through two examples of what developers can build and then for the developers in the audience, I'm going to show you how to get started in building your own extensions. First, let's imagine that we're an outsourced IT company. One of our responsibilities is to manage all of the hardware issued to our clients employees. Before this world of customization, I as a technician would have to jump between our help desk software, our CRM and giant spreadsheets just to figure out what asset is assigned to whom. But with this new world of developer customization, my tickets are in service hub and web browser tab. Hell becomes everything in one place. This is a ticket and it's showing a call that I had with Julia about her laptop. She said her keyboard is broken. She sent me this photo. I guess you can have a little too much coffee. Let's go to our contact record here. You can see that call that I had with Julia is also logged here. So that the rest of my team has the same context as I do. We'll go to our custom tab. This currently assigned IT equipment card visually looks like HubSpot's interface, but it's actually built by a developer. Listed here are the pieces of equipment that my team has issued to Julia. Let's mark her laptop as out for repairs and then she's going to need a loaner laptop asap. So let's get on that. I think she has a 16 inch laptop. Let's get her another 16 inch laptop and then let's mark this new laptop as a loaner. That way my team knows we expect it back. Now to keep the rest of my team in sync, I can head over and also mark off a to do that was created in our IT ticket. We'll go back to our custom tab and let's dive into that broken laptop. This is a custom object record showing the full history of everything that's happened to this laptop and who's had it, who's fixed it. And now the fact that I've just replaced your keyboard. Caffeinated laptop fixed. We're now going to imagine we're a different type of company. We are a manufacturer of less than in a box kits to schools and I'm a sales rep. I've sold five kits to ABC elementary and Paul at ABC elementary has left me a voicemail telling me that he wants to know when the latest shipment will arrive. Our warehouse team uses separate software to track shipments and inventory. But with HubSpot, I can now see the shipment information directly inside of HubSpot I can see the status, the carrier and even the tracking number. Let's dig into the currently in progress shipment so that we can find out what's going on for Paul. I see that there is one item marked as on hold and that a part is out of stock. Let's get back to Paul.

Now.

Being able to see the shipment information right inside of HubSpot not only saves me from having to open another program, it also saves my company from having to train sales reps on how to use the warehouse software. And it also may even prevent needing to have a user license in that software for someone who only needs Vue access to it. If an API exists for the software that you use, a developer may be able to display that information directly inside of HubSpot and even make it interactive. Now, developers, let's show how easy it is to get started in building your own extension. We'll go to the CRM development in the main nav the homepage screen for it and then if you want, you can take a two minute demo showing you all of the tools you'll be using at the bottom of the screen. Here is VS Code running a terminal and CRM development is done through the HubSpot CLI. Installing the CLI is just one short command that you can copy and paste CMS developers, you might recognize this is the same CLI that you use for CMS development. And that same command, if you already have the CLI installed, will update you to the latest version, which you'll need to use the new tools. Our Getting Started guide works like a checklist, so you can mark it off as complete. And then in order to connect your HubSpot account to your CLI, you'll run HSINIT. And if you've already used the CLI before, you can use HS auth. Instead, you'll be asked to create a personal access key. This is your authentication information for your account. You'll then select some permissions for CRM development. Typically you want custom objects, developer projects, GraphQL, sandboxes, and serverless functions. We can now copy this key and paste it into our cli. You'll be asked to create a name for this account. This name is just a nickname that you come up with so that you remember what account it is. And then you'll be asked if you want to make this account your default account for your cli. Choose yes. This makes it so that all of your CLI commands operate off of this one account. We'll go back to our CRM development homepage, mark that one as complete. And now let's create a project. The command is just HS Project create and the first time you Run this. Well, when you run this command, you'll be asked for a project name. This is visible to everyone in your account who has the CRM development permissions. You'll be asked where to save it and then you'll be asked if you want to start from a template. Starting from a template gives you a basic CRM card to start with and all of the files needed. With the hsproject dev command, your changes can hot reload in the browser inside the HubSpot CRM automatically on save. But first, in order to make that work, we're going to run NPM install inside of our project directory. And then the first time that you run hsproject dev, you'll be asked to create a developer sandbox. And that developer sandbox is a safe environment for you to build in and and not affect your production accounts data. If you've already built with a sandbox before, you'll also be asked if you want to continue using it. The first time you run this command, your code will be uploaded. That makes the hot reloading work. Now from our projects page we can also see we can then go to our contacts and then we'll go to Maria here and let's add a custom tab. We'll go into customize default view and then create a tab. You can name it anything you want. Now we're going to add our card, mine's named example card. We'll save it and then we'll go back to our CRM record, we'll refresh and voila, there is our new tab in the CRM. And even better, there is our custom card. In just minutes we've got our first card running in the HubSpot CRM. Not only that, but it's watching for changes that are happening locally on your machine. Even the app functions, a type of serverless function, are running locally. You're now ready to make your first change and the moment that you hit save, it takes effect instantly in the browser. We've also provided a set of variables to make development easy. You can get the current HubSpot user's name, time zone and HubSpot account ID through this variable. And we also know that you want to be able to build with components that look and match HubSpot's look and feel. So we've done that. We've provided accordions, buttons, images, forms with input fields, progress bars, and so much more. We also know that developers, you want to be able to display CRM data for the current record without having to make a request for that data. And so we've provided a set of CRM data powered components that enable you to do just that. An example is this report component that you see on the screen. This is built in the report builder and it's a simple component that you can easily add. I mentioned that you can work with. We'll get to that. Configuring your project is really easy. You set the name, you can assign your JSX file for your front end, and then you pick the CRM objects that you want your card to display on, be it companies, deals, contacts, et cetera. Now, I mentioned serverless functions. Included in the template is the code to send data to your app function and even handle a response from that function, making it so that you can jump right to working with authenticated APIs right from the bat. And if you're working with HubSpot's APIs, you'll need a private app. Adding a private app is really easy. You include an app JSON that includes all of the information needed for your private app, and it'll be created right inside of HubSpot. Here we can see this is our project. We can see the private app is already linked to that project. Even better, the extensions that our private app is connected to show and if you've deployed your serverless functions, any logs for debugging will appear there. Now, I mentioned debugging and sometimes you want to be able to see the code that's been deployed as well as who did the actual deploying. Well, you can. Now this isn't meant to replace version control like GitHub. In fact, we actually have a GitHub integration and any commits you make to that branch will take effect instantly in your account. Now, I just threw a lot at you, and the important part is that in a short amount of time you can have an extension showing Data both from HubSpot and other software running directly inside of HubSpot in no time at all. Now I'd love to pass it back off to Laurie.

Great.

That was amazing. So during John's demo, you saw that he used the full suite of developer tools to easily onboard and build powerful customizations. Now let's take a closer look at the developer updates that power that experience. So for our sales and service folks, just know that with these updates, your developers can build what you want faster and meet more of basically make your wishes come true a lot more. So let's take a brief history. So back in 2021, we announced a vision for a suite of developer tools that make building up on HubSpot easier. In 2022 we rolled that out to public beta during Inbound. Now since then thousands of you developers have used the tool set to build customizations and you told us that you want the experience to be easier. So this year we introduced a number of improvements and we continue to plan to do so in the coming years. And what you told us is that you want to build interactive and engaging ui. You want to test code and test faster with local development, you want to build on top of the tools that you already love and and use and all along using popular industry standards. And you want to free up more of your time to solve customer problems and not setting up hosting. So this year we expanded the UI component library for building custom cards. Now it's easier than ever to display any Data, whether from third parties or from within HubSpot itself. And if you're displaying HubSpot data, it's easier than ever with new preconnected components to existing CRM data, including objects, associated objects, fields and reports. And you can now create deeper interactions with new components for forms, input fields, buttons, loading spinners and support for multi step flows. To power these components, we added support for React. This popular front end industry framework allows developers to build more engaging UI quickly and by adding support for React it allows us to support local development and TypeScript. Speaking of local development, this is a really exciting and new addition to our tool set this year. Previously you had to wait up to a minute or more to upload your code changes to HubSpot before you test it. Now with local developments you can test your React and serverless code instantly in your local machine. Debugging Logging is a critical debugging tool. You told us that logs are hard to find and with a 4 kilobyte limit it makes debugging really hard. With local development you can now access unabridged logs where you expect them. React logs can now be found in the browser console and serverless function logs are streamed instantly into your CLI in real time. This is a significant improvement in developer experience and can save developers hours of development time each week. You also told us that you want to free your time up to solve more customer problems. One of the costliest tasks for a developer is setting up backend hosting. With serverless functions, project timelines are shortened because developers can build their Solution directly on HubSpot, no servers needed. This is just a quick highlight of all the great improvements we made this year. Before we move on, I just want to also call out that we've improved development sandboxes we've increased the per account limit for development sandboxes to two. We've also streamlined the creation of sandboxes within the local development workflow and you can now see development sandboxes with up to 100 contacts from production build and deploys are also faster. Serverless function infrastructure got improved and managing secrets became easier too, and we've heard great responses from developers who've used the updates so far. Colin Johnson from Viewrail said, being able to build a custom card, tap into serverless functions with React APIs, it opens up a whole new world of flexibility for our business. Well, we're really excited to bring that flexibility to everyone. Now in Public beta as I mentioned before for sales and Service Hub enterprise accounts. If you want to learn more, simply scan the QR code behind me. And before we wrap up, I just want to call out a couple recommended sessions. Follow up sessions after this one. If you're interested in learning how admins and developers can use CRM customization to solve more business problems, make sure to check out Grow Better with the power of CRM. And that's Friday at 11am and if you want to see how developers can customize all of HubSpot to help your business grow, make sure to check out scaling businesses with HubSpot platform functionality Thursday at 4:30. I know you may have questions for John and I, so after this after the session will be available on stage or over here. So yeah, thank you for coming and make sure to fill out the survey and visit the developer and ecosystem demo biz. Have a great rest of inbound.

Memories turn into pray if they call you. Embrace.