Made in Builder.io

Join us for an AI launch event by

Builder.io and Figma
Talk to Us
Product
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

growth plans

With the Phrase connector Plugin for Builder, you can translate your Builder content with Phrase.

The following video demonstrates toggling the locale in the Builder Studio to display the Phrase translation:

To get the most out of this document, make sure you meet the following:

Tip: In addition to a Builder Enterprise subscription, you must have a Phrase Ultimate plan or higher on your Phrase account.

To install the Phrase plugin:

  1. Go to the Integrations section for the Space.
  2. Click on the Phrase tile Enable button.
  3. When the Builder UI refreshes, follow the prompt to continue configuring the plugin. If you miss this prompt, click on the Settings button on the Phrase tile.
  4. In the Edit Phrase Settings dialogue, enter your username and password for Phrase.
  5. Click the Connect Your Phrase Account button.
  6. On the next prompt, click Ok to approve the plugin's access to your content.

The video below demonstrates this process:

  1. Click the Publish button for your content.
  2. Click the three dots in the upper right of the Visual Editor.
  3. Select Translate.
  4. The dialogue that opens features the locales that you've already configured. Choose the Source Languages.
  5. Choose the Target Languages. You can choose more than one.
  6. Click the Translate button. This causes Builder to contact Phrase and create a new project for this entry. This also causes Phrase to create a job for each of the target languages that you chose.
  7. When the translation is complete, Builder displays a notification badge that reads Auto-Generated Requested translation from memsource. To open the notification, click on the bell icon at the upper right of the Visual Editor. This opens the project in Phrase.

Tip: To exlude a block from translation, right click on the block and choose Exclude from future translations at the bottom of the Builder context menu. As an alternative to scrolling, you can search for it at the top of the context menu.

Phrase opens when you click on the Auto-Generated notification Requested translation from memource. When your Phrase project opens, it features the Builder model name, Builder content entry name, and the jobs for the languages you selected.

  1. In the Jobs section, click your job.
  2. Within the job, enter the value for each target. For example, if your source were en-US and your target fr-FR, you'd enter values for the French.
  3. Approve each translation by clicking on the red X to the right of each value.
  4. When Phrase prompts you to accept or cancel the job, click the Accept job button.
  5. After the acceptance process is done, click the Complete button.
  6. Repeat the Phrase translation for each job.

At this point, in the Project section of Phrase, each job should be translated and 100% confirmed with a status of Completed.

The following video demonstrates this process.

  1. Go back into the content entry in Builder.
  2. Click the three dots at the upper right of the Visual Editor.
  3. Select Apply Translation. This requests the new translation from Phrase and appends it to the content.

If you have suggestions or comments about this or any of the Builder.io documentation, please share your feedback through the widget to the right of this page. Thank you!


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

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

Product

Features

Pricing

What's New

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Headless CMS: Visual Guide

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Use Cases

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms