Technical & Integrations

HubSpot CRM customisation: tailoring HubSpot with React UI

25 min read


At its core, CRM customisation is the process of tailoring your CRM system to align seamlessly with your unique business processes, objectives, and customer interaction models. It's about taking a CRM platform, such as HubSpot, and moulding it to fit like a bespoke suit.

Just as no two businesses are identical, CRM customisation recognises that there's no one-size-fits-all approach to managing customer relationships. CRM customisation ensures that your CRM system isn't just a passive tool but a dynamic asset that actively supports your business objectives.

HubSpot has raised the bar with the introduction of React UI customisation. This innovative feature allows businesses to not only customise the functionality of their CRM but also its appearance. It's a shift from mere functional tailoring to creating a CRM environment that resonates with your brand identity and user preferences.

On the Evolving HubSpot podcast, we’ve recorded a podcast episode featuring Jeffrey DeAnna, the head of the North America Solutions Architect team at Huble Digital. In this episode, he provides expert insights and guidance on the topic of customising HubSpot CRM and explores how HubSpot's React UI customisation feature is revolutionising the way businesses tailor their CRM solutions.

In the following article, we present part of Matthew and Jeffrey's conversation as they dive into the world of HubSpot CRM customisation. Join them as they explore the intricacies of React UI customisation and discover how you can harness the full potential of this powerful tool to drive success for your business.


Read on for more insights or watch the episode below.



Matthew: As you referenced, Jeff, we're going to talk about HubSpot’s CRM customisation today. A pretty niche topic that I touched on last week on the podcast with Daryn Smith, our CEO, where we were talking about the product updates following INBOUND23 and what they meant for people using HubSpot.

We're going to look at how some new things they've announced at INBOUND can affect the use of HubSpot and how people build out their processes and operations in the tool specifically around the UI customisation. How people actually are in an object within HubSpot, how they use the tool, how they interact with the tool.

But before we get into the details, if you could set the scene for us in terms of the ability to customise in HubSpot a little bit further, if you were to compare HubSpot to Dynamics and Salesforce, where does it sit in the spectrum of CRM customisation?


Jeffrey: As far as customisation goes, when using HubSpot, everything is very simple. There's the activity bar, which takes up your main screen. It's the centre pane. You have three panes. You have your left sidebar, which has all the properties that you would fill out on a specific object. The centre pane has all your activities, like emails, notes, meetings, all the activities that are related to the object at hand, whether it be a contact deal or whatever.

And then the right hand side. It is going to tell you where your associations lie. So it's a very simple one screen to understand. Dynamics more or less gives you a form and you have to build out that form and make it look however you want it to look. And you're just adding components left and right, but it's more or less building a webpage. The thing about Dynamics is that when you have a user in Dynamics, you need to have that user to be able to understand the system before they're able to do their job.

Whereas in HubSpot, your job is very apparent. And you're able to understand what you need to do by looking at the one screen that's in front of you. And more or less, there's a lot of customisation that you can put into Dynamics and you can make it look and feel good to the user. But HubSpot does that out of the box.

And we prefer to use something that's always going to be familiar. To a user rather than something that needs to be bespoke and built to the user specifications in order to train multitudes of different people. So you prefer to go to the thing that's easy to use, easy to understand, feels familiar, and it's intuitive.

And that's where I think the HubSpot ecosystem has an advantage over Dynamics because anyone can look at it and know how to use it just by looking at the screen.


Matthew: Yeah, absolutely. I think I've heard HubSpot and Descroll described multiple times in the past as the familiarity and ease of use of the Apple ecosystem and how the iPhone is incredibly easy to use. It's pretty easy to pick up. Everyone knows how to use it. Everyone knows how to navigate it. 

I think what you're saying here is that HubSpot, especially over the last few years, has been a system that within general, you can pick up, you don't have to do a ton of customisation in order to fit it with your processes and operations and things.

But it sounds like what we're talking about today is the ability to be able to customise it a little bit more. And, in my mind, that's come alongside how HubSpot has gone slightly more upmarket, slightly more complex implementations. Have you seen that in terms of the requirements to allow companies to customise it a little bit more?


Jeffrey: Yeah, I think that's a very valid point that needs to be considered when you're considering different CRMs. Is that Dynamics? Yes, you can configure it to your needs, but you never know if there's going to be a high level of adaptation and if users are actually going to use it properly.

And you need to put in a lot of rules and take a lot of variations, a lot of iterations of the interface in order to get that sort of adoption rate. Whereas in HubSpot, the adoption is going to be very standard and because it's so simple, you're going to face a lot of limitations as far as what you can customise in the properties, in the security.

