Skip to main content

Supported products

Requires one of the following products or higher.

  • Marketing Hub -Enterprise
  • Content Hub -Professional

You can build CRM object dynamic pages using standard HubSpot objects, such as Products, or custom objects (Enterprise only). Dynamic pages consist of a listing page view and a unique details page for each record. The listing page displays a list of all records in the object, and the details pages display information about each record based on the record's property values.

You can also build dynamic pages using HubDB. Learn more about the different types of dynamic pages.

Building a CRM object dynamic page requires four steps:

  1. Prepare your CRM object with data you want to display.
  2. Create a custom module to display the data.
  3. Create a listing module to display all records on a listing page.
  4. Add the modules to a drag and drop page and select the object as the data source.

This tutorial will walk through how to build a CRM object dynamic page using the example of a Car custom object, which stores data on individual cars at a dealership.

The following are required for building dynamic pages using CRM objects:

  • For custom object dynamic pages, you'll need a Content Hub Enterprise subscription, or a Marketing Hub Enterprise account with Content Hub Professional.
  • For standard CRM object dynamic pages, you'll need a Content Hub Professional or Enterprise account.
  • An understanding of how to create custom modules.
  • A standard or custom object to use as a data source. You'll also need user permission for the object, such as Companies or Custom Objects access.
  • Records created under the object you're using, such as individual products or custom object records. Records can be created in HubSpot’s UI or via API endpoints.

Each dynamic page will pull its metadata from the properties of the individual records of your selected CRM object. The values contained in these properties should uniquely identify the content of the page to stand out in search results. Metadata includes:

  • Page slug
  • Page title
  • Meta description
  • Featured image

For the page title, meta description, and featured image, you can use any of the object's existing single-line text properties. However, the dynamic page slug must be a property configured with "hasUniqueValue": true. Existing properties cannot be updated with this configuration, so you will need to create a new property for this field. For custom objects, create a new property by updating the object schema. For standard objects, create a new property by using the properties API.

Dynamic page propertyProperty typeDescription
Dynamic page slugRequiredtextThe slug that will be appended to the CMS page URL for each details page. The property needs to be configured with "hasUniqueValue": true.The property value needs to be URL friendly, and must contain:
  • All lowercase characters.
  • No spaces or special characters, except -.
  • No leading slash. For example:
    • Incorrect: /property-value
    • Correct: property-value
Page TitletextThe page's title.
Meta descriptiontextThe page's meta description.
Featured imagetextThe page's featured image, which will appear when the page is shared.

In our example, we’ll be using a custom property VIN (Vehicle Identification Number) as a page slug, since we know each car’s VIN is unique.

Individual detail pages will use this module to display the object record data. In our example, the module will display details for an individual car's page.

Within this module, you'll use the dynamic_page_crm_object variable to access the data stored to the current dynamic page's object instance.

To set up the details module:

  • In the module.html field, add the following code:

In the above code, we’ve created a CRM object of car. To fit your use case, you can update the module.car references in the code to your object's name.

After creating this module, you’ll then create the listing module to define the information that will appear on the general listing page.

Depending on your use case, you may want the dynamic page's root URL to display a listing of your object's records. In our example, we would want the https://website.com/cars page to display the listing of all of the available cars.

To do this, create a new custom module that will act as a listing of the object records. Within this module, use the dynamic_page_crm_object_type_fqn variable to access the fully qualified name of the page's selected object.

You can use and modify the example code below to create a listing module:

With the modules created, you can now add them to a page, then select the object as the data source.

  1. Create a new page, selecting a page template that has a drag and drop area or flexible column.

  2. In the page editor, click the Settings tab.

  3. Under Page URL, click the pencil icon to edit the page's URL. Set the URL to where you want your listing page to appear. In our car example our listing page will be at: /cars.

  4. Click Advanced options, then scroll to the Dynamic pages section.

  5. Under Dynamic Pages, click the Data source dropdown menu, then select your object. Then, click the Dynamic page slug dropdown menu and select the property to use as the page slug. Only single-line text properties set to "hasUniqueValue":true will be available for selection. In our example, the page URL will use the VIN property, which will generate detail pages with the URL slug of: /cars/[VIN value]

    Screenshot of the page editor's page settings screen. It's cropped to only show the data source, and dynamic page slug fields for dynamic pages.

  6. Under Metadata, continue selecting the properties that will populate the page’s metadata. In our example, we’re setting the featured image to a property that contains an image URL for a picture of each car.

  7. After setting up your metadata, at the top of the page, click the Content tab to return to the editor.

  8. In the left sidebar, in the Add tab, search for your detail and listing modules, then drag them into the page editor.

  9. To preview your page, click Preview in the upper right.

  10. When ready, publish your page by clicking Publish in the upper right.

You've now successfully created dynamic pages based on your data source. With our example page set up, when a user updates a car record in HubSpot, the listing and detail pages will update automatically to reflect the changes. Newly created records of that object type will also automatically create new pages using the dynamic page slug and be linked to from the listing page.