How to translate dynamic content?
In this article, you'll learn how to translate dynamic content for non-WordPress websites.
Please note that this feature is currently unavailable on WordPress. Translating dynamic content on WordPress websites can be achieved using PHP filters, as described in our Developer Documentation.
What is Dynamic Content?
Dynamic content on a website refers to elements that change in response to user interaction or in real-time updates. Examples of dynamic content include user-generated comments, real-time stock updates, or personalized greetings. Translating dynamic content can be a bit tricky, but this guide will simplify the process for you.
Steps to Translate Dynamic Content with Weglot
Access the Web Inspector
Navigate to the webpage you want to translate. Right-click on the page to display the contextual menu and select "Inspect" to open the web inspector panel of the browser Developer Tools. You can also display the Developer Tools by hitting the F12 key, or using Ctrl+Shift+I (Win/Linux), or Cmd+Option+I (macOS).
Identify the Dynamic Element
In the Developer Tools, head to the Elements tab (Chrome) or Inspector tab (Firefox), and use the selector tool to hover over the area that isn't translated. This will highlight the element.
Find the element's CSS selector
Once the element is highlighted, look for its class or ID in the Inspector panel and copy its name. You'll need to prefix it with a period (.) if it's a class name, or a hashtag (#) if it's an ID.
Alternatively, you can copy the CSS selector of an element from the Inspector panel by right-clicking on it and heading to Copy > Copy selector.
Update Weglot Setting
Head over to your Weglot Dashboard. Then, under Settings, navigate to App Settings (or "Your CMS name" Settings).
To add the dynamic content you'd like to translate, click the "Add Dynamic" button. This will open up the "Add Dynamic Element" box, where you can input the specific class or ID associated with the content.
Quick Tips
- Prefix a class name with a period (
.) and an ID with a hashtag (#). - You can also add a description to help you remember what the added selector translates to.
Save and Refresh
Click on "Save". You might need to clear your browser cache and refresh the page to see the translated content. Don't hesitate to Hard-Refresh (Mac: cmd shift R (lowercase) / PC: ctrl F5) your website's page and check back in an incognito window if you don't notice the changes.
Import/Export dynamic rules
To import or export dynamic rules, you must have at least an Advanced plan (see our pricing page).
Once in your App Settings (or "Your CMS name" Settings), you can use the "Actions" button to import/export translations:
Export dynamic rules
You can export all dynamic rules by clicking Actions > Export; your file will be available for download momentarily.
You may also select the dynamic rules you wish to export by clicking the checkboxes next to them. Then, click the Export icon at the bottom of the window.
Import dynamic rules
Please note that you can only import CSV files, with a maximum of 500 dynamic elements; the files must adhere to a specific structure. Clicking on "Import", you can download an example file.
It is essential not to modify the headers/the structure of the file, as the import will not function as intended if the headers are altered.
To import a file, click the Actions > Import button. You can then either drag the CSV file or click the "Add" button. Once the file is added, click "Next" to proceed with the import.
Feedback
If you have any thoughts or questions about this guide, let us know! We'd love to hear from you.