Add a Google translate widget to your website

Google translation widgets can be used as a tool to quickly and easily translate your website into different languages. These instructions will show you how to add a Google translate widget to the top navigation of your site. 

1. Begin by going to Google’s website translation tools

Google Translator

2. Follow the directions to configure your widget and choose your translation languages. You will be given a code snippet for embedding into your NationBuilder site. 

Google code snippet

3. Return to your control panel. Create a custom theme, if you have not already.

When creating your new theme, select the option to clone your current theme. You should also check the checkbox labelled “Switch site to your new site theme immediately.”

Clone current theme

4. Now that you have created your custom theme go to Theme > Current Custom theme > Templates. This is where you will find a list of all your website's .html files. Locate “_nav.html” and click on the blue link. 

Top nav

5. In the “_nav.html” template find:

<ul id="topnav" class="topnav desktop-nav">

Line 2

6. Copy the snippet provided from Google. Paste it below the <ul> tag you just found.

Inserted widget

7. To ensure the widget displays properly, add the following style attribute to the first line.

Add this: style="display:inline-block;"

To this: <div id="google_translate_element">

Once it is included it should look like this: 

In line style element

8. Click Save and publish.

The widget should now appear in the top navigation of your site. To add the widget to a different area of your site, find the appropriate file under Theme > Current Custom theme > Templates and follow the same instructions.  

Google translate in top nav

If you’re unclear on how this feature works, please ask a question. If you would like to see changes to this feature, please submit a suggestion.