April’s changes include updates to the Quotes API, HubDB Image fields, workflow enrollment notifications, and a new CLI version. Also included is information for developers around Content Hub, Custom CRM Cards for tickets display on Service Hub’s help desk, UI extensions support for the record preview sidebar, a new content library module, and updates to the UIE extensions beta.

Developer Updates for April 2024

Update to Quotes API: Payable Quotes

Users can now enable payment processing directly on quotes created via the HubSpot Quotes API, provided their HubSpot account is configured with HubSpot Payments or Stripe payment processing.

The API now supports several properties to configure payments on quotes:

• hs_payment_enabled: A boolean that activates payment collection on the quote when set to true. The default is false.
• hs_payment_type: Specifies the payment processor, either HUBSPOT or BYO_STRIPE.
• hs_allowed_payment_methods: Defines available payment methods, such as CREDIT_OR_DEBIT_CARD or ACH.
• hs_collect_billing_address and hs_collect_shipping_address: Booleans that, when set to true, allow the collection of billing and shipping addresses during checkout, respectively.

Example Configuration for a Payable Quote:

This change also supports automated payment status tracking:

• Initial Status: hs_payment_status is automatically set to PENDING upon publishing a payable quote.
• During Payment Processing (ACH): Status updates to PROCESSING.
• Upon Payment Confirmation: Status changes to PAID, and hs_payment_date is recorded.
• Quote Association: Post payment confirmation, the payment is automatically linked to the quote, and further details can be accessed via the Payments API.

This update allows seamless payment processing integration into quotes, ensuring efficient tracking and management through the HubSpot interface.

Alt text and image dimensions now rolling out to HubDB Image Fields

You can now set alt text and image height and width on images within the HubDB image column type. In the table-based editor for HubDB tables, when a user edits an image column, there is a new sidebar where the image, alt text, and height/width can all be set and saved. In the form-based HubDB editor, the alt text and image height/width fields will be present to edit.

Developers can then access the values of these new fields (altText, width, and height) through HubL the same way they currently access the image url:

Daily Workflow Enrollment Change Notifications now available (Enterprise Only)

You can receive daily email notifications to monitor workflow enrollment trends over the last 7 days that are not within the user-defined change thresholds you have defined. This will allow you to proactively receive daily updates on workflow performance, and identify potentially problematic changes without manually checking.

 Learn more about this feature in our knowledge base article.

Content Hub information for developers

As you may have seen, we’ve launched Content Hub! With this new hub, we’ve released new features within the Hub. Below is a quick list of things developers should know with regard to these new features:

• A new Memberships App: For new Content Hub customers, the new Memberships App allows customers to create "Access Groups". Access Groups are a new way to manage contact's access to content. Existing customers who are already using Memberships will be migrated to the new application later this year. Within the memberships application, users can do the following:
  • Create an Access Group using our group creation wizard. Users can create either static or dynamic groups. Static groups contain contacts imported from lists or manually selected. Dynamic groups use CRM-filters to determine group membership.
  • Manage their members. Click into your access groups to add/remove members from a static access group or update your filters from a dynamic one. Additionally, users can resend registration emails from the application.

• Post Narration: This feature converts blog post content into engaging text-to-speech audio through an embedded module for your blog post. To get started enabling post narration on your templates, you will want to make sure to add the following snippet to your template where you want the module to appear (as described in our knowledge base article):
• Post teasers for Members Only Blogs: With this feature, you can create gated member-only blog posts by editing the “Access Controls” within your page settings and choosing “self-registration required” (or by choosing the “Give anyone access to the entire blog but only members access to full posts” option in your blog's global setting). This allows visitors to see a partial view of your post utilizing the “Read More” separator to flag where the content should stop being shown. See more in this video.

CLI 5.2.0

We’ve released version 5.2.0 of our CLI. To upgrade to the newest release, run the npm i -g @hubspot/cli@latest command. Changes include:

• Added support for React modules in the hs create command
• Added a get-react-module subcommand (hs cms get-react-module)
• Updated our errors and warnings for projects with retired and unspecified platform versions

New Module: Content Library

We’ve added a new module for your website, blog, and landing pages. Introducing the Content Library module. This module allows you to quickly build out a content library complete with 3 different layout styles and a plethora of settings. Use it today by dragging it onto your content.

Custom CRM Cards for tickets display on Service Hub’s help desk workspace

Help Desk is an all-in-one, ticket-based workspace designed for reactive support teams to efficiently and effectively manage and resolve customer issues. It combines the best of both the existing conversations inbox and tickets to provide a true home base for support teams in HubSpot.

In order to ensure that existing HubSpot customers who are already using the ticket object and record page can more easily begin taking advantage of all that help desk has to offer, any integrations that display custom crm cards on the ticket record sidebar will also display in help desk. This means that customers can start leveraging your integration in help desk, with no extra work or adjustments from you.

UI extensions: Support record page preview sidebar as new location

The preview sidebar enables reps to get a quick summary of a record without leaving the index page. This sidebar can now be customized to display different information based on the user (see knowledge base article). With this, you can now build extensions for the preview sidebar as a new location so that users can get the right information from different systems in one single view without having to open the record page, resulting in increased efficiency and productivity.  

To see a demo, check out this video on the HubSpot Developers YouTube channel.  Read more in the developer documentation. 

Public Betas

UIE Extensions Beta Updates

This month, the latest public beta for UIE extensions has added new components, additional properties, and a new sample app. Please see below for more information.

UI Components Updates

• Tile Component Enhancements:
  • Compact Property Added: A new compact prop has been introduced to the Tile component, allowing developers to optimize space and control the layout more effectively within UI designs.
• Alert Action Updates:
  • Title Property Added: A title prop has been added to the alert action component, enabling better context and clarity for user interactions.
• Popup Iframe Enhancements:
  • New properties added: ‘title’ and ‘flush’ Enhancements to the pop-up iframe include the addition of a title prop, which improves content description and accessibility. The flush prop allows the removal of default padding and margins for spacing customizations.
• CRM Action Button Sizes:
  • New Size Options: The CRMActionButton now supports xs and sm size options, offering greater flexibility in button sizing to fit various UI needs.

Sample Apps

Customer Logger Sample App:

A new sample application demonstrating custom logging functionality is now available. This app provides a practical example of how to implement logging in HubSpot UI extensions.

Restructured UI Component Docs

We have restructured the UI component documentation to enhance the developer experience. The restructuring aims to make the documentation more user-friendly and efficient for developers working with our CRM development tools' UI extensions. The key updates include individual pages for each UI component, integrated design guidelines, enhanced navigation, a props table for components, and new component alerts for newly launched components.

This update will automatically replace the current documentation. No further action will be needed to access these.

Questions or comments? Discuss this these updates on our developer community forums.