Adding Automated Translation to Your Web Pages

Enable visitors to read your content in their language

+ Free translation widget

+ Instant in-place translation

+ Support for over 30 languages

Microsoft Translator Tutorial
Watch How-to Video

Here's a way for site visitors to see your Web pages in their own language, without having to go to a separate translation site.

Scenario Example

By embedding a simple translation widget on your Web pages, you can provide automated machine translation of your content. Whether it's for a personal blog or a company Web site, the widget is easy to use — and it's free, for both commercial and non-commercial sites.

You can see it in action here, just choose a language and click the arrow button to translate this page.

  • Widget text is translated to match your browser language setting.
  • Page is rendered progressively so you can start reading instantly.
  • Translation toolbar provides a progress indicator; closing it returns you to the original text.

Machine translation may not currently be a substitute for a professional human translator, but it can help someone get a general idea of what you're offering. And even if you already localize your content to multiple languages, machine translation is a great way to expand your coverage to over 30 languages!

How-to Guide

This tutorial shows you how to use the Microsoft Translator Web Page Widget to provide instant machine translation of your Web pages or blog.

Microsoft Translator is a service that provides automated machine translation. Built on technology from Microsoft Research's Machine Translation group, it powers the translation behind features you may already be familiar with: the Bing Translator, the Bing Translator Accelerator for Internet Explorer, the Office 2010 translation features, and the Windows Live Messenger Translation bot (Tbot). The widget makes it really easy to add instant in-place translation to your Web site, and it uses the same backend services.

Click on each of the steps below for step-by-step instructions.

Step 1 - Setup the basic widget properties

Go to the Microsoft Translator Web Page Widget page.

Example

Enter the address of your site in the Site address text box, and select the language of your text from the Site language dropdown list.

Example

Step 2 - Configure the widget options

Configure the translation experience, by selecting from one of three translation options:

Example
  • The Manual setting displays the widget on the page, leaving it up to the user to manually invoke the translation by selecting a target language and clicking the arrow key (as configured in the widget you saw above).
  • The Notify setting detects the user's browser language and, if different from the original text, displays a toolbar across the top of the page from which the user can launch the translation. Here's what you'd see if your browser langague was set to Spanish, and the page was written in English:

    You can experience this behavior for yourself on the Microsoft Translator Team blog. (Note that if your browser language is set to the orginal language, which is English, the toolbar doesn't appear).

  • The Auto setting does the same language detection as Notify, but automatically goes ahead with the translation. (The green line along the bottom indicates its progress).
  • If you've selected either the Notify or Auto option, you can choose not to display the widget on the page by unchecking the Display widget control checkbox. The translation toolbar will only appear when a browser language different from your content is detected.


You can customize the widget to better match your site design by selecting a color theme and moving the slider to set the width.

Example

Step 3 - Generate the widget code and embed it on your Web page

Read the terms of use, and click on the checkbox if you agree. Then click on the Generate code button.

Example

Copy the viewer embed code and paste it into your page.

Example

The code can be embedded into any HTML page that supports JavaScript.

If you're using Wordpress, Joomla, Drupal, BlogEngine.net, DotNetNuke, or ScrewTurn Wiki, you can get more detailed instructions and how-to videos by visiting the Code Snippet Embedding Tutorial.

Beyond the basics

Selective Translation
Specific sections of text can be easily excluded from translation. For example, you may not want to translate a company name or registered trademarks.

  • To exclude an HTML element, apply the custom attribute translate="no" or set class="notranslate".
  • To bulk exclude specific custom CSS classes, add <meta name="microsoft" content="notranslateclasses myclass1 myclass2"/> to the <head> tag. The list of class names following notranslateclasses will behave the same as the “notranslate” class.

SEO
Real-time translated pages are not exposed to search engines. To increase your visibility to other languages, use the interactive Bing Translator page to translate your SEO keywords and manually add the translated words to your pages.

Linking to Specific Page Translations
Pages with the embedded widget can be linked to in a specific language by appending #mstto=<lang> to the URL (where <lang> is the language code). For example, to link to a page translated to Spanish, you would append #mstto=es to the URL of the page. For more details, see Linking to a foreign language Web page with Microsoft Translator.

Accessing the Microsoft Translator Service Programmatically
The Microsoft Translator service can be accessed programmatically via AJAX, REST, and SOAP interfaces. For more information on these interfaces, see the Microsoft Translator Developer Offerings .

Collaborative Translations
The Microsoft Translator team is working on tools that enables sites to customize how content gets translated. Authorized users can edit/select or report translation alternatives that better fit the content, and site owners can select and approve the best translations. See Collaborative Translations: Announcing the next version of Microsoft Translator technology – V2 APIs and widget.

Run your apps on the Microsoft Web Platform

Did you know that the most popular Web applications — like Wordpress, Joomla, Drupal, BlogEngine.net, DotNetNuke, and ScrewTurn Wiki — all run great on the Microsoft Web Platform?

Companies of all sizes are running their Web infrastructure on the Microsoft platform because it’s cost efficient and provides the best ROI (see customer stories here).

Check out the Windows Web App Gallery, where you’ll be able to install, deploy, and customize these applications on the Windows Platform with just a few clicks.

Links to other resources