|
This article covers the following: |
Overview
Content localization in Wingify allows you to manage multi-language experiences within a single campaign instead of creating separate campaigns for each language. Using the Translate feature in the Visual Editor, you can translate text, HTML, and widget changes in multiple languages directly within your existing campaign.
When running campaigns across diverse regions, serving content in a visitor's preferred language increases engagement and conversion rates.
By default, Wingify evaluates a visitor’s browser-level language settings to automatically render the appropriate localized variation. For advanced use cases such as route-based URL localization (/fr/), cookie-based localization, or geolocation-based localization, Wingify provides the setBrowserLanguage API to explicitly set the rendering language.
For example, an e-commerce company running a global promotional campaign in English can add a French variation within the exact same campaign. When a French-speaking visitor navigates to the website, Wingify detects their browser language and serves the French-translated version seamlessly to the end user.
Key benefits include:
- Centralized Campaign Management: Eliminate the operational overhead of duplicating and managing separate campaigns for every target language.
- Automated Translations: Generate instant AI-powered translations for all modified elements in bulk directly within the Visual Editor.
- Granular Control: Add, review, or manually override specific string translations without modifying the underlying source page.
Configure Languages for Localization
As an admin, before using the Translate feature in the Visual Editor Next, you must set the default website language and select the translation languages you want to use when creating variations in the campaign settings. For more information, refer to the steps in the Define Languages for Content Localization section.
Translate Changes in Visual Editor
Once the default and supported language settings are defined, you can apply them in the Visual Editor and translate only those specific edits. To use the Translate feature in the Visual Editor:
- Go to Web Experimentation and configure an A/B Test or Multivariate Test and launch the Visual Editor. You can also configure a Web Rollout, or a Personalize campaign, and launch the Visual Editor.
-
Make your DOM modifications (for example, text changes, Edit HTML actions, or adding Widgets).
Attention: The Translate feature only translates the elements that are modified or added within the campaign. It does not auto-translate the static, unmodified content of your base web page. -
From the left panel, click Translate. Alternatively, you can open the language dropdown on the top navigation toolbar and select Manage translations.
The Manage translation interface displays all the text, HTML, and widget changes, along with the target-language columns you can add for translating those changes. - For all the modifications you make, you can translate them in two ways:
Apply AI-Based Bulk Translation
To automatically translate all campaign modifications across all selected target languages at once:
- In the Manage translations view, click + Add language to add your target language columns.
-
Click Translate in the panel header.
Wingify automatically translates all modified text, HTML blocks, and widget fields using AI, updating each cell in the target language. - Click Save.
Manage Individual Translations Manually
To translate elements individually or add custom translated copy, choose one of the following methods for each cell:
- Hover over a specific cell representing a modification under a target language column and click Translate with AI
. The cell automatically translates into the target language.
- To add custom translated copy, click directly into any translation input cell and enter your localized text manually.
-
Click Save changes after applying the modifications.
Warning: Malformed HTML tags in translation cells can break element layout during live rendering. Always verify HTML tag closure when editing source code directly.
Preview Localized Variations
You can preview how localized changes appear to end users directly inside the Visual Editor workspace. Once you have translated your modifications:
- Click the Preview your variation in another language dropdown in the top navigation bar.
- Select a target language (for example, French [fr]).
- The Visual Editor updates to render your campaign modifications in the selected language while keeping the unedited background page in its original language.
- Click Save & Close after verifying all language variations.
Configure Custom Localization via Site-wide JS
By default, Wingify detects the visitor's browser language. If your website determines user language using URL paths such as [example.com/fr/], cookies, or custom geolocation logic, you can instruct Wingify to render the page in a specific language using the Site-wide JS API. To configure the Site-wide JS API:
- In the Wingify dashboard, from the left navigation menu, go to Configurations > Websites and Apps.
- Select your website domain and go to the Sitewide JS tab.
- Add your conditional logic along with the setBrowserLanguage API call as follows:
window.Wingify = window.Wingify || [];
// Example: Force French variation for /fr/ route
if (window.location.pathname.includes('/fr/')) {
window.Wingify.push(['setBrowserLanguage', 'fr']);
}- Click Save.
Troubleshooting
| Issue | Possible Cause | Recommended Solution |
| Unedited parts of the web page are not translating. | The Translate feature only translates elements modified within Wingify. | The Translate feature does not translate your base website. Manage static site translations through your website's own translation setup. |
| Localized content does not appear during live visits despite matching the browser language. | The campaign language was not defined in Campaign Settings or Visual Editor before publishing. | Ensure target languages are saved in Campaign Settings and present in the Manage translation panel before publishing. |
| HTML layout breaks, or text renders unformatted in the target language. | Missing or mismatched HTML tags inside the cell representing a particular change in the Manage translation view for the target language. | From the left panel, click Translate, inspect the HTML translation field for the affected element, and ensure all HTML tags (e.g., <h2>, <div>) match the source structure. |
FAQs
-
Can I add new translation languages to an existing running campaign?
Yes. Open the campaign in Visual Editor, select Manage translations, click + Add language, input the translations, and save the changes.
-
What happens if a visitor's browser language is not configured in my Wingify campaign?
If a visitor's language does not match any configured target translation, Wingify defaults to rendering the original modifications in the Default Website Language configured in the campaign settings.
-
Does the Translate feature automatically translate whole web pages?
No. The translation applies strictly to elements that you create, edit, or add (such as text changes, HTML edits, or widgets) within the Wingify Visual Editor.
-
Is there a limit on the number of languages that I can add to my campaign?
No. There is no limit to the number of languages that can be added to the campaign.
Need more help?
For further assistance or more information, contact Wingify Support.