Learn how to install and use the Contentful Phrase app in order to preview your content in all your languages and deploy multilingual content with translations from Phrase.
The Phrase app allows Devs, Writers, Managers, and Marketers to connect to their Phrase account and access Phrase translations directly from within Contentful. Integrate an entire Translation Management System to handle your content structure in Contentful and your translations in Phrase.
The Contentful integration is available for Phrase Enterprise plans. If you're currently on another plan but would like to use this feature, please get in touch with us or easily start a plan trial yourself.
Visit our related blog article to read through a detailed description of how to integrate Phrase with Contentful.
Install the Phrase app
Visit the publicly available Contentful marketplace or go to Manage Apps, if you're already logged into n your Contentful account. You will see all available apps listed you can easily install.
- Click on the Phrase app entry
- Click on the Install button in the top right corner of this Phrase app overview
- You will see a message saying that "The app was installed successfully"
Setup the Phrase app
- Go to the Content model tab within the Contentful main navigation on the top
- Go to the Content model you want to use the Phrase app for
- Click on Sidebar and add the Phrase app to your content model's sidebar via the little plus icon
- Go to the Field(s) list of your Content model and click on its Settings button
- Go to the Appearance tile and select Phrase
- Repeat for each field you want to use the Phrase app with
- Don't forget to hit the Save button in the top right corner
Connect to your Phrase account
You will see an area in your entry's sidebar dedicated to the Phrase app.
Hit the blue login button on the right to open up the login modal. Enter your credentials and click Connect with Phrase.
Select the Phrase project you want to connect to as well as the language in which you want to search for content. Hit the Save button.
You can now go into each input field you set the Phrase app for and search for Phrase content directly from within Contentful.
Search for content in Phrase
Simply enter the command "/text" to make this little dropdown open which lets you use your arrow keys to browse through text in Phrase. Hit the enter key to put the respective key in the input field.
If you want to search for the key in Phrase, enter the command "/key" to browse through key names in Phrase. Hit the enter key to paste it in the input field, just like you would for text.
This now allows you to have the exact reference to your content in all the languages you're handling in Phrase. What you most certainly want to do now is to hit the Contentful preview button to preview Phrase content based on the keys you inserted.
Preview your content in Contentful
First, you would need to set up the content preview for your application. This you can easily do in the Contentful Settings.
As Contentful indicates: "This scenario assumes that you have an online version of your website or an app, built by the development team so that editors could preview created entries before they go live".
If you have your custom preview environment to refer to you can follow the instructions to preview content in your online environment.
Once you have your preview URL, make sure you indicate it for the Content model you're also using the Phrase app within the Contentful Settings.
If you want to switch the language of your previewed content we recommend doing it the same way your users would do it in the live app.
For the best results, respectively showing multiple keys in your preview, you need to have an environment that uses nested translation syntax.
Please refer to the example of the i18next framework:
Some frameworks might miss this feature, in this case you need to write your custom pre-formatter.
You can get in touch with us for detailed help or refer to this example.
Using the In-Context-Editor in the Contentful preview
You can also use the Phrase In-Context-Editor (ICE) for your Contentful preview to switch the language via In-Context-Editor and edit Phrase translations in-context .
Note that you you have to extract and translate the keys from the strings/fields that you receive from Contentful yourself. Here's an example of how to provide a little function that handles the keys in the way the In-Context Editor uses it.
Follow these steps to set it up:
1. Make sure you have set up the preview for Contentful in your application
Make sure you have an environment that receives data from Contentful. This basically means you need to have an online version of your website or an app, built by the development team so that editors could preview created entries before they go live.
2. Set up the In-Context-Editor in your application
Make sure to have set up an environment for translation.
Please follow this guide on how to install the In-Context-Editor.
Then follow this guide on how to set up the In-Context-Editor.
3. Configure the In-Context-Editor as Contentful preview
Simply place the URL in the Contentful preview settings, just like you would do without the ICE. Make sure it's the one your website or app works with in combination with the In-Context-Editor.
Will Phrase further improve the integration?
Yes. Write to us to stay up to date.
Does the integration work for multiple Contentful environments?
Solely for one at the moment.
Do I need to enable localization in Contentful first?
No, it works independently.
How do I set up the In-Context-Editor?
Please follow this documentation.