By Bobby Kane
Dec 26, 2013
Never miss an episode of Endless Customers!
Subscribe now and get the latest podcast releases delivered straight to your inbox.
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!
Register for IMPACT Live in Hartford CT, October 14-16!