( example with custom styling options )
On December 4, 2019 Google discontinued support for their Google Translate Widget, allowing only the pre-existing users of the widget to continue using it on their sites, and prompting webmasters to find alternative solution for the once ubiquitous Google widget.
I tested all of the popular alternatives to Google Translate Widget, many of which have not been updated since Google became the go-to solution and found them all to be broken or without an HTML widget for web translation available, with the exception of Gtranslate which still works and offers a free embeddable HTML language switcher comparable to the classic Google widget.
INSTALLATION – HTML Widget Copy-and-Paste Method
Installation link for free versions of GTranslate: https://gtranslate.net/download/
Navigate to the installation link and click the “HTML” tab to view the web widget code settings. You must leave the first option as “On Fly” for the Translation Method, and leave the option for URL Structure as “Free.”
Review the remaining options available which may also be left on their default values or change them if needed to suit your website. After you are satisfied with the chosen settings, click the HTML code visible in the Widget Code box to highlight and copy the entire code snippet, and paste that code snippet in the location on your website where you would like the language dropdown widget to appear.
INSTALLATION – WordPress Plugin Method
Installation files for plugin: https://wordpress.org/plugins/gtranslate/
– or –
Install from WP dashboard: Plugins -> Add New -> ‘Translate WordPress with GTranslate’
Follow the steps outlined at the following link to complete installation and activation of the plugin files – https://gtranslate.io/docs/56-wordpress-documentation .
Once installed, you may configure the plugin options by clicking Settings -> ‘GTranslate’ from the left side menu of the WordPress dashboard. You then have the option of enabling the widget by selecting the widget location from the drop-down option in the GTranslate settings, or by placing the following shortcode in your site’s content:
[GTranslate]
STYLING – Make Optional Style Adjustments Using CSS
Finally, if you need to fine-tune the position or style of your language switcher you can add the class switcher in the ‘Custom CSS’ settings of your WordPress theme, which is normally found under Appearance -> ‘Customize’ from the left dashboard menu.
The example CSS below, when added to a page, would hide the language switcher:
/* The style changes below are shown here as an example only */
.switcher {
display: none;
}
That completes the installation process for the GTranslate language switcher widget. If you are using Joomla or Drupal you will need to reference the installation steps linked to from the installation page here – https://gtranslate.net/download .
PREMIUM UPGRADE – Custom URLs with paid version of GTranslate
GTranslate also offers a paid version of their service which supports creating individual URLs for each language, so that by visiting a subdomain or a sub-folder of your website the translations will default to a given language without the visitor having to select it themselves. For example, I could create a URL at https://www.amritabithi.com/es/ pointing to the sub-folder “/es/” which would tell the page to load the Spanish translation by default, and use that to create user-friendly backlinks or help myself to be indexed in search for other languages. GTranslate offers free live chat support and assistance with setting up the more advanced paid features, and will be best equipped to recommend the proper configuration for your web host.
I hope this article has been helpful in saving you time in your search for a viable replacement for Google’s Translate service, and if you still have any questions or issues installing please do leave a comment below.
Happy Translating!