The Bing Translator widget is available at www.bing.com/widget/translator. This site walks you through a wizard, to configure the widget to match your site. Translations are completely free, and not bound by any quotas. You’ll only need to sign up for a (free) subscription on the Azure Marketplace if you use the Collaborative Translation Framework (CTF) features of the widget, which you’ll see later.
Try the Widget!
You will be greeted with a working widget, which you can try out right there.
1. Simply click on the grey “Translate” button
2. The floating widget will appear
3. Select a language from the floating widget, if needed. The langauge to translate to will default to your browser’s accept-language setting. Here, we manually chose Arabic.
4. Watch the text get translated.
5. Check out the additional features in the widget!
- Drag and Drop the floating widget anywhere on the page.
- When idle, the widget will Collapse to take less space on the page.
- You can Share a translated page by clicking on the email icon.
- You can Revert to Original Language by clicking on the exit button on the widget (X).
- The widget is Localized According to your visitor’s browser accept-language setting. If the visitor to your website is a Spanish speaker and your website is in English, they will see the widget in Spanish.
Embed the Widget
You can embed the widget in your page right now! (Although we recommend you customize the widget for your site first – it will take a moment). If you know HTML, you’ll see that all of the code in the box is within a <div>, so be sure to copy and paste it where you would put a <div> on a page, which is just about anywhere, except within some other elements. If you have any trouble with seeing the widget, or if it looks wrong in any way, try pasting it outside of other elements, for example, after a closing </div> and before the next opening tag, or right after the <body> tag. The widget position on your page will depend on where you place it in your HTML, so experiment with that if needed.
Customize the Widget
Take a moment to customize the widget, to best fit your website and your visitors. When you are done selecting your preferences, copy the code and place it in your HTML.
Translation Settings: Select the original language your website is in. Also, select when the widget will start translating your website. Manual means that the user needs to click on the Translate button, and afterwards the translation will begin. Auto means that the translation will begin once the page loads. You can change these settings at any time, through changing the “settings” parameter in the snippet to Auto or Manual. Read more about customizing the widget parameters here.
Pick a Color: This allows you to customize the Translator button. You can pick out of the default colors or set your own. The font color can be changed through the “color” parameter while the background color can be changed through the “background-color” parameter. Read more about customizing the parameters here.
Enable Community Translations: You can allow your website’s visitors to help you enhance the translations on your website. Automatic translation is not of the quality of a human translator, so why not leverage your community to enhance the experience for everyone? You can also decide to invite translators to manage the community suggestions - promoting and rejecting translations.
For more information on Community Translation, see the dedicated walkthrough below.
The steps to Manage Community Translations are quite simple. First, enter your website’s URL. This has to be the website where you’ll put the widget. Step 2, Sign in with your Microsoft account, if you don’t have one, you can get a free one in minutes from the Sign in page.
Step 3 is to allow you to access the Translator service – if you don’t have a subscription, you’ll be able to get a free one in 2 clicks! When you click on “Associate”, you will be directed to a screen with a number of subscription options. Choose the 2,000,000 characters for free option, and you’ll then see a screen that requests that you allow the widget access to the translator. Click on “Allow Access”, and you’re done!
Advanced Customization of the Translator Widget
Customizing the Parameters
Want to only show some languages in the language list? Want to adjust the color of the widget? Want to decide when the widget starts translating? You can do all of that through simple changes to parameter values in the widget code. See the full list of parameters here.
Translator Widget API
The Translator Widget API allows you to programmatically control aspects of the widget and listen on its events. If you have some coding experience, you will be able to use the API to create your own “Translate” button and use it to invoke the widget. You may also decide to trigger an event when the page translation is complete. See the API reference here.