Build dynamic pages using CRM objects
- Professional or Enterprise
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.
Building a CRM object dynamic page requires four steps:
- Prepare your CRM object with data you want to display.
- Create a custom module to display the data.
- Create a listing module to display all records on a listing page.
- 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 CMS Hub Enterprise subscription, or a Marketing Hub Enterprise account with CMS Hub Professional.
- For standard CRM object dynamic pages, you'll need a CMS 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 property||Property type||Description|
The slug that will be appended to the CMS page URL for each details page. The property needs to be configured with
The property value needs to be URL friendly, and must contain:
The page's title.
The page's meta description.
The 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_objectvariable to access the data stored to the current dynamic page's object instance.
To set up the details module:
- In the design manager, create a new custom module.
Tip: naming the module something like [object type] - detail can make it clear what this module does. For example, Car - detail.
- In the
module.htmlfield, add the following code:
This code checks if the page is a CRM object dynamic page. If it is, use
dynamic_page_crm_object to retrieve the object record data. Object record data will be retrieved based on the object type set in the page editor.
This makes the module useful outside of the context of a dynamic page as well, as you can use it to feature object records on dynamic pages by having multiple instances of the module.
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.
Tip: naming the module something like [object type] - listing can make it clear what this module does. For example, Car - listing.
You can use and modify the example code below to create a listing module:
In this code we are checking if the current page is a CRM object dynamic listing page. If it is, the module will display a listing of items. If it’s a detail page, the module won’t display anything. If it's another CMS page, we show a simple listing of results.
With the modules created, you can now add them to a page, then select the object as the data source.
- Create a new page, selecting a page template that has a drag and drop area or flexible column.
- In the page editor, click the Settings tab.
- 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:
- Click Advanced options, then scroll to the Dynamic pages section.
- 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":truewill 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:
- 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.
- After setting up your metadata, at the top of the page, click the Content tab to return to the editor.
- In the left sidebar, in the Add tab, search for your detail and listing modules, then drag them into the page editor.
- To preview your page, click Preview in the upper right.
- 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.
Thank you for your feedback, it means a lot to us.