Virtual Workshop: From Idea to Application in 60 Minutes

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io

Virtual Workshop: From Idea to Application in 60 Minutes

Announcing Visual Copilot - Figma to production in half the time

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 use the Smartling integration, you need:

To connect Builder with Smartling:

  1. From your Smartling dashboard, go to Account Settings > API.
  2. In the Account Tokens section, click Create Token. Account tokens enable connection to multiple projects.
  3. Name your token and click Create.
  4. When the success message displays, copy the Account UID, the User ID, and the Token Secret.

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

Important: The Token Secret is only visible immediately after creation. Copy it before closing the dialog.

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 the Integrations page.
  2. Click the Advanced button at the top-right of the page.
  3. Select Advanced Configuration.
  4. In the dialogue that opens, click Add Plugin and enter @builder.io/plugin-smartling.
  5. Click Save.
  6. When the page reloads and prompts you to continue, click OK.
  7. Click the Configure button within the Smartling integration card.
  8. In the dialogue that opens, enter your AccountUID, your User ID, and the Token Secret.
  9. Click Save Plugin Settings.

The following video demonstrates this process:

After connecting your Smartling account, you can configure additional settings:

SettingDescription

Default project

Set a default Smartling project that auto-populates when creating new translation jobs. Users can override this on a per-job basis.

Auto-authorize jobs

When enabled, translation jobs are automatically authorized in Smartling upon publishing from Builder. When disabled, jobs are sent to Smartling but require manual authorization.

Copy Smartling locales

When enabled, locales from your Smartling projects are automatically synced to Builder's custom targeting attributes.

Enable visual context capture

When enabled, Builder automatically captures screenshots of your content and uploads them to Smartling as visual context for translators.

Note that the Token Secret field is masked in the UI to protect your credentials.

The Smartling integration can automatically capture and upload visual context screenshots to help translators understand how text appears in your content.

This setting works as follows:

  1. When you authorize a translation job, Builder captures screenshots of your content.
  2. Screenshots are uploaded to Smartling as visual context.
  3. Smartling's OCR matches the screenshots to the translatable strings.
  4. Translators see the visual context alongside the strings they're translating.

Once configured, create and manage your translation jobs by leveraging tools in both Builder and Smartling.

To create a new translation job:

  1. Publish your content.
  2. Click the three-dot menu in the top-right corner.
  3. Select Add to translation job.
  4. Click the + Create button.
  5. Enter a name for your new translation job.
  6. Click the OK button.

This process creates a new Translation job data entry within Builder. To enact your job, it must be authorized.

To authorize your job:

  1. Click the Go to Job Details button that appears after creating a new translation job. Alternatively, click the three-dot menu and select View translation job.
  2. If a Smartling Project has not already been chosen, select a Project from the Job details section.
  3. Select one or more locales under the Target Locales section.
  4. Click Authorize.

When you click Authorize, Builder writes the entries to JSON files and sends them along with the instructions and job description to the project with the target locales. When the process is complete, Builder generates a notification.

Once complete, translation jobs are applied to your content entry.

To create a new translation job:

  1. After making changes to your content, click the Publish button.
  2. Click the three-dot menu in the top-right corner.
  3. Select Add to translation job.
  4. Select an existing job.

Follow the authorization process to send your translation job to Smartling.

To manually exclude a text block from translation:

  1. Right-click on the text block.
  2. Scroll down the menu options and select Exclude from future translations.

Keep in mind that this option maintains current translations. Exclusion only applies to future translations.

To delete a translation job:

  1. Click the three-dot menu in the top-right corner.
  2. Select View translation job.
  3. Click the three-dot menu in the top-right corner.
  4. Choose Delete.

Deletions are synchronized bidirectionally:

  • Jobs deleted in Builder are also deleted in Smartling.
  • Jobs deleted or canceled in Smartling are reflected in Builder.

Content entries are automatically updated to remove translation status when their associated job is deleted.

Builder's Smartling integration supports Variant Containers, allowing you to translate personalized content variants.

To translate a Variant Container, no special process is needed. Create your variant with adjusted text, click the Publish button, and then create or add a translation job.

When you send content with Variant Containers to Smartling:

  1. Everything outside of the Variant Containers are sent as one file.
  2. Each variant is sent as a separate file.
  3. Translations are applied independently to each variant based on its target locales.

This ensures that:

  • Personalized content variations are properly translated
  • Each variant can have its own set of target locales
  • Translations don't interfere with other variants

Below are fixes for some of the most common issues experienced when utilizing the Smartling integration.

If a translation job shows "in progress" but the associated Smartling job was cancelled or deleted, the status should automatically update. If not:

  1. Check the job status in Smartling directly using View Job in Smartling.
  2. If the job was deleted, remove the content entry from the Builder job and re-add it to a new job.

If content is not appearing within Smartling, ensure that:

  1. The content is published before adding to a translation job.
  2. The translation job has been authorized and not just saved as a draft.
  3. The Smartling project type is one of the supported file types.

If certain strings are missing from your Smartling job:

  1. Check if the text block was excluded from translation.
  2. For symbols, ensure you're not seeing placeholder text.
  3. For nested symbols, ensure the integration can access the symbol content.

If screenshots aren't appearing in Smartling:

  1. Verify that visual context capture is enabled in plugin settings.
  2. Ensure the content has a valid preview URL.
  3. Check that the content can be rendered. JavaScript errors prevent screenshot capture.

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

Was this article helpful?