How to create smart HTML content

Last updated: June 14, 2016

Available For:

Product: HubSpot Marketing
Subscription: Professional & Enterprise
Smart content can be highly valuable in catering the content on your website to your visitor - this doesn’t just have to be in a rich text module. With smart HTML modules, you can add personalization to custom sections of your website and utilize the same familiar options and rules.

How can this help you?

Sometimes personalizing your content doesn’t just have to be about including a name to address your visitor, or changing a couple sentences of content. Using a smart HTML module, you can change entire sections of content. Say you are testing out a new live chat widget on your site, you could use a smart HTML module to decide to show this only to your customers visiting your site and no one else.

Sound like something that makes sense for your site? Awesome. Follow the instructions below to set this up on your HubSpot page, or even in your HubSpot template.

Instructions for your HubSpot page

Follow these instructions and you’ll learn how to create a smart HTML module on one of your HubSpot pages.

1. Navigate to Website Pages or Landing Pages

Navigate to an existing or create a new page. This can be done by navigating to Content > Website Pages or Content > Landing Pages (if you don't have Website Pages, you’ll want to select Landing Pages here).
website-or-landing-pages-main-nav-2016-.png

2. Create new or edit page

Once in Landing Pages or Website Pages, you can either choose to edit an existing page, or click the blue Create a new website page/landing page button.
HubSpot Help article screenshot

3. Make the module smart

Once you’re in your HubSpot page, you’ll want to navigate to the custom HTML module on the left-hand side of your page where you normally edit and insert your coded content. Before making this HTML module smart, you should feel confident in your default code you have set there now for any visitor that you’re not targeting. 

When you’re happy with the default HTML you have set, hover over the module to see your editing options, then click the smart icon to get started.

HubSpot Help article screenshot

4. Choose and create your type of smart content

You should have already decided the visitor you want to target, now you want to choose the type of smart content to use. You have five options: country, device type, referral source, contact list membership, or lifecycle stage. You can only choose one type of smart content to create here.  Choose one of the options then click Next step.
HubSpot Help article screenshot
Once you’ve made your decisions on the type and chosen its criteria, click the blue button to move onto the Next step.
HubSpot Help article screenshot

5. Customize your smart rule

This is where all your content creation for smart rules takes place. You’ll see the HTML content area for the rule you created - this is where you’ll want to add in the HTML you’ve created for your new smart rule. Once you’re done writing this content, click Done.
HubSpot Help article screenshot
That’s it! You’ve created smart HTML for your web page.

Instructions for your HubSpot template

Follow these instructions and you’ll learn how to create a smart form on one of your HubSpot templates.

1. Navigate to Design Manager

Navigate to an existing or create a new template. This can be done by navigating to Content > Design Manager.
HubSpot Help article screenshot

2. Create new or edit template

Once in Design Manager, you can either click on the name of a current template to edit it, or click the blue New template button.
HubSpot Help article screenshot

3. Make the module smart

Within your template, locate the Custom HTML module you’d like to make smart. Once you’ve located the module, click on the gear within the module then choose Make smart from the dropdown that appears.
HubSpot Help article screenshot

4. Choose and create your type of smart content

You should have already decided the visitor you want to target, now you want to choose the type of smart content to use. You have five options: country, device type, referral source, contact list membership, or lifecycle stage. You can only choose one type of smart content to create here. Choose on one of the options then click Next step.
HubSpot Help article screenshot
Once you’ve made your decisions on the type and chosen its criteria, click the blue button to move onto the Next step.
HubSpot Help article screenshot

5. Customize your smart rule

This is where all your content creation for smart rules takes place. You’ll see the HTML content area for the rule you created - this is where you’ll want to add in the HTML you’ve created for your new smart rule. Once you’re done writing this content, click Done.
HubSpot Help article screenshot
That’s it! You’ve created smart HTML for your template.

Previous article:

Next article: