This is an walkthrough of Approach 2: how to build advanced HTML modules for personalization using Air Traffic Control custom properties inside of HubSpot. For a more simplified version of this guide, please refer to this help center piece. At any time if we can be of assistance, do not hesitate to reach out. 

Approach 2: Advanced Custom Modules

This approach will allow you to create a more advanced collection of modules that will automatically pull in the required blog or podcast images and titles but also give the option to have a fallback in case there is a visitor to your site that doesn’t have the personalized content recommendations.

Here is a quick explanation of the modules and what they’ll insert into your emails, site or landing pages. 

Blog Section with backup: a module containing the top 3 recommended blog articles complete with images, meta description, a button and a fallback dropdown.

Number 1 Blog with backup: a module containing the top recommended blog article complete with images, meta description, a button and a fallback dropdown.

Number 1 Podcast with backup: a module containing the top recommended podcast complete with images, meta description, a button and a fallback dropdown.

Syndicated News section: a module containing the top 3 syndicated news articles complete with images, meta description, a button and a fallback dropdown.

Step 1: Creating a Custom Object

1. Access Settings:
   • Click the gear icon in the top-right corner to access settings
2. Navigate to Custom Objects:
   • Scroll down to Data Management
   • Find the Objects dropdown
   • Select Custom Objects at the bottom
3. Create Custom Object:
   • Click on Create Custom Object
   • Enter a name for the custom object
   • Optionally, provide a description
   • Set the display name (recommended to match the contacts' name)
   • Click Create to finalize the custom object creation.

Step 2: Create Custom Object properties

1. Access Settings:
   • Click the gear icon and select Properties
   • Find your custom object
     
     
2. Create Property:
   
   • Click Create Property.
   • Name the property and assign it to a group.
   • Choose Property Sync as the field type.
   • Select the contact record and property to sync.
   • Finalize by clicking Create
3. Repeat as Needed
   
   • Repeat for each personalization property

Step 3: Sync the Contact records to the Custom Object via a workflow

1. Access Automations:
   • Go to Automations and create a new workflow.
   • Choose a blank contact-based workflow.
2. Set Triggers:
   • Add triggers for contacts with the necessary properties (e.g., ATC properties).
   • Ensure all relevant properties are included to cover all potential contacts.
3. Create CRM Record:
   • Select the action to create a record in the custom object
   • Include details like first name, last name, and email
4. Review and Publish:
   • Review the workflow
   • Decide whether to enroll existing contacts
   • Publish the workflow to start syncing records

Step 4: Create the Custom Modules

1. Accessing the Design Manager:
   • Login to HubSpot
   • Navigate to Design Tools
     1. Go to your HubSpot dashboard
     2. Click on the Content tab in the main menu
     3. Select Design Manager
2. Create a Custom module in HubSpot
   • In the Design Manager, click on Create a new file
   • Choose Module as the type
   • Select where you want the module to be used. Emails, site pages & landing pages would be a good choice but you could also include blog and blog listing pages if you want to add the module there
   • Give your module a name and choose the folder where you want to save it
   • Click Create
3. Populate and publish the module:
   • Copy the HTML of your required module into the main editor
   •  Adjust the styling to match your own brand (optional)
   • Adjust the Personalisation Property to match your naming convention and the purpose of the module
   • Add a new Number field and name it something like Fallback for Blog Post 1
   • Copy the snippet and paste it into the existing code
   • Repeat this process for any fallback properties

Required code for each module variation

The steps outlined above remain the same for each of these modules, the only difference would be the code that you copy into the main editor. To retain formatting, we've copied the HTML code you'll need into this HubSpot file. As always, let us know any questions.