CRM action components (BETA)

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

CRM action components provide a built-in set of CRM-related actions, including adding notes to records, opening a one-to-one email composition window, creating new records, and more. Each component can perform the same set of actions, so which component to choose will depend on your needs and preferences.

Below, learn more about CRM action components and actions available to each.

CRM action components are imported from @hubspot/ui-extensions/crm.

import { CrmActionButton, CrmActionLink, CrmCardActions } from '@hubspot/ui-extensions/crm';

Available components

crm-card-actions

  1. CrmActionButton: renders a button.
  2. CrmActionLink: renders a clickable link.
  3. CrmCardActions: renders dropdown menu buttons in the top right of the extension.

Users can only take actions through these components when they have the proper permissions. For example, if a user doesn't have permission to create deal records, they won't be able to use a CRM action component to create a deal record. Instead, an error message will be generated and returned through an optional onError callback.

Each action requires an actionType and actionContext.

  • actionType: the type of action. See the available actions section below.
  • actionContext: the CRM object and record context required for the action to be performed. For example, to include an action to open a preview sidebar for a specified record, you'll need to provide the record's objectTypeId and objectId in actionContext. See the available actions section for more information about what's required for each action.

Available actions

Preview a CRM record

The PREVIEW_OBJECT action opens a preview sidebar for the specified CRM record.

Requires the following actionContext:

  • objectTypeId: the CRM record's object type (e.g., 0-1 for contacts). See full list of object IDs.
  • objectId: the ID of the CRM record to preview.
<CrmActionButton actionType="PREVIEW_OBJECT" actionContext={{ objectTypeId: "0-3", objectId: 123456 }} variant="secondary" > Preview deal </CrmActionButton>

Create a note

The ADD_NOTE action opens a note composition window, enabling users to add a note to the specified CRM record.

Requires the following actionContext:

  • objectTypeId: the CRM record's object type (e.g., 0-1 for contacts). See full list of object IDs.
  • objectId: the ID of the CRM record.
<CrmActionButton actionType="ADD_NOTE" actionContext={{ objectTypeId: "0-3", objectId: 123456 }} variant="secondary" > Create note </CrmActionButton>

Send a one-to-one-email

The SEND_EMAIL action opens a one-to-one email composition window, enabling users to send an email to the specified contact or the contacts associated with the specified record.

Requires the following actionContext:

  • objectTypeId: the CRM record's object type (e.g., 0-1 for contacts). See full list of object IDs.
  • objectId: the ID of the CRM record to send the email to.
<CrmActionButton actionType="SEND_EMAIL" actionContext={{ objectTypeId: "0-3", objectId: 123456 }} variant="secondary" > Send email </CrmActionButton>

Schedule a meeting

The SCHEDULE_MEETING action opens a window for scheduling a meeting.

Requires the following actionContext:

  • objectTypeId: the CRM record's object type (e.g., 0-1 for contacts). See full list of object IDs.
  • objectId: the ID of the CRM record to schedule the meeting with.
<CrmActionButton actionType="SCHEDULE_MEETING" actionContext={{ objectTypeId: '0-1', objectId: 123456 }} > Schedule meeting </CrmActionButton>

Create an associated record

The OPEN_RECORD_ASSOCIATION_FORM action opens a side panel for creating a new record to be associated with another.

Requires the following actionContext:

  • objectTypeId: the type of CRM record to create (e.g., 0-2 for companies). See full list of object IDs.
  • association: an object containing information about the record that the new one will be associated with. This is typically the currently displaying record. Contains:
    • objectTypeId: the type of CRM record to associate the new one with.
    • objectId: the ID of the CRM record to associate the new one with.
<CrmActionButton actionType="OPEN_RECORD_ASSOCIATION_FORM" actionContext={{ objectTypeId: '0-2', association: { objectTypeId: '0-1', objectId: 123456 } }} > Create new record </CrmActionButton>

Navigate to an engagement

The ENGAGEMENT_APP_LINK action navigates the user to a specific engagement on a CRM record timeline, such as a call or task.

Requires the following actionContext:

  • objectTypeId: the type of CRM record to navigate to (e.g., 0-2 for companies). See full list of object IDs.
  • objectId: the ID of the CRM record to navigate to.
  • engagementId: the ID of the engagement, such as a task or note.
  • external: optionally, set to true to navigate to the engagement in a new browser tab.
<CrmActionButton actionType="ENGAGEMENT_APP_LINK" actionContext={{ objectTypeId: "0-2", objectId: 2763710643, engagementId: 39361694368 }} variant="secondary" > Open note </CrmActionButton>

Navigate to a CRM record

The RECORD_APP_LINK action navigates the user to a specific CRM record.

Requires the following actionContext:

  • objectTypeId: the type of CRM record to navigate to (e.g., 0-2 for companies). See full list of object IDs.
  • objectId: the ID of the CRM record to navigate to.
  • external: optionally, set to true to navigate to the record in a new browser tab.
  • includeEschref: optionally, set to true to include a Back button in the top left corner of the opened CRM record to navigate the user back to the original record.

ui-extensions-crm-action-back-button

<CrmActionButton actionType="RECORD_APP_LINK" actionContext={{ objectTypeId: "0-2", objectId: 2763710643, includeEschref: true }} variant="secondary" > View company </CrmActionButton>

Navigate to a HubSpot page

The PAGE_APP_LINK navigates the user to any page within the HubSpot account. Use this action when a user would need to navigate to a non-CRM record account page, such as the email tool.

Requires the following actionContext:

  • path: the URL path of the HubSpot page. This path is relative to https://app.hubspot.com and should begin with /.
  • external: optionally, set to true to navigate to the page in a new browser tab.
<CrmActionButton actionType="PAGE_APP_LINK" actionContext={{ path: "/email/123456/analyze?emailType=followup-2", external: true }} variant="secondary" > Open email dashboard </CrmActionButton>

Navigate to an external page

The EXTERNAL_URL action navigates the user to a website page in a new tab.

Requires the following actionContext:

  • href: the URL, which must begin with http or https. When protocol is not specified, HubSpot will automatically prefix the URL with https.
<CrmActionButton actionType="EXTERNAL_URL" actionContext={{ href: "https://www.google.com", }} variant="secondary" > Open Google </CrmActionButton>
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.