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

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.

bi-directional-crm-record-card-sync

What you'll learn:

  • How you can use the fetchCrmObjectProperties and onCrmPropertiesUpdate 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.

Build a multi-step flow

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.

ui-extension-sample-multi-step-flow-with-panel

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.

Create a deals summary

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.

ui-extensions-deals-summary-sample-extension

What you'll learn: how to surface data from associated CRM records and how to customize extensions with additional components.

Custom logger example

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.
    custom-logger-example-middle-panel-card
  • 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.
sidebar-card-logging-example

What you'll learn: how to use the custom logger API to enable more in-depth troubleshooting of UI extensions.

Display an iframe modal

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.

ui-extensions-iframe-modal-example

What you'll learn: how to launch a modal that contains an iframe for displaying external content.

Duplicate contact

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.

sample-project-contact-duplication

What you'll learn: 

  • Fetching data asynchronously using HubSpot serverless functions.
  • Using loading and error states.
  • Making GraphQL calls inside serverless functions.

Generate multiple quotes

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.

ui-extensions-multiple-quotes-example

What you'll learn:

  • Building multi-page forms.
  • Fetching data asynchronously using HubSpot serverless functions.
  • Customized sales quote generation.

Line and bar charts

Please note: this example only works when building UI extensions in a public app.

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.

example-charts-for-sample-apps-doc

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.

Manage layouts: Flex and Box

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-playground-card-demo

  • Flex and box example card: a real estate listing card for deal records that uses Flex and Box 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. 

flex-and-box-example-card-demo

What you'll learn: 

  • Using the Flex and Box 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.

Overlay example

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.

overlay-sample-project

What you'll learn: how to launch and close Modal and Panel components from an extension.

Use CRM data components

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.

ui-extensions-association-table-sample

  • Stage Tracker Card: a card for deal records to view and update pipeline stage progress.

ui-extensions-deal-stage-tracker-sample

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 nearby companies: Mapbox API

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.

    ui-extensions-search-by-radius
  • Nearest companies to currency company record: a card for company records to search for nearby companies by mile radius.
    ui-extensions-promixity-current-company

What you'll learn:

  • Including multiple UI extensions in one project using one private app.
  • Working with third-party data.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.