This Hack goes through the steps we took to code a dynamic Meet the Team page in HubSpot, driven by HubDB
HubDB is a tool that allows you to create tables to store, filter, and display data in your HubSpot website pages.
You can transform this data to feed one of your custom modules, but you can also use it to generate HubDB dynamic pages. And Meet the Team Pages are a great example of how we at BabelQuest utilised this fantastic tool.
To start with, you need to create a HubDB table, where each column represents a chunk of data that you want to use on your page or in a module. Then, in the table's settings you need to allow public API access, and enable creation of dynamic pages. As soon as it’s done, a page path column is added to the table. We will need it later to generate our team member pages.
After publishing the table you move on to creating your dynamic template and a new custom module. That would require using some HubL which is HubSpot's templating language, but despair not, you can find a comprehensive guide on how to set it up here.
When a dynamic page is set to use this template and the end of the URL matches the path column, you can access the dynamic_page_hubdb_row and dynamic_page_hubdb_table_id variables in the template. This is how we are going to generate our dynamic team pages. Simply make sure that your team members' repeater loop contains a link with {{ row.hs_path }}.
When the new module is linked to your HubDB and the HTML structure is properly mapped to it, you can move on to styling your page. Why not add custom fields that control the layout of the page?
Creating dynamic pages may seem complicated at first, but as soon as you get them running, you can see their value. No more cloning pages and worrying about spacing being off. As soon as you add a row to the HubDB table, a new dynamic page is automatically created - a perfect copy of its original.
Author: Justyna Wegner
Web Developer
