Made in Builder

Made in Builder

Webinar ๐Ÿ‘‰ Visually Build at Scale with Builder.io & Netlify on 12/1

ร—

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

โ˜ฐ

Product

Features

Integrations

Talk to an Expert

Pricing

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

โ˜ฐ

Integrating Smartling with Builder

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.

Prerequisites

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

Getting the info Builder needs from Smartling

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.

Adding the Smartling integration in Builder

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 prompots 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:

Translating with Smartling in Builder

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.


Viewing the translation job working

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.

Excluding a block from translation

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:

Next steps

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


Need Expert help?

Reach out to us, and we will match you with a Builder expert.

Connect with us

Was this article helpful?