Install Google Translate Widget

Install Google Translate Widget

The Google Translate tool/widget is easy to use once installed. You can embed this widget to give your visitors a tool for instant translation of your site. When someone selects a language from the dropdown list, a toolbar will appear across the top of the screen to remind the visitor that the content is currently translating into the selected language.

Jump to the following sections to watch our videos and read instructions to learn how to use the tool and how to install the widget. 

Install the Google Translate widget   How to Use the Google Translate Tool

See examples of Google Translate's Website Translator (all examples feature the tool embedded into the Sidebar section):

How to Install Google Translate's Website Translator

It is recommended to add the widget to your site's Sidebar content section so that the tool is available across your entire site. 

Follow the steps below, or watch our video demo.

  1. Edit your homepage (New Draft or Edit draft), and scroll down to the Sidebar Content section.
  2. Click to expand that section. Under the Sidebar Embed Code section, click to Add a 3rd Party Embed Code (HTML) paragraph box. Make sure to remove the sentence that appears by default in that newly added HTML paragraph box.
    1. Want to see your website translator above other content in your sidebar? Set the Sidebar Content section of your Sidebar to Full HTML (changed from WYSIWYG), then paste your code at the very top of that paragraph box.
  3. From these instructions below, copy the HTML code to then paste into that HTML paragraph (either the sidebar's Sidebar Content section or Sidebar with embed code section). 
  4. Set Moderation state to 'Published' then save. 

HTML Code for Google Translate Widget

Copy the entire block of text below:

<!--START OF GOOGLE TRANSLATE TOOL.-->
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!--END OF GOOGLE TRANSLATE TOOL.-->

This code was originally collected from Google, and is available to non-commercial entities. Read more.

How to Use Once Installed

Watch this video for a quick demo on how to use the Website Translator tool.

MyLO FAQ Category: