Localize Banners
Learn how to add different languages to your Banners.
Table of Contents
Localizing experiences allows you to add translated content that will show in a banner based on a user's browser language. This article covers banner localization.
Configuring Languages
In order to localize content you will need to have languages set up in your account. These will be the languages that can be selected from when localizing individual experiences. If you've already set up languages for web and mobile flows those languages will already be available for use for banners.
Languages can be configured through the account localization settings, or by clicking on Localization settings in the dropdown in the banner builder and then Manage languages on the next panel.
A new language can be configured by selecting the + Add language button.
This will allow you to set the name for the language, the property that's used for the language, and the properties that should be included in the group.
When the language is fully configured select the Save button and add it to the list of selectable languages.
Localizing content manually
After the target languages are configured, any editable text can be localized by manually editing the text in the builder.
To add a new translation to the banner: Click the language dropdown > Toggle on the languages you want to add.
To update the content: Switch to the added language in the dropdown.
Translations can then be added directly in the builder.
Using XLIFF files to upload translations
After the target languages are configured the content for those languages can be added by using a translation file, this can be particularly useful if you're using a translation service. Xliff is a file format used for localizing content. In most cases when the format is used it's used with a specialized service or editor like Smartcat or Lokalise. The file will include all editable content in your experience such as the text in the following blocks text.
With these services the xliff file and be uploaded into the platform and the content will be displayed in their editors for localizing and validating the translations.
To download the translation file: Click the language dropdown > Select “Localization Settings” > Click the gear icon for the desired language > Click the “Download .xliff” button
Editing xliff files
For quick updates there may be cases where you want to edit an xliff file manually, this can be done using a text editor. Preinstalled editors TextEdit (Mac), Notepad (Windows), or specialized editors like Sublime and VSCode support the xliff format.
When working with a xliff translation file the content will be displayed in trans-unit blocks. In the block the source will be the original source content for the block. The target will be the content to be used for that block when it is localized.
<xliff xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="urn:oasis:names:tc:xliff:document:1.2 http://docs.oasis-open.org/xliff/v1.2/os/xliff-core-1.2-strict.xsd" xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
<file original="5767fcf8-9e79-4213-ae5a-3b2cdc21dc2c" datatype="plaintext" target-language="pt-br">
<body>
<group id="d0fa6861-e691-4bab-a85d-68e4b21fd259">
<trans-unit id="705d5b80-0ada-4e72-96ee-8dd5f50818ba">
<source>Scheduled maintenance will occur this coming Saturday</source>
<target>A manutenção programada ocorrerá no próximo sábado</target>
</trans-unit>
<trans-unit id="8263befa-2a58-47a0-985c-d2280df37a65">
<source>Learn more</source>
<target>Learn more</target>
</trans-unit>
</group>
</body>
</file>
</xliff>To upload the translated file: Click the language dropdown > Select “Localization Settings” > Click the gear icon for the desired language > drag-and-drop or browse files to upload the xliff file you edited. When the file is uploaded the experience content will update with the content from the translation .
AI translation
This option will take the current banner content and replace it with an automatic translation into the target language.
For assistance managing AI features in your account contact support@appcues.com.
Right-to-left (RTL) language support
Right-to-left support is handled automatically in the SDK for right-to-left languages. When the user has their device set to a RTL language the contents will automatically adjust to align appropriately. With RTL components will be flipped so content on the right will be on the left, content that is right aligned will be left aligned, and vice versa.
When building banners, the RTL toggle can be used to view content in the preview panel with the RTL layout.
