Multilingual translation plugin for EmDash CMS.
translate-em adds a Google Translate powered language switcher to public pages, with a custom floating widget, admin configuration, RTL support, browser-language auto-detection, and path-based exclusions.
GitHub: https://github.com/6arshid/Translate-em
- Client-side translation powered by Google Translate
- Floating language switcher injected into public pages
- 108 built-in languages with searchable selection
- Optional language whitelist, or expose all supported languages
- Configurable widget position:
bottom-right,bottom-left,top-right,top-left - Configurable widget theme:
light,dark,auto - Custom accent color
- Toggle flag emoji and language names independently
- Browser-language auto-detection on first visit
- RTL-aware page direction switching for languages like Arabic, Persian, Hebrew, Urdu, and more
Hide Google Baroption to suppress the Google Translate banner- Excluded path prefixes for areas like
/admin,/api, or/checkout - Admin dashboard widget with translation summary
- No constructor options required; configuration is managed from the EmDash admin UI
pnpm add @emdash-cms/plugin-translate-emIf you are developing inside the EmDash monorepo, use the workspace package instead.
Add the plugin to your EmDash integration:
// astro.config.mjs
import { defineConfig } from "astro/config";
import emdash from "emdash/astro";
import { translatePlugin } from "@emdash-cms/plugin-translate-em";
export default defineConfig({
integrations: [
emdash({
plugins: [translatePlugin()],
}),
],
});After that, configure everything from the EmDash admin:
Translation: status and summarySettings: general, widget, and advanced optionsLanguages: full language catalogue
- The plugin uses EmDash's
page:injectcapability to inject assets into public pages. - It loads the Google Translate client script in the page head.
- It renders a custom widget at the end of the page body.
- It stores the active language in session storage and Google Translate cookies.
- When RTL support is enabled, it updates
<html dir>automatically for supported right-to-left languages.
All settings are stored in plugin storage and editable in the admin UI.
| Setting | Type | Default | Description |
|---|---|---|---|
enabled |
boolean |
true |
Master on/off switch for the translation widget. |
pageLanguage |
string |
"en" |
Source language of your site content. |
targetLanguages |
string[] |
[] |
Languages offered in the widget. Empty means all supported languages. |
position |
WidgetPosition |
"bottom-right" |
Floating widget position. |
showFlags |
boolean |
true |
Show flag emoji in the widget and dropdown. |
showLanguageNames |
boolean |
true |
Show language names in the widget and dropdown. |
widgetTheme |
WidgetTheme |
"light" |
Widget theme: light, dark, or auto. |
accentColor |
string |
"#1a56db" |
Accent color used for active states and focus styles. |
autoDetect |
boolean |
false |
Switch to the visitor's browser language on first visit when available. |
rtlSupport |
boolean |
true |
Apply dir="rtl" when an RTL language is active. |
excludedPaths |
string[] |
[] |
Path prefixes where the widget is not injected. |
hideGoogleBar |
boolean |
true |
Hide the Google Translate banner shown during translation. |
Use excluded path prefixes to prevent injection in sensitive or layout-critical areas.
Examples:
/admin
/api
/checkout
/accountThe plugin excludes both exact matches and nested routes under each prefix.
- This plugin performs translation in the browser. It does not create separate translated content entries or locale-specific routes.
- It depends on Google Translate's public client script, so users must be able to reach
translate.google.com. - Translated output quality depends on Google Translate.
- The source language should match the actual language of your site content for best results.
The plugin ships with:
- A dashboard page for quick status and overview
- A full settings page with live widget preview
- A language catalogue page for browsing all supported languages
- A dashboard widget named
Translation
Run tests for this package:
pnpm --filter @emdash-cms/plugin-translate-em testTypecheck the package:
pnpm --filter @emdash-cms/plugin-translate-em typecheck
 6arshid |
 Hassan Tafreshi |
 Amin Khadivar |
MIT