Use multiple languages

Introduction

In this example, we are going to extend the travel catalog showcase.

We are going to send an email to a bunch of customers with the URL to the catalog. Both the email and the hosted page will be available in three languages: Spanish, English and German.

Moreover, the customers will be able to change the language of the hosted page.

These are the steps that are going to be covered:

  1. Set up our data scheme
  2. Create our interface
  3. Add block languages
  4. Design our templates and contents
  5. Edit languages in contents
  6. Test the process

Set up our data scheme

Our data scheme must basically look as follows:

{
   "lang": "",
   "name": "",
   "email": ""
}

lang: the customer’s language.

name: the customer’s name.

email: the customer’s email.

For more information on how to set up our JSON data scheme, please visit this link.

Create our interface

The next step is to set up the structure of the data that our interface will receive and map it against our data scheme.

In this example, we are going to call it email sender and it is going to use exactly the same payload as our data scheme. Our mapping should look as follows:

The scope available must be batch in the authorization tab.

For further information on how to create an interface, please refer to this page.

If you need to know more about how to configure an interface, please visit this post.

Add block languages

Now we are going to add the languages that we will be able, later on, to edit in the content editors. To do so, we have to open the “Block Languages” tab of your account settings.

Here we add our three languages, enable the switcher to update and finally click on the “Save” button.

You can download the language icons here. You must create a folder in the root directory of your file manager called “languages” and upload these icons there.

Design our templates and contents

You can download all needed templates by clicking on this link.

We have updated the catalog template as we need to add the language switcher. To do this, we have appended the following code snippet to the <header> tag:

<div class="languages_container">
   [#LANGUAGES OPTION={{LIST}}#]
</div>

This will display the following drop-down menu at the right edge of the screen:

Edit languages in contents

Finally, we are going to edit the catalog and catalog email contents in order to add the translations in our three languages for each text.

To do so, we simply click on an editable text from the left panel of the editor and enable the switcher that will appear on the right side to use languages.

It is important to remember that a text is only editable if its HTML element contains the attribute attr-canedit.

Once we have entered all translations for a text, we apply the changes by clicking on the “Apply” button.

These are the translations that we are going to add in the catalog content:

Awesome offers

  • EN: Awesome offers
  • DE: Unglaubliche Angebote
  • ES: Ofertas increíbles

Offer #0001

  • EN: Offer #0001
  • DE: Angebot #0001
  • ES: Oferta #0001

Read more

  • EN: Read more
  • DE: Weiterlesen
  • ES: Leer más

Offer #0002

  • EN: Offer #0002
  • DE: Angebot #0002
  • ES: Oferta #0002

These are the translations that we are going to add in the catalog email content:

Hi there,

  • EN: Hi there,
  • DE: Hallo,
  • ES: Hola,

have a look at our magnificent offers.

  • EN: have a look at our magnificent offers.
  • DE: guck dir mal unsere fantastische Angebote an.
  • ES: échale un vistazo a nuestras increíbles ofertas.

View offers

  • EN: View offers
  • DE: Angebote ansehen
  • ES: Ver ofertas

Moreover, we are going to add a different subject for each language:

  • EN: Catalog
  • DE: Katalog
  • ES: Catálogo

Test the process

In order to test the process, we are going to send a bunch of customers that are going to receive this email. To do this, we are going to run the following CURL request:

curl -X POST \
  https://{{platform_api_url}}/v1/batch \
  -H 'Cache-Control: no-cache' \
  -H 'Content-Type: application/json' \
  -H 'X-Apikey: {{put_here_your_api_key}}' \
  -H 'X-App: email_sender' \
  -H 'X-Batch-Status: ready' \
  -H 'X-Flow: Email sender' \
  -H 'X-Scopes: batch' \
  -d '[
	{
          "lang": "DE",
          "name": "Robert Müller",
	  "email": "my-email@domain.de"
	},
	{
          "lang": "EN",
	  "name": "John Doe",
	  "email": "my-email@domain.com"
	},
        {
          "lang": "ES",
          "name": "Pedro Arenas", 
          "email": "my-email@domain.es"
        }
]'

You must replace {{platform_api_url}} by the API URL and {{put_here_your_api_key}} by your API key.

Each user will receive the same email but in a different language as the value stored in @data.lang@ will be different. Also, the dashboard will be by default shown in the same language.

If you open the catalog URL in any browser and choose a different language from the drop-down menu, the page will refresh and it will show the corresponding translations.

Congratulations! You have successfully set up your first multi-language system.