Setup your Multilingual Email templates and User-Facing pages

Multilingual communication is a powerful tool, whether you want to become an insider in another culture market or create higher value and be more efficient in your business. Therefore in order to successfully speak to the world without losing the true meaning behind your message, it is important to do it in the languages most familiar to your audience. For that reason, we decided to expand your options and get you to the next level. Now with SashiDo, you have the opportunity to send multilingual emails and multilingual user-facing pages to your users.

Setup the Multilingual Email Templates

1. Configure Users Locale

If you wish to address your customers in their own language, first you need to add a column named localeIdentifier to your application’s User class in the DB Browser. The localeIdentifier field should be of type String. In this column, you will add the respective language for communication to the current user. To minimize the chance of mistakes we decided to use a primary sub-code that identifies the language (e.g., "en"), and a sub-code in capital letters that specifies the national variety (e.g., "GB" or "US" according to ISO 3166-2). The sub-codes should be linked with a hyphen(eg. en-GB). Implementing the logic how you will collect this data is up to you :) If the field is empty or contains invalid language, the default templates will be sent to this user.

### 2. Manage multilingual Email Templates

To manage your multilingual email templates, you should go to the Dashboard -> Your App -> App Settings -> Emails & Hosting. At the Email Templates section, you now have the option to choose Country and Language and Add template.
Hereafter choosing Country and language, please pay attention to the code displayed in the Locale field, as this is how the selected language should be entered in the localeIdentifier field. Later on, the same code should be used again when you set the user-facing pages.

As soon as you press the add button Email templates for verification and password reset are created and opened for you to customize. Just change the text by your preferences, to give your users the best experience and press Save changes button in the lower right corner.

You can edit each template's text whenever you wish, from the Manage button. Just remember to press the Save changes after you finish editing.

To delete a certain template, also first you need to go to Manage -> Delete these templates -> Save changes.

Another great feature we find of use is the ability to choose the default language for your customers. Deciding which will be the default language is of great importance since if there is no valid entry in the localeIdentifier field, the default email template will be sent. Therefore you need to choose wisely :) The default language is of note regarding the User-Facing pages too, but we will get to that later.

You can simply select the default language from the slide bar in the Default field before each language. Again press Save changes and it is set!

Setup the Multilingual User-Facing Pages

Well, multilingual email templates are a great feature, but probably you want the page that displays next to be also in your customer's language. Don't worry, we now support Multilingual User-Facing Pages too!

We know dealing with new features may be at times challenging and I will try to simplify the process for you.

1. Start with Cloud Code

As you know, the multilingual email templates that you configured earlier for your users contain some link to a respective page. Basically, there are four essential pages, that the emailed link can lead to: Successful verification, Choose password, Successfully changed password, and of course Invalid link.Here is important to keep in mind the fact that Invalid Link page is displayed in far more different cases than the other three. Because of that and the Parse specifics, unfortunately, always the Default Invalid Link page will be used.

However, each of the first three pages can be presented in your customers' language. All you have to do is write the desired HTML and CSS files in your GitHub repo. And of course, few lines of cloud code logic should be implemented in the Advanced Cloud Code.

Here I am offering a sample code, which you can put in the app.js file of your cloud code.

const path = require('path');

/**
 * Folder structure
 * public/
 * ├── pages/
 * │   ├── choose_password.html // default
 * │   └── en-US/
 * │       └── choose_password.html // en-US template
 */

function getUserFacingTemplate(templateName) {
  return async (req, res) => {
    let templatePath = path.join(__dirname, '../public/pages/');
    const { username } = req.query;    
    if (username) {


      const user = await new Parse.Query(Parse.User)
        .equalTo('username', username)
        .first({ useMasterKey: true });

      if (!user) {
        return res.end(JSON.stringify({
          error: 'unauthorized'
        }));
      }

      const locale = user.get('localeIdentifier');
      if (locale) {
        templatePath += `${locale}/`
      }
    }

    templatePath += templateName;
    return res.sendFile(templatePath);
  };
}

app.get(
  '/localized-choose-password',
  getUserFacingTemplate('choose_password.html')
);
app.get(
  '/localized-password-changed',
  getUserFacingTemplate('password_reset_success.html')
);
app.get(
  '/localized-email-verified',
  getUserFacingTemplate('verification_successful.html')
);
app.get(
  '/localized-invalid-link',
  getUserFacingTemplate('invalid_link.html')
);

2. Continue with User-Facing Templates

Have in mind that the folder structure is of great importance!

Here I can offer some guidance on how to add your User Facing Templates to your cloud code:

In the public directory in your cloud code repo, you will need to create a new folder, named pages.
Then in pages create a separate folder for each different language you would like to use. Every folder should be named as the value of the locale field in the multilingual email section in your application’s Dashboard. These folders will hold all the HTML and CSS files for the respective language. You can even have different CSS for each language if you wish.
With this folder structure, the user-facing pages for the default language should be placed right into the pages folder. Therefore if the content of the localeIdentifier field is unidentified or different from the languages you chose for communication, the default templates will be sent.

If you haven't had the chance to look at our previous tutorial on the topic, you can check it out here.

3. Finalize by configuring Localized User-Facing pages in SashiDo’s Dashboard

Last, but not least is telling SashiDo you want to render the localized User-facing pages. For that just go one more time to the App Settings -> Emails & Hosting. There in the User-Facing Pages section add the path for the localized templates as shown below. Actually, these will be the routes you defined earlier in the cloud code, with Express.js.

I believe that's all you need to know to get started with multilingual emails and user-facing pages. And I am sure that the users will appreciate such distinctive communication.

That’s it, you are all set now :)

Happy coding!