HubSpot COS Tip: How to Add Personalization to Your Website

When HubSpot released the capability to display contacts' properties on your website pages, it drop-kicked just about every jaw in the industry (as well as everyone in attendance at INBOUND '13.)

Now that this powerful, awe-inspiring feature exists, the immediate response is to include it anywhere and everywhere it'll fit.

However, we really wanted to nail our strategy by taking a more subtle approach.

Now don't confuse subtlety with effectiveness.

The HubSpot COS: Subtle Personalization at its Best

Let's take a look at the exact sentence we'll be personalizing:

What would you like to do next?

Now well take that sentence, and if you have a contacts information, that same sentence will show like this:

What would you like to do next, Bobby?

Nice. That's my name, right?

The issue is the comma. It's gramatically correct, and it has to be there. The personalization tag doesn't include that comma so we need some CSS to fix this.

The HTML

What would you like to do next<span class="personalization-name"></span>?

*Notice there's no space between "next" and the <span>

The CSS

.personalization-name:before {
content: ','; margin-right:10px;

}
.personalization-name:empty {
display:none;

}

**The CSS selector is supported in all major browsers, except IE8 and earlier (of course)

And wa-la!

We solved a couple problems here.

1. Adding the comment when there is a name associated with the contact who's on your site

2. Removing the <span> altogether when a site visitor isn't a lead and you don't have their name. 

I'd love to see and hear about what you guys are doing with the personalization, so leave a comment below!