Add a Translate Widget to Your Website ConveyThis

Summarize this post with: 7 min read

A translate widget is the button or menu visitors use to switch your site into another language. You can add one in three ways: build it yourself on a machine translation API, install a translation plugin for your CMS, or paste a JavaScript snippet from a website translation service. The right choice depends less on the button and more on what happens behind it: whether translations can be edited, and whether each language gets its own address that search engines can index.

This guide covers the options, the setup steps for ConveyThis, how to design a switcher people can actually use, and what to test before you announce the new languages.

1. Build it on a translation API

Google’s old free “Website Translator” snippet (the google_translate_element code many older tutorials show) is reaching the end of its support, as explained in our Google Translate widget alternative guide. Google points site owners to the paid Cloud Translation API instead. With the API, a developer can send your page text for translation and render the result behind a custom language menu.

That gives you full control over how the button looks, but you also own everything else: caching translations so you are not billed for the same sentence twice, a place to correct bad output, handling pages that change, and generating separate language URLs if you want those pages in search results. For most businesses that is a software project, not a widget.

2. Install a CMS translation plugin

If your site runs on WordPress, Shopify, Joomla or a similar platform, a translation plugin or app is usually the shortest path. Most plugins add their own language switcher that you can drop into a menu, sidebar or footer. Some store translations in your CMS database; others, including ConveyThis, keep them in a cloud dashboard and serve them to your site. See the WordPress integration and Shopify integration pages for platform specifics.

3. Paste a JavaScript snippet from a translation service

For sites built on anything else (a custom stack, a site builder, a static site), a service like ConveyThis gives you one script to paste into the <head> of every page. The script adds the switcher and serves the translated version when a visitor picks a language. There are 35 integrations for common platforms, and the JavaScript integration covers everything else.

Illustration of a website with a language menu

How to add the ConveyThis language switcher

The steps are the same whichever platform you use, only the install step changes.

Create an account and add your domain. In the ConveyThis dashboard, choose your platform (or “JavaScript” for a custom site), enter your domain, and set the original language and the languages you want to add.
Install. On WordPress, install the ConveyThis plugin from the plugin directory and enter the API key from your dashboard. On Shopify, install the ConveyThis app. For other sites, copy the snippet shown in the dashboard and paste it into the <head> section of all pages. Most site builders have a “custom code” or “header code” setting for this.
Check the switcher. Reload your site. By default the switcher appears in the bottom-right corner; it can take a few minutes the first time.
Review the translations. The first pass is machine translation. Open the dashboard to edit individual sentences, use the visual editor to correct text in context, add glossary rules for brand and product names, and invite translators or colleagues with team roles.

ConveyThis language button settings in the WordPress plugin

Style and position the switcher

In the domain settings you can choose:

Position. A fixed corner of the screen, or “Custom” to place the switcher inside an element you choose, such as your main menu. You enter the element’s ID (for example menu, without the #). The position guide shows where the setting lives for JavaScript and WordPress sites.
Dropdown or list, and which way the menu opens.
Flags, names or codes. You can show language names, language codes, flags, or a combination. You can also change which flag represents a language, for example a UK flag instead of a US flag for English.

Designing a switcher people can use

A translate button is small, but it is often the first thing a visitor who cannot read your default language looks for. A few rules make it easier to find and less annoying to use:

Show language names, not only flags. Flags represent countries, not languages. Spanish is spoken in more than twenty countries, and a visitor from Mexico may not look for a Spanish flag. If you use flags, pair them with the language name.
Write each language name in that language. “Deutsch”, “Español”, “日本語” are easier to spot than “German”, “Spanish”, “Japanese” for the people who need them.
Put it where people expect it. The header or main navigation is the most common place, with the footer as a second location. A floating corner button works, but make sure it does not cover chat widgets or cookie banners on mobile.
Keep the visitor on the same page. Switching language should show the translated version of the page they are on, not send them to the home page.
Remember the choice. Once someone picks a language, keep it as they browse.
Be careful with automatic redirects. Redirecting people by browser language can help, but always leave the switcher visible so they can change it. ConveyThis has an optional browser-language redirect that is off unless you turn it on.

A widget that swaps the text in the visitor’s browser only helps people who are already on your site. Search engines index URLs, so if every language shares one address, your translated pages cannot appear in search results in those languages.

To be found in other languages, each translation needs its own URL, such as example.com/es/ or es.example.com, with the translated title and meta description on that page and hreflang tags linking the versions together. Google explains this in its guide to managing multilingual sites.

ConveyThis serves translations on real language URLs (subfolders, subdomains, or a ?lang parameter), translates meta tags and structured data, and adds hreflang automatically. If you build your own widget on an API, you have to create all of that yourself. The multilingual SEO page covers the details.

Test before you announce it

Before telling customers the site speaks their language, go through a short checklist:

Switch languages on the home page, a product or service page, a blog post and the contact page.
Test on a phone. Switchers that look fine on desktop often overlap other buttons on small screens.
Submit a form in each language and check that confirmations and emails arrive translated.
Look at text inside images, PDFs and pop-ups. These are the parts most often left untranslated.
Check right-to-left languages such as Arabic or Hebrew, if you added any, for layout problems.
View the page source of a translated URL and confirm the lang attribute, translated title and hreflang tags are there.
Ask a native speaker to read the pages that matter most, usually pricing, checkout and anything legal.

What it costs

ConveyThis has a free plan for one language and up to 5,000 words, which is enough to try the switcher on a small site. Paid plans start at $12 a month for 30,000 words. Words are counted only when translated content is shown to visitors, and bot traffic doesn’t count. The pricing page lists every plan.

If you are deciding how much of the site to translate, and in what order, start with how to translate an entire website. For a step-by-step project plan, see how to translate a website.

Add a Translate Widget to Your Website

Three ways to add a translate widget