Any CRM has a general set of rules, right? So as far as HubSpot goes, you have a general set of rules for your teams and partitioning of what records can we see? What fields can we edit? And Dynamics has the same exact thing, but Dynamics goes a level further in saying that you can partition a lot of very specific things. And that becomes a very hard thing to manage because you're using the same interface to manage not only the holistic level of what your business users are trying to access and accomplish in the system.

Whereas HubSpot says, here's a basic level. This is what you can access and accomplish. So the first question that is going to come to anyone's mind is, hey, what if we have a department that needs to see certain records and you don't want it to impact the rest of the system? In Dynamics, you have to go through a set of menus.

You have to probably go through seven or eight screens just to check off  the boxes and say, you have access to this and that. Whereas in HubSpot you just say here's your access. You can see these records. You can edit them. You can create them. You can delete them, if it's your team, if it's your own record, or you can see everything.

It makes it simpler for someone to understand as a business expert. So if you have someone who's a business expert and you want them to facilitate what the business is actually doing, you really want to make that easy for them to manage, and you don't want to have to rely on admin.

HubSpot really empowers the business users to manage their own parts of the business. Whereas Dynamics, you would need to submit a request, have an admin put it forward, test it, make sure it's good. And then you go forward.

Where is the gap in all of this? HubSpot does not have the ability out of the box to do certain functions, like partitioning certain fields, conditionally populating certain fields, restricting people from doing things.

But Dynamics, you have to go through tons and tons of admin to get that functionality in place. 


Matthew: So, speaking specifically around the recent updates that HubSpot now allows you to make on that kind of UI customisation, we saw it at INBOUND23, their main release around using the React beta, in order to be able to customise that UI place.

Maybe you could give out what has changed in your mind, Jeff, over the last few weeks and the ability to customise HubSpot a little bit more?

Jeffrey: So this is absolutely huge for bridging the gap between HubSpot and more systematic CRMs because really what React means, it's a JavaScript, it's a JavaScript library and HubSpot's used it to create a framework of components that enable us to customise the experience of a CRM card.

And the CRM card is something that's native to HubSpot. It's what's on the centre of your screen. It is the first thing that someone looks at when they open up a record. When I open up a contact, I see a CRM card. In Dynamics, you have to scroll down, you have to find where that contact lives, you have to find different menus.

In HubSpot, it's right in front of your face. And what React does is it brings the look and feel of HubSpot into a customisable CRM card where your wildest dreams are now possible. And it's all going to be the same user friendly interface that you're used to within HubSpot.

So any developer with React experience can seamlessly start creating a rapid prototype of an interface, and you can be able to use user acceptance testing. You’ll be able to start that process right away and rapid prototype. Does this actually facilitate what you're doing on a day to day basis? And it's right in the centre of your screen, instead of having to go to a developer and go through weeks of development changes and back and forth.

It's a very streamlined process of putting in this actual module so that a user can be able to see the changes in real time and test them and see if it actually helps them do their job.


Matthew: I think what you're highlighting here is that essentially people can now develop within that kind of central pillar of a HubSpot object, right?

So whether it's a contact, whether it's a company, whether it's a deal within that central piece, people can now develop within there. It still looks like the HubSpot interface. It's still as easy to use, but it opens up, as you describe, the world of opportunities and processes and operations and automations within HubSpot itself, but also within integrating and connecting with other platforms.

If we were to go through a few use cases, and I think I've had the volume of use cases described as literally endless here, if we were to pick a few, I've got a few noted down.

First of all, regarding security enhancement. How does this allow HubSpot to become a more secure tool when used in large organisations?


Jeffrey: Take the example of a deal or an opportunity in Dynamics. A deal in HubSpot says, here are the main things that you need to look at. Here's the history of the contact. Here's the emails that have been associated with this deal. Here are the notes that are associated with the deal. And here are the related records.

Alongside that, you have the option to switch over to another tab while remaining in that deal and keeping that valuable information on the left and right sidebar, but in the middle pane, you'd be able to bring up something like accounting functionality. And you would have a button that says, show me all of the invoices for this customer.

In Dynamics, you would have to do the same thing, but you would have to go to a different screen. You would have to click on a link. It would bring you to a separate window, reload your page. You might want to refer back to the deal. Or the opportunity in Dynamics while you're looking at those invoices because it's a separate object and then you can start to interact with those invoices. Those invoices will be controlled by out of the box permissions, which are in a series of menus, which an admin would need to manage.

Now, with React in HubSpot, you can open up a deal. You can see the relevant deal information that's important to you. You can see the associated records that are important to you, and you can click on the centre pane and just open up an entire accounting functionality.

But only if you are privileged to see that functionality, and that is as easy as setting up a Google configuration table, which someone like Huble would do for you. All you need to do is add the username and the user ID to that table, and now they have access. The business admin is now in charge of who has access to that without having to go through the steps of submitting a request to the technology admin and having that approved.

