Made in Builder.io

Join us for the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

When localizing content, you can set up localization directly within Builder or you can integrate with Smartling. With Smartling you can connect with multiple projects.

To get the most our of this tutorial, you should have already have the following:

To integrate Smartling with Builder you need to get a a few pieces of info from Smartling so the two can connect with one another.

  1. From your Smartling dashboard, go to Account Settings > API.
  2. In the Account Tokens section, click the New Token button. Account tokens help you connect to multiple projects.
  3. Name your token and click the Create button.
  4. When the success message displays, leave it open or copy the info. The info you need to integrate with Builder are the AccountUID, your User ID, and the Secret Token. The Secret Token, which you need for Builder, isn't viewable after you've closed this notification.

The following image is a screenshot of the API page with the info you need for Builder.

Tip: For more information on Smartling API Tokens, refer to Introduction to Integrating Smartling.

With the Smartling API page still open, go to Builder in another tab.

  1. In Builder, go to Integrations.
  2. Click Advanced Configuration at the bottom.
  3. In the dialogue that opens, click Add Plugin and enter @builder.io/plugin-smartling. Click Save.
  4. When the page reloads and prompts you to continue configuring Smartling, click the Configure button.
  5. In the dialogue that opens, enter your AccountUID from Smartling, your User ID, and the Token Secret.
  6. Click the Connect Your Smartling Account button.

The following video demonstrates this process:

Within the Builder Visual Editor:

  1. Publish your content.
  2. Click the three dots in the upper right of the Visual Editor and select Add to translation job.
  3. In the Smartling Translation Jobs dialogue that opens, click the + Create button.
  4. Enter a name for the translation job. Click Ok. Builder displays a confirmation message at the bottom of the screen and adds the translation job to the CMS Data models section on the left of the Content page.
  5. In Content, Click on the Translation job model on the left.
  6. Open the new translation job entry you just created by clicking on it in the content entry list.
  7. Fill out the Description and add any Entries as needed.
  8. Under the Job details section, click Choose Project and select the project based on the source.
  9. Under Target Locales, select the target locale(s). The locales in this list are the locales set up in Smartling previously.
  10. Click the Authorize button in the upper right of the UI.

When you click Authorize, Builder puts the entries in JSON files and sends them with the instructions and job description to the project with the target locales. When the process is complete, Builder generates a notification stating "Authorized translation job in Smartling".

If you click on the notification, you'll be redirected to the job in Smartling where you can click on the job and see more details.

After you get the notification, click the three dots menu and select Apply Translation.


To view the translation job working in Builder, make sure you've enabled the Studio tab so you can switch locales and see the text blocks translate.

  1. Go to the Studio tab.
  2. Select your content entry.
  3. Click the Show Targeting button to change locales.

To exclude a Text block from translation:

  1. Right click on the Text box to open the context menu.
  2. Select Exclude from future translations.

To toggle translations back on later, follow the same steps using the context menu to include for future translations.

Tip: If you copy and paste a block on which you've toggled translations off, that setting persists in the duplicate block. If you need that new block to translate, right click on the block and choose to Include in future translations.

The following video demonstrates toggling translation off for a block:

Builder can only select and sync projects that are of the file types listed in Smartling. These include JSON,XML. YAML, Gettext, Java, Properties, or XLIFF. The image below shows where these file types are listed in Smartling:

Image of Smartling Create Project dialogue that lists resource file formats.

For more information on localization in Builder, check out the documentation on Localization with Builder.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Newsletter

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy