Please note: previously, this page was titled "CRM development tools overview." It has been updated to reflect the expanded toolset, as UI extensions can also be used to customize the help desk preview panel UI. All previous CRM development tools documentation has been expanded and moved to the guides section. This page has been updated for posterity.
UI customization overview (BETA)
Customize HubSpot's UI by building UI extensions, powered by public and private apps. UI extensions are developed locally using the developer projects framework, and enable you to use features like development sandboxes, version control, and integration with GitHub to streamline your process.
For example, you can build an app card that retrieves data from an external source.
Below is an overview of the tools you'll use during the UI extension development process, along with links to in-depth documentation to guide you along the way.
Please note: there are a few ways to use HubSpot's UI customization tools, depending on your HubSpot subscription:
- Building UI extensions for private apps in a standard HubSpot account requires a Sales Hub or Service Hub Enterprise subscription. However, a paid subscription is not required to create UI extensions for private apps in developer test accounts.
- Public apps are built in developer accounts, which don't require a paid subscription. If you're enrolled in the UI extensions for public apps beta, learn more about building UI extensions for public apps.
Projects are the highest level container of UI extension development, as they contain not only UI extensions, but also the app that powers them, along with all other supporting assets. Projects also enable a build and deploy process on HubSpot's platform with the hs project CLI commands, which you'll use for version control as you build. Once deployed to an account, you can view and manage the project, app, and any included UI extensions in HubSpot. This includes viewing build history and monitoring API calls.
Learn more about creating projects, and get started by following the UI extension quickstart guides for private apps or public apps.
Apps are the powerhouse of UI extensions, enabling you to authenticate requests for data fetching and more. You can build UI extensions for both public apps and private apps, depending on your use case. The main differences between which type of app to use include:
- HubSpot subscription: you'll need a Sales Hub or Service Hub Enterprise subscription to build UI extensions for private apps in a standard HubSpot account. However, you can try out the toolset for free by opting a developer test account into the beta. And because developer accounts are free, a paid subscription is not required for building with public apps.
Please note: the ability to build UI extensions for public apps is currently in Early Access beta, and enrollment is separate from the CRM development tools to build UI extensions with React as frontend beta for private apps.
- Distribution: private apps are more intended for use in individual accounts as needed, as they must be created on a per-account basis. Public apps are intended for use in multiple accounts and include an easy installation flow for the end-user. If you intend to list your app on the App Marketplace, you'll need to build a public app.
- Authentication: private apps fetch data using serverless functions, and HubSpot provides the back-end by authenticating requests with an access token. Public apps fetch data with the
hubspot.fetch()API and authenticate requests with OAuth, which require you to provide a custom back-end. Because OAuth tokens are short-lived, your integration will need to have the infrastructure to securely store, manage, and refresh tokens. - Supported features: while both app types support UI extensions, public apps enable you to include more types of extensions as features in your app, such as timeline events or using the calling SDK.
Learn more about the differences between these types of apps, as well as how to create and configure both public apps and private apps locally using projects.
UI extensions are custom-built, React-based UI elements that enrich HubSpot's interface. At this time, possible UI extensions include app cards for CRM records and help desk. For example, you can create a card that enables users to submit form data to an external database from any contact record, or a card that customer support reps can use to take action on open tickets in the help desk UI.
UI extensions are built using projects and consist of a front-end and back-end:
- UI extension front-end: the user-facing part of the extension in the form of an app card consisting of HubSpot-provided components. Along with displaying information, users can interact with components to perform a variety of actions. You'll build the front-end with either React or TypeScript.
- UI extension back-end: private apps fetch data through serverless functions, which allows a UI extension to send and retrieve data to display in components, while the back-end is provided by HubSpot. Public apps instead use the hubspot.fetch API, which requires you to bring your own REST-based back end for authenticating and authorizing requests.
Learn more about UI extensions.
For private app development, you can use development sandboxes to develop projects in a lightweight testing environment to ensure your project's components work as expected before deploying to a standard sandbox or production account. Development sandboxes are created through the CLI and can be accessed within production HubSpot accounts. Development sandboxes sync some, but not all, account assets on creation, and have additional limits compared to standard sandboxes.
When building UI extensions for a public app, you'll instead use test accounts within your developer account.
Learn more about setting up a development sandbox.
If you prefer to use GitHub for version control, you can connect a GitHub repository to a project to automatically trigger project builds when you push a change to the connected repository. You can then use use GitHub tools and workflows to streamline development, whether you work alone or with a team.
If you're a Super Admin in a Sales Hub or Service Hub Enterprise account, you can join this beta from the Product Updates page in your HubSpot account:
- In your HubSpot account, click your account name in the top right corner, then click Product updates.
- In the left sidebar, select In beta.
- In the list of betas, search for or scroll to the CRM development tools to build UI extensions with React as frontend beta, then click Join beta.
After joining the beta, get started with any of the following options:
- Follow the quickstart guide to quickly build and deploy a working example app card.
- Check out HubSpot's sample extensions to see examples of what's possible.
- Build your project from scratch by starting with the HubSpot projects guide.
The ability to create UI extensions for public apps is in Early Access beta, which you can request access to here. Once you're enrolled in the beta, start with the following resources:
Thank you for your feedback, it means a lot to us.