As you learn more about your visitors and develop your marketing personas further, you'll be able to adjust the content of your website to be increasingly more personalized and relevant to each visitor's interests. You can use a mix of personalization and smart content to accomplish this.
Only HubSpot Professional and Enterprise customers can use Smart Content on their website pages.
Insert a contact property personalization token into your content that will automatically change, based on the visitors contact property value. Personalization can be used in rich text modules on COS pages, as well as in emails.
Use smart rich text content modules
You can create endless variations of a rich text content module for a website page. Using Smart Content, you can personalize content for first-time visitors or any unknown visitor to your site based on the Country, Device, or Referral Source of a visitor regardless of whether that visitor is a known contact of yours, or you can personalize content based on the contact being a member of a certain List or having a specific Lifecycle Stage.
For example, you can use smart content to add in an additional section to a page for some visitors or change the language on a page based on what you know about the visitor. Follow the instructions below on how to make a rich text module on your page smart and the options you have within this feature:
Follow these instructions to add smart content to your COS page or email.
When using Smart Content in the Email tool, it is only possible to personalize content by Contact List Membership or by Lifecycle Stage
1. Navigate to Site Pages
Navigate to an existing or create a new site page. This can be done by navigating to Content > Site Pages and clicking on the name of a current drafted site page or clicking the Create new button.
2. Make Smart
Once within your site page content editor, navigate to your rich text module on the left-hand side and click the text above that module that says Make Smart.
3. What type of smart content do you want to create?
You should see a window pop up asking you what type of smart content you'd like to create. From here, you have five choices to proceed where you must choose on what basis your visitor will see what content.
The first option you have is to display content to your viewer based on their country. So, click Country. This option is only available for COS pages.
Now you'll need to select an option from the dropdown menu to say which country your visitor must be visiting your website from in order to see the following smart rule. The country is determined by the IP address of the visitor. This option is only available for COS pages.
Your second choice could be whether or not you want someone to see different content because they are viewing your page on a specific device. Click Device Type. This option is only available for COS pages.
Now you can specify which device this smart content is centered around: mobile, tablet, or desktop. HubSpot is able to detect the size of the device and render the different content accordingly.
The third choice you have is based on Referral Source, and will show visitors your smart content based on how they found your site. Click Referral Source. This option is only available for COS pages.
Next you'll want to choose which referral source. For instance, if you want visitors who first visited your site from Twitter, you'll want to click on Social Media then choose Twitter from the dropdown that appears.
The first three choices of Country, Device Type, and Referral Source can be chosen for contacts and customers as well as anonymous visitors.
Contact List Membership
Your fourth chose for making smart content rules is based on contact list membership, which will show a contact in your HubSpot database certain content dependent on whether or not they're a member of one of your HubSpot lists. Choose Contact List Membership. This option is only available for COS pages and for email.
After choosing Contact List Membership, you'll be asked which contact list you'd like to use for your smart rule. Click within the dropdown menu and choose your list.
Your fifth and final choice for your smart content is lifecycle stage. This will look at the lifecycle stage property of a contact in your HubSpot database and display the relevant content based on the value of this field. Click Lifecycle Stage. This option is only available for COS pages and for email.
Now you'll want to choose which stage within the lifecycle your contact must be in order to see the content.
4. Create smart rule
Once you've decided on the criteria of your smart rule(s) you'll want to click the blue button to Create Smart rule.
Now you can head back to your rich text module and add your content based around this rule. You'll see which rule you're working on right above the rich text module.
5. Add a smart rule
Once you've made your rich text module smart and (by clicking on "Make Smart" above your rich text module) added your first rule, you can create another rule by clicking on the current rule you have and choosing "Add smart rule..." from the dropdown menu.
You'll notice from this dropdown, you can also switch to your other rules you've created to quickly edit the content within these rules.
6. Manage smart rules
There is a rule order to the smart rules you have in place. If your visitor meets the criteria of more than one of your smart rules that you've set, that visitor will see the content from the rule which comes first. So, in the example above, if there's a contact in both of the lists "All Subscribers (HS Recipes)" and "All Leads (HS Recipes)" they will see the content from "All Subscribers (HS Recipes)" because that rule comes first.
Another option you have in the dropdown menu within your smart rule helps you see and edit all your rules within one window. Click on your current rule, then choose Manage smart rules...
From this new window that pops up, you'll see all of your smart rules. You can edit your existing smart rules as well as add a new smart rule.
At the bottom of this window, you'll also see a window for your Smart Default content. This content is what will be displayed if a contact visiting this page does not meet any of the criteria set from your smart rules.
Testing your smart content
Once you've set up your smart rules and are ready to push those changes to your live page, you can test that you've set up your smart rules the way you want them by utilizing a feature that allows you can view the content as if you were a certain contact in your HubSpot database. Additionally, you can also view your content as if you were an anonymous/unknown visitor. Follow the instructions below to test your smart content.
Follow the instructions below to test your smart content.
1. View preview as...
While within your Site Page content editor, you'll click the button at the bottom right-hand side that says View preview as...
View preview as... Visitor
The first tab within the View preview as... window is Visitor. Within this selection you can choose which location, which device, and/or which referral source to test your content view. In the below example, I've chosen to view my preview as if I were viewing as a visitor located in the United States, from my mobile phone, and I originally visited your site via organic search. Once all dropdown options are selected, click Preview.
View preview as... Contact
The second tab within the View preview as... window is Known contact. Within this selection, you can choose which contact you'd like to view your preview as. This is especially helpful if you're using personalization tokens in your content, or if you're using contact list membership as a smart rule and know a specific contact in HubSpot is on one of those lists.
When in the Known Contact tab, click on the dropdown under Select Contact and type in the name of the contact you'd like to view your content under, then click Preview.
Once you make a decision in the "View preview as..." tab, your preview within the content editor will now show you what your content will look like for the visitor or contact you've set, and you'll see at the bottom-right exactly how you are viewing your content.
You can click the X button next to the "viewing as" to go back to the default viewing preview.
Next Article: How to go live with your HubSpot website