What is the Google Translate Element?

Even though individuals can use browser plugins to translate content on the web, sometimes it may be necessary to give visitors an easier way to enable translations on a website. The Google Translate Element puts a button directly on the webpage with a long list of languages to select. 

Adding Google Translate to a Drupal site

You will need to be a site builder to complete the following instructions. You will be creating a basic custom block, adding the code to the source editor, and then using Block Layout under Structure to place the block. 

1. Create a new basic custom block by going to Structure -> Block Layout -> Add Custom Block
2. Select "Basic block"
3. Name your block description "Google Translate Element" or something similar that can be easily found later. 
4. Switch to the Text format "Rich Text Editor (Source)" (located at the bottom of the editor) and then click on the "Source" icon on the editor. 
5. When in source mode, paste in the following code:

   <div id="google_translate_element"></div>
   
   <script type="text/javascript">
   function googleTranslateElementInit() {
     new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
   }
   </script>
   
   <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

6. This image depicts what it looks like when the block description and code has been added in source mode. 

   

7. Click out of source mode. Then Save as Published. 
8. On the next screen, you will determine where you want your Google Translate button to appear. 
   Toggle "off" the option to Display Title. 
   Restrict the Visibility if applicable. Remember, if you do not restrict the visibility, this will display on ALL pages of the website. You can restrict by adding the root relative page URLs or by content type.
   Select the Region of where this Google Translate button will display. It is recommended to place it in the Site Notification Region. If you have access, possibly even the Header Top region. 
9. Save Block. 

To see more options for the Translate button or see it in action before placing on your site, please see The W3 School website's How To - Google Translate.