Starting September 18th, HubSpot app partners can request early access to the new development model that enables developers to build UI extensions and more with modern development tools. This model leverages UI extensions built with React, expanding customization capabilities for app cards in the HubSpot Customer Platform. It also includes building webhooks for 25 new objects via code-based JSON configuration, managing the app lifecycle with the HubSpot CLI, and handling app configurations as code to use source control systems like GitHub to collaborate with your development teams.

This change supports existing app features and infrastructure while integrating new tools. HubSpot’s vision is to foster a more open platform to enhance app experiences and integrations by meeting developers where they are. UI extensions transform integration into front-end experiences with actionable insights into users’ everyday flow and increase app visibility and adoption within HubSpot. This drives engagement and delivers value by surfacing your app in more places, making data and services more useful and actionable for customers, and directly contributing to business growth.

Please refer to the details below for a clear overview of the changes in this new development model and discover a new way to build apps.

What's changing?

The following changes aim to provide deeper customization, streamlined development processes, and greater flexibility for integrating with HubSpot's Customer platform.

Data-fetching with hubspot.fetch():

• With public apps, you must support your own REST-based backend and use the hubspot.fetch() method to fetch data. Each app is allowed up to 20 concurrent requests per account where it is installed. If this limit exceeds, additional requests are rejected with a 429 status code. Each request has a max timeout of 15 seconds. Both the request and response payloads are limited to 1MB. Developers can specify a shorter timeout for individual requests using the timeout field. For more details and examples, refer to the hubspot.fetch documentation.

Feature Flag API for Public Apps: 

• This API enables feature flag management on both a global (app-wide) and portal-specific (account) level, allowing developers to control and fine-tune the rollout of app cards to installed accounts. The API has two primary resources: Flags and Portal Flag States. For more information and examples, refer to the Feature Flag API documentation. 

Expanded Webhook Capabilities:

• Create webhook subscriptions for 25 new objects using code-based JSON configuration within developer projects, expanding the scope of automation and integration possibilities.

HubSpot CLI Integration:

• Utilize the HubSpot CLI to manage the entire lifecycle of app development, from account authentication to project creation, deployment, and local testing, ensuring a seamless development workflow.

Manage your App using Projects:

• Manage app features and configurations as code, allowing the use of source control systems like GitHub and other DevOps systems for efficient collaboration with development teams. Changes made as new uploads are stored as builds that can be deployed and easily rolled back if necessary. Features not compatible with projects are backwards compatible using existing methods, ensuring a smooth transition and integration of new capabilities. Learn more about creating public apps with projects.

Continued Support for Existing Infrastructure:

• Developers can still use their existing infrastructure and backend to enhance app development.
• Non-supported features such as workflow actions, timeline events, and app settings can still be managed through a hybrid development model utilizing existing development methods.

These changes are designed to empower our app partners with modern development tools, enhancing their ability to create highly customizable applications within HubSpot.

Resources

Depending on whether you’ve leveraged UI extensions for private apps, there are two primary flows to get started with this feature!

1. Build a new app
2. Migrate your existing app or private app

Here are additional resources to begin your journey and learn more about customizing your app with UI extensions:

• Limitations of UI Extensions: Understand the current limitations to plan your development effectively.
• UI Components: Explore a rich library of UI components to build your extensions.
• Additional Utilities: Utilize a range of methods available inside the UI Extensions SDK for actions such as:
  • Displaying banners
  • Opening/closing panels or modals
  • Fetching CRM object properties
  • Refreshing properties
  • Listening to changes
  • Logging custom messages
• Public App Sample: Review a good example of how to structure your files for public apps and use various UI components.
• Sample Projects (Private Apps): These projects are designed to build private apps using serverless functions with the hubspot.serverless() API. Many frontend aspects are transferable to public apps, which you can use hubspot.fetch to interact with your self-hosted or local backend. Additionally, you can find bash scripts in this repository for testing and utilizing the new Feature Flag API features, allowing for seamless automation and feature management. 
• CRM Customization Page: Access detailed information about customizing your CRM experience.

These resources will help you get started and make the most of the new development model for HubSpot Marketplace apps.

When is it happening?

Early access will launch on September 18th, 2024, with the official release expected in April 2025.

Do you have questions or comments? Please refer to this landing page to request early access, refer to additional resources, and get guidance on building UI extensions for your marketplace app.