How we set up a system to dynamically create HubSpot web pages using HubDB as a data source, and populate each new page with a custom module using HubL.
PHubSpot’s dynamic pages feature allows you to set up a system to automatically create and populate sets of web pages. This is useful in cases where data is frequently being updated or added to. Here are some examples of use cases for dynamic pages:
- Your company runs events and needs a rolling events page and a separate page for each event.
- Your website has an employee information page, and each employee listing is linked to a separate page with more information about that respective employee.
Here’s how we created dynamic pages for one of our clients, a tax and accounting firm with offices throughout the New York City metropolitan area. The client’s website has a web page that lists all locations by borough or county, and each location listing links to an individual page about that location.
Step 1: Create a HubDB table
First, we built a HubDB table titled “Office Locations” to store data about each of our client’s office locations.
The table includes all relevant information about tax office locations, such as:
- Office address
- Office phone number
- Link to office photo
- Link for customers to book an appointment online for that location
- Languages spoken at that office
Here's an idea of how the HubDB table looks:
Once the table was initially created, we had to toggle on the setting Enable creation of dynamic pages using row data.
Toggling that setting results in the automatic creation of the columns Page title and Page path in the HubDB table. Whenever this setting is enabled, any dynamic pages that use that HubDB table as a data source will automatically create a new page for each unique Page Path value.
For example, if the dynamic page's URL is:
www.taxclient.com/offices
And your HubDB table has a row with a Page path value brooklyn, the dynamic page settings will clone the dynamic page and create a new page with the URL:
www.taxclient.com/offices/brooklyn
Step 2: Create a dynamic web page with HubDB as its data source
We then created a blank landing page for each borough/county that would serve as a template for the dynamic location pages. The only visible content the pages contain is the brand's header and footer,
Within Advanced options in each page's settings, we set the Dynamic pages data source to the Office Locations HubDB table.
In total, we created 6 template pages. Each template page’s URL serves as the root URL for each subsequently created dynamic page.
Step 3: Build custom modules to query HubDB table and populate web page
Lastly, we configured a custom module for each borough/county. The purpose of these modules is to query and format location data from the HubDB table.
We placed each module onto the template page that corresponds with its borough/county. Each page dynamically created via the Page path value is a clone of a template page, so they all contain the necessary module upon creation.
The module matches the URL of each dynamically created page to the row with the corresponding Page path value in HubDB, and populates the page with information relevant to that location.
Below is the bit of code within the module that finds and matches the URL to a HubDB row. The key is the use of the HubL filter split. Its function is to split the input string on a given separator. The first parameter “/” designates the separator, while the “4” states how many times the variable should be split. The URL is split on the backslash into four pieces, and the last piece is set as the page URL.
{% set pageURL = request.path|split('/', 4)|last %}
{% for row in hubdb_table_rows(1234567, '') %}
{% if row.hs_path == pageURL%}
Please note that the HubDB table ID has been altered for security purposes.
The module then calls all relevant data from the chosen HubDB row, formats it, and displays it on the page. Here is how it calls and displays the image for each office, and creates a button with a link to the client’s online booking service:
<img class="image-office" style="width: auto; border-radius: 30px" src="">
<div style="height: 50px; align-items: center; display: flex; justify-content: center;">
<a class="button-link" href=""><button class="button">Book Appointment</button></a>
Here is the resulting dynamic page for our client's Midtown Manhattan location:
Dynamic location pages eliminate the need to individually create and format a new page for each location, and allow us to change information on the pages quickly and easily.
This tutorial is one aspect of a larger custom HubSpot build that featured other elements and resulted in significant benefits for our client. If you want to find out more about how we used HubDB and HubL to create custom modules that saved our client significant time and resulted in better CX for their customers, read our in-depth blog post on the topic.