70

Localize in-app messages

How it works

Customer.io has built-in localization features to help you deliver messages in the language your audience uses. You can send your audience translated versions of a message based on a specific attribute in Customer.io. This means that you’ll need to store language information in Customer.io.

When a customer’s language attribute matches a localized version of your message, we’ll deliver that message to them. If we don’t have a localized version of your message for a customer’s language, we’ll deliver a “default” message.

Beyond that, there’s also an accessibility Language setting you can use to tell your audience’s device or browser what language and locale you’ve formatted a message in. This setting does not determine which localized version of a message you send to your customers. But it does help browsers and assistive technologies support your audience. The Language setting:

• helps screen readers use the correct pronunciation and cadence.
• helps your users’ devices or browsers translate a message if they don’t receive versions of your message in their preferred language.

You can use these two settings together to ensure that your audience understands your messages.

Localize an in-app message

If you have a localized app, you may want to deliver in-app messages in your audience’s preferred languages. Remember, we deliver localized messages to your audience based on a specific profileAn instance of a person. Generally, a person is synonymous with their profile; there should be a one-to-one relationship between a real person and their profile in Customer.io. You reference a person’s profile attributes in liquid using customer—e.g. {{customer.email}}. attributeA key-value pair that you associate with a person or an object—like a person’s name, the date they were created in your workspace, or a company’s billing date etc. Use attributes to target people and personalize messages. Attributes are analogous to traits in Data Pipelines., not their browser or device settings. So, before you localize messages, you’ll want to set up your language attribute.

When you create an in-app message, you’ll start with your Default message. This will act as a “template” for your other languages. It’s also the language that everyone receives if you don’t set up a message that matches their language attribute—a fallback message.

Then you’ll click Add Language and select the different languages you want to support. You can then edit the message content for each language you add. Your localized messages are based on your default message, so you’ll only need to edit the text content of your messages!

For buttons and other actions, you might want to change URL/Link settings to match the language of the message, but you’ll want to leave the Behavior and Tracked Name settings the same across all languages. This helps us track the performance of your message across all languages.

Send your in-app code for translation

If you need to send your messages to a translation partner, you can click to see the HTML for your Default message. From here, you can easily copy your message code and send it to a translator. You can even leave comments in the code view to help your translator understand what they need to translate and what they should ignore.

Your translation provider can return your translated content in the same format, and you can copy and paste it back into the message editor’s code view.

Use the Language setting

The Language setting is an accessibility feature that explicitly tells a browser the language of your message. When your audience translates a message in their browser, the Language setting tells the browser what language the original message is in so it can provide a more accurate translation.

The language setting ensures that anybody who doesn’t receive a localized version of your message can easily translate it in their browser (or app/OS).

It also tells screen readers which language and locale your message is in so they read your message with the correct pronunciation and cadence.