Sample projects (BETA)

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

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: one card for contact 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 quote generation.

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:

• One custom card for company records to search for nearby companies by mile radius.
• One custom card for company records to show the companies nearest to the currently displaying record.

What you'll learn:

• Including multiple UI extensions in one project using one private app.
• Working with third-party data.

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: one custom 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

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: one custom 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.
• 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 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:

• One custom card for contacts records to display high-level associated deal information in a table.
• One custom 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