Sample projects (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

Create UI extensions using HubSpot's sample projects to get familiar with what's possible when building CRM UI extensions. These sample projects can be used as inspiration, reference, or starting points for your own projects.

Below, learn more about the currently available sample projects.

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 through the tutorial to add the project 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.

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: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.

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.

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.