0

I would like to add a translation option to our website but other than embedding the google translate widget (which doesn't look great) I can't find how to do this.

I am looking to style it to suit our website similar to what they have done on this site (not ours) https://www.visitscotland.com/brochures/

Any help would be much appreciated!

Niki Pat
  • 15
  • 3

2 Answers2

1

The typical approach to this is to have the content swap out based on some toggle - as in your example site - or indicator in the url - such as example.uk or example.de.

This would be much more efficient than attempting to translate your content for users with some widget, because it needs to be translated only once rather than every time a user visits the content.

There are also built-in translation features for certain browsers, chrome in particular often offers to translate pages. You can help enhance this a bit by explicitly stating what language your website is in, and then Chrome will offer to translate it to the language of the user's browser for them; there are two main ways to do this:

W3C recommends using the lang and/or xml:lang attributes in the html tag:

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

Google recommends the meta http-equiv:

<meta http-equiv="Content-Language" content="en">

Bricky
  • 2,572
  • 14
  • 30
  • could u plz help me how to code ,whatever u have said above with example. Shoud i create new pages with new language and href them? – Pradeep Kumar Apr 09 '20 at 19:10
  • You don't need to make new pages. The meta tag can be placed anywhere, but usually near the top of the page just by convention. Each page will usually have just one `html` tag, and you can add the lang/xml:lang attributes to that. – Bricky Apr 16 '20 at 22:15
  • Thank you very much bricky. If the page is in English , just by changing the "content=other language" ,will page page translate automatically when browser loads the page. – Pradeep Kumar Apr 19 '20 at 12:20
0

You can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.

You should add a reference to jQuery first, then to the CloudTranslation JavaScript file:

<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>

And add the configuration within the HTML head as follows:

<script type="application/json" id="CloudTranslationConfig">
    {
  "Settings": {
    "DefaultLanguage": "en",
    "TranslatorProvider": "Azure",
    "TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
    "UrlLanguageLocation": "Subdirectory"
  },
  "Languages": [
    {
      "Code": "en",
      "DisplayName": "English"
    },
    {
      "Code": "de",
      "DisplayName": "Deutsch"
    }
  ]
}
</script>

and add your own custom select (dropdown) having the class "CloudTranslationSelect" (you can customize the style of your select the way you want).

You can add your own translations to the configuration where it will reduce the calling from the translator provider.

More information found on https://www.angrymonkeycloud.com/translation

Elie Tebchrani
  • 309
  • 3
  • 10