How to Build a Multilingual Cargo Site

In this blog, we’ll learn how to Build a Multilingual Cargo Site, there’s no automatic way to do this in the settings, and we can’t use plugins like WordPress.

So, we’ll use HTML and some basic JS code with the help of Google Translate library to add multi-language in Cargo Site.

Table of Contents

What is a Multilingual website and why it is important?

A multilingual website is a site that offers content in more than one language. This means that visitors can choose their preferred language to view the content, and the website provides information in that language.

Multilingual websites are important for several reasons:

Accessibility: They make information accessible to a broader audience, including people who speak different languages. This can help businesses reach potential customers from diverse backgrounds.
Global Reach: By providing content in multiple languages, websites can expand their reach to international markets. This can lead to increased traffic, engagement, and potential business opportunities from around the world.
Better user experience: Multilingual websites improve user experience by offering content in users’ native languages, making navigation easier and information clearer, leading to higher satisfaction, more repeat visits, and increased conversions

Step-by-step method to add Build a Multilingual Cargo Site

Follow these steps to add a Google Translate button to your Cargo Site.

Adding Google Translate API JS code

First, open your Cargo Editor. Then, go to the Global Code editor by simply clicking on the ruler icon in the right sidebar, followed by the code icon.

Paste the javascript code to the HTML section of the Code Editor.

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

Adding a Google Translate button

Now create a separate page for the Google Translate button and make sure to Pin the page at the top of the website so that the button is visible to all the pages.

Now open the local Code editor of the particular page and paste the HTML Code mentioned below to add the translate button.

<div id="google_translate_element"></div>

Include only specific languages.

Now that we’ve added the Google Translate button successfully, users can translate to any language they prefer. However, if you want to offer specific language options like English, German, and French, you’ll need to adjust the script slightly by including the language codes for those languages.

In the code above, we’ve added a property called ‘includedLanguages’ where we specified the language codes ‘en, fr, es’, allowing users to translate the website into English, French, and Spanish.

You can find the language code on this website. Click here