Google Translate makes it simple to add a number of language options to your site. In this guide we’re going to cover how to add Google Translate to your InstantPro site.
Step 1: From the Main Menu select Custom Code & Snippets from under the Website Tools heading.
Step 2: Click the Add New Snippet button. Choose a name for your snippet and enter it into the Snippet Name field.
Step 3: Open a new tab and head to the Google Translate Site (or click the link). Click Add your website now, if you have a Google Account you can log in, if not you will need to create one.
Step 4: Enter the URL of your website in the box provided and ensure that the Website language is set to English (because InstantPro is built in English). Then press Next.
Step 5: Under Translate languages you can select to translate All languages or you can select to add Specific languages. Then choose the Display mode you like best.
The Advanced options are especially handy. If you already have content in a language other than English, you’ll want to tick Your page contains content in multiple languages – Google can determine which language you have used, and won’t try to translate it further (for example if you add some Spanish content, translating to Spanish will not change the sections already in Spanish).
Lastly if you use Google Analytics, you can choose to track translation traffic.
Once you are happy with your choices, select Get Code.
Note: You have a couple of options regarding how you use the code. You can translate individual pages, by copying the code & pasting it in snippets – you’ll have to add the snippet to each page and visitors will have to select to translate each page. You can translate the whole site by copying and pasting the code into the Custom<head>Code section – this will display a translate banner on the top of the page (this is not ideal, if you close the banner twice, it will disappear).
The best option is to use a combination of the 2; adding a snippet to pages (such as the homepage) – where selecting to translate will apply to the whole site, we will cover this method for the purpose of this guide.
Step 6: Copy the <div> section of the code, as seen in the image below:
Go back to InstantPro and Paste the code into the Snippets section and press Save.
Step 7: Now open the Custom<head>Code tab, go back to Google Translate and Copy the rest of the code (it should look something like the image below)
Paste this into the Custom<head>Code section of InstantPro, then click Save and Finish.
Step 8: You’ll now need to add the translate drop down to the chosen pages. To do this, from the Main Menu select Page Manager, select to edit the page you would like to add the snippet to. From the options on the left, select Add Snippet, drag & drop the Snippet onto the page, and place it where you would like the drop down to appear, double click inside the snippet box and from the drop down select the translate snippet you added. Once you are happy with the placement press Finish.
If you would like to check that the translation drop down is displaying correctly on your site, click the Preview Website button in the InstantPro header.