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

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. 

Create the block for Google Translate

1. Create a new basic custom block by going to Structure -> Block Layout -> Custom Block Library -> select the blue button "Add Content Block". Or, under Content, use the "Block" tab to get to your block library and then select the blue button "Add Content Block". 
2. Select "Basic block"
3. Name your block description "Google Translate" or something similar that can be easily found later. 
4. Switch to the Text format "CK5 Rich Text Editor with Source" (located at the bottom of the editor) and then click on the "Source" icon on the editor itself. This will transition you to source mode. 

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.  

1. Click out of source mode. Then Save as Published. 

Place the Google Translate Block

1. Navigate to Structure -> Block Layout
2. Determine where you want to place the Google Translate block.
   Suggestion 1: The Site Notification Region will be at the very top of your site, the first thing people will see. 
   Suggestion 2: Content Header is the same region where breadcrumbs and titles go. You could place it right below those items so the Google Translate will display right below the title of the page. 
3. Once determined which region, click on Place Block next to that region. 
4. Filter/search for the block you created. When found, click Place Block again. 
5. In the configure block display:
   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.
6. Save Block. 

Restricting the Languages

To specify which languages visitors can choose from, rather than the entire language set that Google Translate provides, you can alter the script. The script will need to have an "includedLanguages" addition in the function. The following script includes "es" the language code for Spanish. The following script will therefore only give the option to translate to Spanish. Additionally, a layout element has been added to show a simpler style. It's the third example of button modes on the The W3 School website's How To - Google Translate page. 

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