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:
- Your codebase is already set up for localization. See Integrating Builder Localization with Your Code for step-by-step instructions.
- You've added locales to your Builder Space. For more information, see Adding and Removing Locales.
- To localize custom fields, make sure you have Localize toggled on for that field in the model. For more information, see the Make a model with locales section of Localization for Multiple Blocks.
In addition to a Builder Pro plan subscription, you must have a Phrase Ultimate plan or higher on your Phrase account.
To install the Phrase plugin:
- Go to the Integrations section for the Space.
- Click on the Phrase tile Enable button.
- 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.
- In the Edit Phrase Settings dialogue, enter your username and password for Phrase (Note: your username is generated by Phrase and not necessarily the same as your email. You can find your username by checking your account in Phrase)
- Click the Connect Your Phrase Account button.
- On the next prompt, click Ok to approve the plugin's access to your content.
The video below demonstrates this process:
- Click the Publish button for your content.
- Click the three dots in the upper right of the Visual Editor.
- Select Translate.
- The dialogue that opens features the locales that you've already configured. Choose the Source Languages.
- Choose the Target Languages. You can choose more than one.
- 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.
- 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.
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.
- In the Jobs section, click your job.
- Within the job, enter the value for each target. For example, if your source were
en-USand your targetfr-FR, you'd enter values for the French. - Approve each translation by clicking on the red X to the right of each value.
- When Phrase prompts you to accept or cancel the job, click the Accept job button.
- After the acceptance process is done, click the Complete button.
- 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.
- Go back into the content entry in Builder.
- Click the three dots at the upper right of the Visual Editor.
- 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!
