Made in Builder

Made in Builder.io

How to Build: Localization webinar on March 23rd @ 10am PST. Register Now

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Log in

Product

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

in beta

growth plans

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

While this plugin is in beta, the install is manual. To install manually:

  1. Go to Account Settings for the Space.
  2. Click on the Pencil icon to the right of Plugins.
  3. In the dialogue that opens, click the Add Plugin button.
  4. Enter @builder.io/plugin-memsource-connector.
  5. Click the Save button.
  6. When the Builder UI refreshes, follow the prompt to continue configuring the plugin. If you miss the prompt, you can continue setup in the Integrations section of Builder. Scroll to the bottom of the page and click Advanced Configuration. The Phrase plugin should be an option. Click the Edit Plugin Settings button.
  7. In the Edit Memsource Settings dialogue, enter your username and password for Phrase. You must have the role of at least project manager on your Phrase account.
  8. Click the Connect Your Memsource Account button.

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.

The Phrase plugin for localization with Builder is currently in beta. 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 3rd 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?