Sample projects (BETA)

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

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

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

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.

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.