I set up a free translation widget for a website using GTranslate and pasted the generated script directly into the page. Here is the configuration process and the settings that work on the free tier.
The layout is configured in the generator before anything goes on the site.
The widget preview updates as you choose languages
Go to gtranslate.io/website-translator-widget to build the embed. The page lets you personalize how the widget will look.
Under Widget Look, you can choose Float or Nice Dropdown with Flags. To update the view, press Update Preview and the preview changes accordingly. I left Float selected and set the translation to go from English to German, French, and Chinese.
The free version requires leaving URL structure set to none
Leave URL Structure set to None for the free version. The Native Language Names option is fine as it is.
Auto Switch to Browser Language detects the visitor language and translates the page automatically. I disabled it for this build.
Flag Style offers 2D or 3D, which changes how the flag looks. I used 2D. You can also pick Alternative Flags if you need any. For Position, choose Bottom Left, Bottom Right, Top, or Inline.
Update the preview one more time. Then copy the script into your website to get the translation running.
What to copy
- Keep the URL structure option set to None when using the free widget.
- Press Update Preview after every change so you can see the widget before you copy the code.
- Auto Switch to Browser Language is optional. I turned it off.
Tools
- GTranslate Website Translator Widget: Generator for the embed script.
Chapters
- 00:00 - Introduction
- 00:04 - Widget look and preview
- 00:24 - Selecting languages
- 00:35 - URL structure and browser language settings
- 00:48 - Flag style and widget position
- 01:00 - Copying the script