Having them go through seven menus to check off. Does this person have access? It doesn't matter because in the centre pane, that person will now see that accounting functionality that allows them to see the invoices and allows them to interact with those invoices, whether it be in HubSpot or through different systems.

And that can all be controlled very simply with one field being updated by a user who is the one in charge of making those decisions.


Matthew: You highlighted a couple of different benefits, right? One being that from a security perspective, you can ultimately dissect HubSpot a lot more, provide views and employees and users of the tool can ultimately have access to different things or not have access to different things based on who they are.

And I think that being able to segment HubSpot a lot more is a big customisation requirement to very large companies with lots of different divisions, lots of different teams, lots of different regions from a kind of conditional behaviour point of view.

What I mean here is, inherently or historically within HubSpot, the ability to do things like if I have a drop down and I have four options, and if I choose one, two, three, or four, something different happens, or I'm presented with a different piece of information I find presented with a different form field.

As I understand correctly, the conditional formatting piece is another piece that you can now build in, or is another example of something you can build into this new development area?

Jeffrey: Absolutely. It's not just restricted to conditional formatting. It also expands to actionable buttons. It expands to calendars.

There's a whole slew of different use cases that are enabled by this React module. So picture everyone is working off of the deal and you have multiple different departments doing different business processes, all you need to do is enable a button for each of those different departments to manage the security in one table, which is easy to use for a business admin. 

Once you enable those buttons, you can have things like a module that says, here are your service ticketing and SLA monitoring pipelines. This is your trade show floor. You can have actual pictures where you can interact with actual buttons on the screen that says here, I'm actually reserving a table like at a wedding.

Field service management, installation checklists, where if you have field service and you want to send out an installer to go and install a roof per se, you need to fill out a checklist. Easily accessible. If I'm a roofer, I just need to go into HubSpot, click on the installation checklist button, and I'm going to see everything that I need to see right on the deal.

I'm not going to need to navigate to nine different tabs. I'm not going to need to open any other windows. It's all going to be right there in front of me because my role is going to partition what access I need to specific modules that is going to make my job more efficient.

And seeing all these things from a user perspective is extremely powerful because everyone navigates to the same place and the React module is controlled in the sense that you're only showing the functionality that person needs to see in order to get their job accomplished. And that can expand like the examples that I mentioned.

It can also expand to CPQ. It can expand to inventory shipping and supply chain management. Submitting purchase orders. A big one is submitting time sheets. Who wants to go into a deal? Who wants to search for a deal? And then log their time on a child record in a separate window on a separate screen. No, you can just do that on the deal.

You click on the centre pane and you say, submit my timesheet for today. And you have a nice clean interface of here's how many hours I've logged for this. And you can put in details. You can make this as vast or as simple as you want. And the developers have control of how you want that to be portrayed to the user to accommodate for the maximum adoption.


Matthew: Great examples of how you can especially interact with other HubSpot objects, if you're in a particular HubSpot object and you're looking to see information or interact or submit information, read information from other HubSpot objects or data that's in the HubSpot platform.

Jeff, can you talk about the ability to also see that information, be it reading stuff, be it submitting information, interacting with third party platforms that sit outside of HubSpot?


Jeffrey: The beauty of React modules is that it can read data from any related object. So you can pull information from the contact. You can pull information from child records, like transactional records. You can pull information like line items, like products. If you have multiple products that you want to show on a deal, you can open up that deal and you can say, here are all the products that I have the customer assigned for.

Now, I want to order them as a purchase order. I can now see all of the line items that the customer assigned and I can pick the quantity that I want to send downstream to a third party system, for instance, QuickBooks. All you need to do from a user perspective is put in the amounts that you're ordering and click the submit button.

The React module can have the ability to send that information downstream to a third party system seamlessly. Then, if the third party system allows, you can also have a response and a web hook for when that information is updated and you say the inventory is now received, it can update HubSpot directly.

You can have a simple view on your screen that says, here are all the purchase orders that I've made over the last week. Here's the status of each of them. I can go through that view and say, here's the status of each. But the real power of the React module is not just limited to what data is within HubSpot and it's not limited to sending data downstream to third party systems.

It's a module in the sense that you can also act as a traditional CRM card would, where you can read data from third party systems in real time. When the React module loads, and you click on the centre pane, and you say, I want to open up my purchase orders, you'll be able to see the inventory on hand.

So you know what the outlook is from a holistic point of view. And say, do I need to order this much? No, because we have enough inventory. Or you can say, yes, I do need to order that much.

You're reading information from third parties, you're allowing the user to input it on one screen and submit it and it goes downstream to the third party system, which also does have an impact on licences if you need to have a service account that goes downstream.

