Using the Collaborative Translations Framework (CTF) through the Widget

In this article, you’ll go step-by-step through the workflow of using the Community Translation feature, including how to invite new members, and how to assign different members to different roles and responsibilities.

To get started, use the Translator Widget to translate a webpage. Here, we’re translating to French. Afterwards, hover over any sentence, a tooltip will appear.


Clicking on “Improve Translation” will show you alternative translations (suggested by other users). Here, there aren’t other translations, so you only see the automatic translation (indicated by the blue Translator logo).


You can Edit, Select or Report a translation. As long as you’re not signed in as a user who has authoritative roles, your suggestions will only show up to other visitors when they click on “Improve Translation”.


Click on Edit and submit a suggestion, you’ll see that this has two effects: 1. the translation on the website is now replaced by yours.


2. When you click on “Improve Translation” again, you’ll see your suggestion listed as a possible translation.


Now, what if you (as a webmaster) want this suggestion to show to all your website’s visitors by default? They don’t need to click on “Improve Translation” to see it. What if you see a good suggestion by one of the website visitors and you want it to show to everyone as well? Perhaps you want your Arabic speaking friend to help you enhance the Arabic translation of your website? Then you need to Manage Community Translations. When you have this option enabled, you’ll see that the floating widget enables you to Sign In. Once you do, you can 1. Click on your name in the floating widget, or 2. Click on “Dashboard” on any translation tooltip, to access the Dashboard. You are now able to Manage Translations and Invite Translators.



When you select the Dashboard, you’ll be given a dialog with two tabs, one to Manage Translators and one to Manage Translations. The Manage Translators is selected by default, and it allows you to invite people to your site and operate on the site in different roles. Here you can see I am inviting a user at ‘’ to join me on the site, and help me to improve the translations. I’ve set her to be a translator.



When I click ‘Send Invitation’, she’ll be added to the list on the right hand side and her role will be visible as 'Translator’.




She will receive an email with a link back to the site, and instructions on how she can assist in improving the translations on the site.


When she visits the site, and hovers over a piece of text, she can select the ‘Improve Translation’ link, and sign in just as before. What she’ll see depends on the text highlighted, and the history of edits there, but for this example, she can see two translations of the highlighted text:


The bottom translation has the Microsoft Translator logo beside it, indicating that it is the default translation received back from the Microsoft Translator API. The top one has the administrator’s logo, and it is the one that you saw a little earlier in this article.

When she hovers over any of these translations, she’s given the option to Edit the translation, Select the current translation as the best option or report a translation as incorrect or offensive.


If she selects ‘Edit’ she can type something different in, proposing it as a better translation. So, for example, the English word ‘Azure’ was used in the original post. This was referring to the ‘Windows Azure’ technology, but the translation just translated the color azure to d’azur.

So she can retype the translation to ‘Figured’ instead of the ‘I thought’, and submit this as an alternative, improved translation.


The translation is accepted right away, and the page is updated with the new value:



However, this is customized only for her experience. Anybody else signing into the page will still see the original translation. If they hover over the text, they’ll see three options: the original, the one submitted by the administrator earlier, and the new one submitted by the invited translator:



The green one is presently the preferred translation, because it is the one the administrator submitted earlier in this article. To make the one from the invited guest become the default, the administrator will sign in as before, go to the dashboard and select the ‘Manage Translations’ tab. The list of community proposed translations will appear, and from there, the administrator can see what the options for translation are:



If the administrator decides that the second one (with ‘Figured’) is the better translation, he can hover over it and select ‘Approve’. This translation now becomes the default, so all visitors to the page will see it.


In conclusion, you can see that the tools available for improving the translations on your site through collaboration with speakers of the target language, make the process smooth and efficient, without needing code to be written, and without needing to give others access to your web site. The widget provides all of the needed functionality.

Skip to main content