latest release


An alternative to Google Translate’s Website Translator widget that can work with any HTTP backend.


Here are some example pages:


On December 4, 2019 Google discontinued its popular Google Translate Widget. The widget can no longer be added to new sites. It is currently still available for websites that already have it installed.


Technically, their widget stills works if you have the code for it, but there’s no telling when it will stop working. As of June 23, 2021, their embeddable snippet is still working, even though the widget was discontinued in 2019.



The goal of this project is to revive the simple “plug and play” usage of the legacy Google Translate Widget, but to make its functionality future-proof and transferable to other translation API providers.



Back-end not included

The code available in this widget details the UI portion of the widget. However, a separate API server must be implemented and maintained by those who wish to utilitze this widget.

Translation APIs aren’t free, but a sample API server is available for prototyping. I make no guarantees that this API server will remain active. Don’t rely on this API server in production.

Sample API server:

The schema/model that a separate API server must implement is detailed below.

Browser support

Only ES6 (ECMAScript 2015) is supported. This is because esbuild support for ES5 is only partial. To see which browsers this affects, see In our TypeScript codebase, we utilize core-js and whatwg-fetch to polyfill newer JavaScript features to older browsers. However, not all of the other features we take advantage of are IE11 compatible. sessionStorage and MutationObserver are IE11 compatible, but IntersectionObserver is not. There is nothing we can do about this.



For a complete list of options and what they do, see options.ts. Their default values can be seen as they are initialized in widget.tsx.

  <!-- Whereever you want the widget to appear -->
  <div id="translate_widget_element"></div>

  <!-- ... -->

  <!-- Somewhere in your <body> -->
  <script type="text/javascript">
    function widgetTranslateElementInit() {
        pageLanguage: 'en',
        chunkSize: 10,
        // For Microsoft Translator API
        // attributionImageUrl: '',
        // For Google Cloud Translation API
        attributionImageUrl: '',
        // To include a custom logo in the banner
        // logoImageUrl: '',
        preferredSupportedLanguages: ['en', 'es', 'zh', 'de', 'fr'], // or [] to include everything
        // List of CSS classes to ignore when translating
        // Example: Ignore Google Place Autocomplete popovers
        // ignoreClasses: ['pac-container', 'pac-logo'],
        endpoints: {
          supportedLanguages: '',
          translate: ''
      }, 'translate_widget_element');
  <script src="" onload="widgetTranslateElementInit()"></script>


Your own back-end server that implements 2 endpoints with the format detailed in openapi.yaml using the OpenAPI 3.0 spec.

To preview this OpenAPI 3.0 spec, open At the top right, enter the following URL and press “Explore”:

It should look like this:

swagger ui