Sample UI extensions (BETA)
Check out HubSpot's sample UI extensions to get familiar with what's possible when building UI extensions. These sample projects can be used as inspiration, reference, or starting points for your own projects.
Please note:
- Unless otherwise noted, these sample UI extensions are built for private apps, which require a Sales Hub or Service Hub Enterprise subscription to install in a standard HubSpot account.
- A paid subscription is not required to install sample apps in a developer test account. All of these sample extensions can be used as a inspiration for a public app built in a free developer account.
- The line and bar chart sample code is specific to building UI extensions with a public app.
- Bidirectional property refresh
- Build a multi-step flow
- Create a deals summary
- Custom logger example
- Display an iframe modalBeginner
- Duplicate contactBeginner
- Generate multiple quotes
- Line and bar charts
- Manage layouts: Flex and BoxBeginner
- Overlay exampleBeginner
- Use CRM data componentsBeginner
- View nearby companies: Mapbox API
View the source code in GitHub
Provides bidirectional refresh of contact property changes between a custom card and the CRM record page.
Example use case: a salesperson in your account makes frequent changes to a contact's properties and associated fields on a custom card and requires a seamless editing experience to avoid manual page refreshes.
What's included: a Refresh properties between custom card and CRM page card that displays the latest firstname
and lastname
property values when changed on the CRM record page, as well as a lifecycle stage dropdown menu that you can update on the card and immediately see the change reflected on the CRM record page.
What you'll learn:
- How you can use the
fetchCrmObjectProperties
andonCrmPropertiesUpdate
actions to listen to changes on the CRM record page and fetch the latest values. - How you can ensure data in the custom card stays up to date with the
refreshObjectProperties
action.
View the source code in GitHub
Send a meal from a local restaurant to one of your contacts.
Example use case: with one of their agency partners working overtime to close an upgrade deal, an account manager wants a way to order them dinner from the CRM as a thank you.
What's included: an example card for contact records featuring search, data validation, custom components, and more.
What you'll learn:
- Searching a table, including pagination.
- Implementing realtime form validation.
- Fetching data asynchronously with HubSpot serverless functions.
- Including empty, error, and loading states.
- Using the Panel component to display a form.
- Getting current contact properties.
- Getting current user properties.
- Triggering alerts in the CRM outside of the card 's boundaries.
View the source code in GitHub
View a high-level summary of data from associated deals. Follow the tutorial (also included in the project's README.md file) to walk through how to add the extension to your account, create two example deal records to display data from, then customize the extension with additional components.
Example use case: a salesperson needs a way to quickly view important deal information from their contact records so that they can plan, prioritize, and report on their efforts.
What's included: an example card for contact records that aggregates and displays associated CRM record data.
What you'll learn: how to surface data from associated CRM records and how to customize extensions with additional components.
View the source code in GitHub
Explore the various logger
API methods by sending custom logs from deployed extensions. When used in local development mode, logs will be sent to the browser console. In cases where the extensions fail to load, a trace ID will be generated which you can then use to trace the log within the app's logs in HubSpot. Learn more about the custom logger API.
What's included:
- Middle column card: an example card for the middle column of contact records, which includes custom logging for serverless function success/failure, logging different types of information, and logging for extension failure.
- Sidebar card: an example card for the right sidebar of contact records, which includes custom logging for serverless function success/failure, logging different types of information, and logging for extension failure.
What you'll learn: how to use the custom logger API to enable more in-depth troubleshooting of UI extensions.
View the source code in GitHub
Open a popup iframe modal on button click to embed external content on CRM records. Learn more about opening iframe modals in UI extensions.
Example use case: you want to embed a section of your company's ERP so that sales reps can check inventory levels when putting together potential deals.
What's included: an example card for contact records that includes descriptive text and a button that loads Wikipedia in an iframe modal.
What you'll learn: how to launch a modal that contains an iframe for displaying external content.
View the source code in GitHub
Duplicate a contact along with some of its properties and associated deals and companies.
Example use case: after an in-person consultation, a marketer needs a way to quickly create several contact records for a new group of clients who share similar data.
What's included: an example card for contact records featuring data display and form submission.
What you'll learn:
- Fetching data asynchronously using HubSpot serverless functions.
- Using loading and error states.
- Making GraphQL calls inside serverless functions.
View the source code in GitHub
Match a customer with a service based on specified criteria, then generate a sales quote. The extension is built on top of the HubSpot quotes tool and uses the quotes API.
Example use case: a fictional shuttle bus rental company with several service options needs a way to match customers with the most appropriate service, then generate a quote for them.
What's included: a Shuttle bus quotes sample card for deal records featuring a multi-part form and quote generator.
What you'll learn:
- Building multi-page forms.
- Fetching data asynchronously using HubSpot serverless functions.
- Customized sales quote generation.
View the source code in GitHub
Render two example charts based on customer purchase history and revenue distribution over time.
Example use case: you want to analyze revenue data associated with a contact so you can reach out to them with other related products they might be interested in.
What's included: a LineChart
component and BarChart
component that render based on randomly generated test data.
What you'll learn:
- Configuring line and bar chart display options.
- Formatting test data to render correctly in the context of the two chart types.
View the source code in GitHub
Learn how the Flex
and Box
components can be used to manage extension layout.
Example use case: you want to customize the structure of your card and its various components to better organize information and improve UX.
What's included:
- Flex playground card: a card for deal records where you can experiment with various
Flex
props to better understand how they work together.
- Flex and box example card: a real estate listing card for deal records that uses
Flex
andBox
to arrange information on each listing. This card does not include any real data handling functionality. The example data is hardcoded for component demonstration purposes only.
What you'll learn:
- Using the
Flex
andBox
layout components. - Improving
Form
component arrangement. - Optimizing the space of your cards through a variety of components.
- Using
Tile
components to group information. - Including multiple extensions in one project.
View the source code in GitHub
Explore the types of extension overlays available, including all variants available for Modal and Panel.
What's included: a card for contact records that lists all available Modal
and Panel
variants in an interactive table.
What you'll learn: how to launch and close Modal
and Panel
components from an extension.
View the source code in GitHub
View a contact's associated deal information in a table, then navigate to the deal record to view and modify its progress in the sales pipeline.
Example use case: a salesperson needs a way to quickly view a contact's associated deal information, then navigate to the deal record to confirm the deal's progress and close it.
What's included:
- Association Table Card: a card for contact records to display high-level associated deal information in a table.
- Stage Tracker Card: a card for deal records to view and update pipeline stage progress.
What you'll learn:
- Using CRM data components, which are pre-configured to display CRM data.
- Using the
Flex
layout component. - Making API calls to the HubSpot API using serverless functions.
- Fetching properties for the currently displaying record.
View the source code in GitHub
Find and display companies that are located near the currently displaying company record.
Example use case: a salesperson will be traveling to visit client and wants to know if there are other companies they can visit along the way.
What's included:
- Top value companies within radius: a card for company records to show the companies nearest to the currently displaying record.
- Nearest companies to currency company record: a card for company records to search for nearby companies by mile radius.
What you'll learn:
- Including multiple UI extensions in one project using one private app.
- Working with third-party data.
Thank you for your feedback, it means a lot to us.