How to Implement Multi-Language Functionality Into Hubspot

So you host your site on HubSpot, but you have customers all over the world and you need to tailor your content to their languages. As far as your research has yielded, HubSpot doesn’t support multi-language functionality and you have no interest in building language-specific sites under multiple sub-domains.

Smart Content to the Rescue!
This is where Smart Content comes into play and there are three different methods to accomplish our goal. Smart Content filtering can actually pick up on a user’s preferred language setting or country to modify the content that’s displayed. Alternatively, you can also filter content based off of a list you create and assign contacts to. Filtering by contact list requires a form to filter someone into before you can start setting smart content segments, while filtering by country or preferred language can be applied immediately without any further setup.

These different methods of applying filters enter the picture at a later point, so we’ll run through the setup for the list method first.

Preemptive: Setup for the List Method
To begin building Smart Content based on the list method, create a Form and a Contact Property for language. A new Contact Property can be created either on the form editor (found in the top of the fields panel), or via the contact properties page (found in the top right, click the big blue button).

Since we’re adding this contact to a list, you’ll want to request, from the user, their language through the language field we just created, then be sure to require an email address in order to save them as a contact. Then you’re able to drop this form into a page template for styling.

This is my form, there are many like it, but this one is mine.

Next up, we’ll make a smart list for all of our languages using using filters and rules in the smart list setup to make sure someone has actually used the form and to see what language they chose.

Okay Let’s Get Back to Work
You’ll need to consider how you’ll actually be entering your content. HubSpot currently supports Smart Content in three types of content modules: Calls-to-Action, Rich Text, and Custom HTML. While Rich Text and Custom HTML can essentially accomplish the same task, the Rich Text field does give you access to the kitchen sink for WYSIWYG editing (directly modifying content on the page view).

Pic related, it's my modules.

Now comes the fun part: translation. In the screenshot above, you’ll notice the gear icons. We’re going to click that and select “Make Smart”, you’ll be prompted to select the method with which you’ll segment your content. Here’s where the three methods diverge.

Method 1 - Country
The country method attempts to resolve where your internet connection originates from and serve content appropriately. Select Country from the options, click Next, and you’ll be introduced to a dropdown with a filter; type the desired country and click next. The panel that appears displays the original content on the bottom and the segmented content above. Copy and paste the original content to the spot above and apply your translation to it. Notice that there’s also a button to add additional rules; this is how you can add more languages to this specific content block.

Considerations
Anyone accessing your site through a VPN or proxy may be affected adversely as the connection will seem to originate elsewhere.

Method 2 - Preferred Language
This method is enabled similarly, but Preferred Language is selected instead of country. Select the required language (it’s pretty cool that it drills down into regional differences) and click Next. Fill in the copy in the same way and add any additional segments needed.

Considerations
If the need arises to display information in a language different from your browser’s language setting, you will not be able to do this without editing your browser’s language preference settings (and reverting them in a language you do not understand!)

Method 3 - Contact List
Start by making the content smart, as usual, and select “Contact List Membership.” You’ll be prompted with a dropdown to select the list you want to segment by; segmenting for this example is done by the languages that we created earlier.

Considerations
For some users, entering an email address may be a barrier to using the tool and for some organizations, implementing the tool with an email address requirement would certainly be a point of friction.

Success! Note: this actually happens.

Taking it Further
Since we know that Rich Text and Custom HTML modules are the only content template modules capable of being made smart, we need to be able to make the rest of the site, such as menus and call to actions, useful to the users as well.

Let’s start with the menu. We’ll start by creating a menu in the content settings for every language; the page links can go to your pages like normal. Next up we’ll drop a Custom HTML module into our header area and use the HubL script to pull our default language:

We’ll follow that up by making the module smart as done before via the gear icon and copying this syntax for every language required. Using this method, you can make just about any content into smart content!

Fire not included. Maybe.

Now that the menu is out of the way, we can move on to CTAs. Different smart CTA views are created through the CTA editor under Content -> Calls-to-Action. See below:

Make it ~Smart~, of course.

Create variations for every language as described above and simply embed the CTA like normal.