Smartling App Installation Guide

Smartling is one of the most widely used cloud-based language translation platforms. It enables you to localize content across multiple digital properties.

Using Contentstack and Smartling powerful APIs, the Smartling app lets you translate your entry easily into the language of your choice.


In this guide, we will go through the steps required to set up a language translation system for your Contentstack-powered website using Smartling.

Steps for Execution

  1. Set up the Essentials in Contentstack
  2. Set up the Workflow for Translation
  3. Configure the Project in Smartling
  4. Install and Configure Smartling in Contentstack Marketplace
  5. Use the Smartling App

Set up the Essentials in Contentstack

Log in to your Contentstack account and follow the steps given below:

  1. Create a stack, add a content type (for this exercise, we have created a Single Content Type named Smartling).
  2. Note: In our example, we have used “title,” “url,” “single_line,” and “rich_text_editor,” fields. We will translate the content of these fields.

  3. Next, add two languages (locales), in our example, we have added the following two languages:
  4. English [en-us] which is the source language.
    French- France [fr-fr] is another language which will be our target language.

    Note: Ensure that the languages you add are supported by Smartling.

  5. After adding the languages, go to your content type (Smartling in our example) and create an entry in the en-us locale.
  6. Finally, create a management token for your stack which we will use later while configuring the app.

With these steps, we have set up the essentials in Contentstack. Let's now move ahead with creating a workflow.

Set up the Workflow for Translation

Perform the following steps to set up workflows in Contentstack for the translation process:

  1. Click the “Settings” icon on the left navigation panel, and click on Workflows. On the Workflow Settings page, click on + New Workflow.
  2. image11.png

  3. Provide a suitable name to your workflow and an optional description.
  4. Under the Scope option, select if this workflow should be applied to All Content Types or Specific Content Type(s).
    For this example, we will select the Specific Content Types(s) option and then select the content type, Smartling from the dropdown menu, as shown below:
  5. image10.png

  6. Inside the WORKFLOW STAGES option, add four stages (for example, Draft, Send for Translation, Review, and Completed) as shown below:
  7. image8.png

    Additional Resource: Additional Resource: Learn more about workflow and its stages, refer to the set up workflows guide.

  8. Lastly, click on the Enable Workflow checkbox and then on the Save button.

With these steps, our workflow is ready.
Let's move ahead and configure the project in Smartling.

Configure the Project in Smartling

To build the Smartling app, you need a full stack Smartling account. Sign up with one of their plans and read this guide to set up your Smartling account.

Create a New Project

Log in to your Smartling account and follow the steps below to create a new project.

  1. Click on the SMARTLING icon at the top left corner.
  2. Then, create a new project by clicking on the Create New Project button.
  3. On the Create Project screen, the Apple iOS is selected by default, leave it unchanged and click on Next.
  4. Next, provide a suitable name to your project. If you have already created a linguistic package earlier, then select it from the Linguistic package dropdown.

If you haven't created any linguistic package yet, click on the Create New Package link. When you click on it, the Source Language dropdown appears.
Select your source language, for example, English (United States), and then add your target language in the Target Languages field as shown below. For our example, we have added French (France) as our target language. Then, click on Create Project:


Note: For this exercise we have selected French-France as the target language. You can add more target languages as per your requirements.

Your project is now created in Smartling. Let's move ahead and create a workflow in Smartling.

Add a Workflow for your Smartling Project

By default a workflow is added in Smartling. Follow the steps below to add a new workflow:

  1. Click on the project that you have created, then on the Settings gear icon on the extreme right corner of the screen, and select Project Settings.
  2. Now, select Workflows from the left navigation panel.
  3. On the Workflow Configuration page, you will see a default workflow. Click on the dropdown icon inside the Translation block and select Manage Step as shown below:
  4. image6.png

  5. On the Manage Step: Translation screen, provide a suitable Step Name, for example Translation. In the Translation Provider dropdown, the Human translators option is selected by default, don't change it and also leave the remaining options to their default values, and click on Save as shown below:
  6. image3.png

The Smartling Workflow is now ready.

Note: To add more target languages to your project, click on the Project Settings option, and select Languages (similar to how you selected Workflows above). Then, click on the Add Language button. Then, in the Add Languages modal, add languages from the Select Language dropdown. Select Project Default from the Default Translation Workflow dropdown, Authorize all active strings from the Translation Authorization dropdown, and click on Add.

Generate User Identifier and Secret Keys

Now, let's create Smartling user and secret keys. To do so, follow these steps:

  1. Click on the ACCOUNT SETTINGS dropdown at the top of the screen and select API.
  2. On the next screen, click on the Create Token button inside the Project Tokens section.
  3. Then, select your project (if not already selected, from the dropdown) , provide a name to your token, and click on Create.

Make note of the User identifier, Project ID, and User Secret keys as we need them while setting up our app in Contentstack.
With these steps we have now configured our Smartling account. Let's move ahead and install the Smartling app.

Install and Configure Smartling in Contentstack Marketplace

Follow the steps below to install the Smartling application in Contentstack.

  1. Login to your Contentstack account.
  2. On the left-hand-side primary navigation, you will find a new icon for Marketplace (as shown below). Click on the icon to go to the Marketplace.
  3. image4.png

  4. Within the Marketplace, you will be able to see all the apps available, hover over the Smartling app and click on Install App.
  5. In the pop-up window, choose the stack where you want the Smartling app to be installed and click on the Install button.
  6. Now on the Configuration screen, enter the following details:
    1. Smartling User Identifier: Enter the Smartling User Identifier we retrieved in the previous step.
    2. Smartling User Secret: Enter the Smartling User Secret key that we retrieved in the previous step.
    3. Smartling Project ID: Enter the Smartling Project ID that we retrieved in the previous step.
    4. Workflow: Select the Smartling workflow that we created in step 1.
    5. Workflow Stage: Select Send for Translation as the workflow stage to translate your entry.
    6. Next Workflow Stage: After translating the content, the entry is moved to the next workflow stage. Choose the next workflow stage.
    7. Management Token: Add your stack’s management token that you created in step 1.
    8. Exclude Keys: Exclude fields that you don’t want to translate.
      • Exclude fields from specific content type: Choose the Content Type(s) of the fields you want to exclude, then insert the Fields you don't want to translate.
      • Exclude fields from all content types: Navigate to the Field Level Scope section and enter the UIDs of the fields you don’t want to translate from all content types of your stack.
      • image7.png

  7. After adding the configuration details, click on the Save button.
  8. Click on Open Stack to start using the Smartling application.

Use the Smartling App

  1. Go to your stack and click the “Content Models” icon on the left navigation panel, and click on the + New Content Type button.
  2. Create a content type by adding relevant details as displayed below:
  3. Upload_2.png

  4. Go to the entry in your content type (in our example, it is Smartling content type) and change the workflow stage by selecting Send for Translation from the Workflow Details section on the right side.
  5. image2.png

  6. Now. select French - France from the locale drop-down and you should see your entry translated in the target language, French and the workflow stage changed to Review.
  7. image1.png

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page