How do I create a custom button for Translate?
How to embed Translate directly into your website
Overview
You can create a custom button or your own interface for Translate and use it instead of the pre-built buttons.
If you choose this option, you will execute the required functions yourself to start the translation. This allows you to fully control the design, position and behaviour of the translation.
Requirements for a custom Translate button
To ensure that your custom button works correctly, you must follow a few basic steps:
-
Include the provided JavaScript file
-
Do not create a
<translation-select>tag -
Instead, create your own individually styled HTML element
-
Add the function
EA.activateTranslation(tarLang, true)in your code to activate the translation into the desired target language -
Instead of "tarLang", insert the language code of your desired target language into the function
Recommended:
When the page initially loads, execute the function EA.init_localLang(true).
This initialisation allows the system to detect whether users have previously selected another language.
Controlling translation via functions
If you use your own button, the translation is controlled via functions.
To start the translation, use the following function:
EA.activateTranslation(tarLang, true)
This function starts the translation of the page into the desired target language. The target language is defined using the language code, which replaces "tarLang" in the function.
Example:
Translation into British English
EA.activateTranslation(en-GB, true)
Usage scenario
A person visits your website. When the page loads, the function EA.init_localLang(true) is executed.
If Translate has already been used on this page before and a corresponding Local Storage entry exists, the website will automatically be translated into the language stored in Local Storage.
If the person wants to translate the page again, they click on the button you created to start the translation. This triggers the function EA.activateTranslation stored in the button.
Depending on which language code is included in the function, the translation is performed in that language and the page is displayed in the selected target language.