Instead of having 10 users in QuickBooks, just so that they can create purchase orders. You might just need one user controlled by the permissions that we enable in HubSpot and those users can submit purchase orders without needing a QuickBooks licence.


Matthew: Obviously this is a relatively new area of development and part of HubSpot they've provided the ability to develop and customise a little bit more.

Do you have any examples yet of how you're looking to implement this in clients, have you put this into practice as of yet?


Jeffrey: We've had an example of an entire inventory management system, a third party, that was managing all of the in and outs of the inventory and supply chain management.

And we said, you know what, with this React functionality, we can actually replicate everything that this third party is doing. So let's just build it in HubSpot, so that we can create a seamless environment for a user to interact with the data that they need to interact with and fulfil the needs of the business. If we can recreate things that third party systems are doing in a module that's right on the interface of HubSpot, it's infinitely valuable because otherwise you're opening up multiple screens, multiple windows.

You're constantly having the struggle of moving data manually between two systems and being able to actually see all that data in HubSpot and interact with it and actually move the process forward without having to leave one screen is a huge benefit as far as user adoption.

And that's a huge point for any large company, any small company, any company at all, because you don't want to spend your whole time training and that's the difference between HubSpot using React and Dynamics is, that in Dynamics, you're going to need to retrain, retrain, have admin privileges granted.

In HubSpot, it's all seamless. You can build these modules to your liking and your imagination is the end point, there is no limitation of what you can build. React makes the user's experience in HubSpot even better than it already is. HubSpot is already great. And this just takes it to a whole another level where enterprise clients can benefit from the ease of use, the training aspect and just the robustness of it.


Listen to the full episode below if you would to know more about Jeffrey's background. Check out the other episodes of the Evolving Podcast here.


Unlock the full power of CRM customisation with Huble

The ability to tailor your CRM system to your unique needs can be a game-changer.

As we've explored, CRM customisation allows you to align your CRM with your specific business processes, enhancing user adoption, data accuracy, and personalisation.

When it comes to CRM customisation, HubSpot's React UI customisation takes the game to a whole new level. With its user-friendly interface and robust capabilities, it empowers businesses to streamline processes, boost efficiency, and maximise the value of their CRM.

We hope this podcast episode has shed light on the incredible potential of HubSpot's CRM customisation and React UI features.

If you want to find out how to customise HubSpot CRM, consider partnering with experts like Huble, who can guide you through the process and ensure you're making the most of HubSpot CRM customisation.

Reach out to our team today to kickstart your CRM transformation.

Looking for integration support?

Learn about our integrations now

Latest Insights

Marketing & Growth

19 min read

Essential HubSpot workflows you should implement today (July 2024)

HubSpot workflows are the perfect way to automate professional processes. We unpack our favourite HubSpot workflows to showcase how useful they are.

Read more

Marketing & Growth

24 min read

Your guide to building multi-language websites in HubSpot

Explore how to create multilingual websites in HubSpot Content Hub, how best to use them, and best practices for maximising their impact.

Read more

Sales & CRM

91 min read

The true cost of HubSpot: Exploring HubSpot's Total Cost of Ownership

This guide takes a look at the total cost of ownership (TCO) of HubSpot as well as the TCO of Marketing Hub, Sales Hub, Service Hub and Content Hub.

Read more

Sales & CRM

20 min read

HubSpot HIPAA compliance: everything you need to know

Explore HubSpot's HIPAA compliance. We cover the basics of HIPAA, challenges HubSpot faced, and HubSpot's new tools to meet compliance requirements.

Read more

Marketing & Growth

21 min read

Enhancing your marketing processes with HubSpot AI

Learn how you can integrate HubSpot’s AI assistants into your marketing processes to optimise your efforts and supercharge efficiency. 

Read more

Sales & CRM

17 min read

How to plan for a successful HubSpot Implementation

Key aspects of planning and managing HubSpot implementation. We'll guide you through every step to ensure a successful HubSpot implementation.

Read more

Marketing & Growth

10 min read

Why it might be time to consolidate marketing agencies

Learn why & when to consolidate your marketing efforts with an agency specialising in strategy, creative solutions & technical expertise.

Read more

Technical & Integrations

5 min read

HubSpot’s cookie consent banner update: What you need to know

HubSpot is updating its cookie consent banner to version 2 on July 5, 2024. Here’s what you need to know about the update & how to prepare for it.

Read more

Sales & CRM

27 min read

HubSpot user adoption: a comprehensive guide to boosting CRM adoption

Explore strategies, best practices, and tools to drive user adoption in HubSpot, ensuring a smooth transition and maximising user engagement.

Read more

Sales & CRM

37 min read

HubSpot security and compliance: best practices and automated tools

Explore how to leverage HubSpot’s security tools and resources to mitigate risks and ensure Security and Compliance in HubSpot.

Read more