Configuration

Minimal configuration (recap)

window.PTP_TRANSLATE_CONFIG = {
  sourceLang: "de",
  targetLangs: [{ code: "en" }, { code: "fr" }],
};

sourceLang — the language your site is written in (BCP‑47/ISO code, e.g., "de", "en", "fr").
targetLangs — the languages visitors can switch to. You can optionally add a label per language: { code: "en", label: "English" }.

Full schema reference

export interface PtpTranslateConfig {
  dropdownStyle?: {
    position?: string;
    accentColor?: string;
    fontSizeButton?: string;
    fontSizeOptions?: string;
    fontFamily?: string;
    width?: string;
    borderRadius?: string;
  };
  disableLanguageButton?: boolean;
  placement?: {
    type: string; // "floating", "inside"
    position?: string; // "bottom-right", "bottom-left", "middle-right", "middle-left"
    offset?: {
      x?: number;
      y?: number;
    };
    buttonContainer?: string | undefined;
    buttonInsidePosition?: string; // e.g., "start" | "end"
  };
  sourceLang: string;
  targetLangs: { code: string; label?: string }[];
}

All properties not marked as required are optional. When omitted, the plugin uses built‑in defaults.

`sourceLang` (required)

Type: string

The primary language of your original content (e.g., "de", "en").

`targetLangs` (required)

Type: { code: string; label?: string }[]

A list of languages users can select.

Examples:

// With automatic labels (UI may derive the native name)
targetLangs: [{ code: "en" }, { code: "fr" }];

// With explicit labels
targetLangs: [
  { code: "en", label: "English" },
  { code: "fr", label: "Français" },
  { code: "tr", label: "Türkçe" },
];

Supported Languages

The following languages are supported by the DeepL translation service:

bg - Bulgarian (български)
cs - Czech (čeština)
da - Danish (dansk)
de - German (Deutsch)
el - Greek (ελληνικά)
en - English
es - Spanish (español)
et - Estonian (eesti)
fi - Finnish (suomi)
fr - French (français)
hu - Hungarian (magyar)
id - Indonesian (Bahasa Indonesia)
it - Italian (italiano)
lv - Latvian (latviešu)
lt - Lithuanian (lietuvių)
nl - Dutch (Nederlands)
pl - Polish (polski)
pt - Portuguese (português)
ro - Romanian (română)
ru - Russian (русский)
sk - Slovak (slovenčina)
sl - Slovenian (slovenščina)
sv - Swedish (svenska)
tr - Turkish (Türkçe)
uk - Ukrainian (українська)
ar - Arabic (العربية)
ja - Japanese (日本語)
ko - Korean (한국어)
zh - Chinese (中文)

Example with multiple supported languages:

targetLangs: [
  { code: "en", label: "English" },
  { code: "fr", label: "Français" },
  { code: "es", label: "Español" },
  { code: "de", label: "Deutsch" },
  { code: "it", label: "Italiano" },
  { code: "ja", label: "日本語" },
  { code: "zh", label: "中文" },
];

`placement` (optional)

Control where and how the language switcher is rendered.

Shape:

placement?: {
  type: "floating" | "inside";
  position?: "bottom-right" | "bottom-left" | "middle-right" | "middle-left"; // for floating
  offset?: { x?: number; y?: number }; // pixels; for floating
  buttonContainer?: string; // CSS selector; required when type = "inside"
  buttonInsidePosition?: string; // e.g., "start" | "end"
}

Floating

The switcher floats over the page, anchored to a corner/edge.

placement: {
  type: "floating",
  position: "bottom-right",
  offset: { x: 20, y: 20 }
}

position anchors the control to a screen corner/edge.
offset adds margins from that anchor (in pixels).

Inside

Render the switcher in a specific container in your layout.

placement: {
  type: "inside",
  buttonContainer: "#language-switcher",
  buttonInsidePosition: "end" // or "start"
}

buttonContainer is a CSS selector that must resolve to exactly one element.
buttonInsidePosition controls whether the switcher is inserted at the beginning ("start") or appended at the end ("end") of that container.

If placement is omitted, the plugin uses its default rendering behavior.

`dropdownStyle` (optional)

Customize the appearance of the switcher dropdown/button without writing CSS.

Shape:

dropdownStyle?: {
  position?: string;      // e.g., "relative", "fixed" (advanced)
  accentColor?: string;   // any valid CSS color value
  fontSizeButton?: string;  // e.g., "14px", "1rem"
  fontSizeOptions?: string; // e.g., "14px", "0.95rem"
  fontFamily?: string;    // e.g., "Inter, system-ui, sans-serif"
  width?: string;         // e.g., "220px"
  borderRadius?: string;  // e.g., "8px"
}

Examples:

// Subtle brand styling
dropdownStyle: {
  accentColor: "#2A6EF2",
  fontFamily: "Inter, system-ui, sans-serif",
  borderRadius: "8px",
  width: "220px"
}

// Compact UI
dropdownStyle: {
  fontSizeButton: "14px",
  fontSizeOptions: "14px",
  width: "180px"
}

Use CSS values (px, rem, %, etc.). Only set the properties you need — others fall back to defaults.

`disableLanguageButton` (optional)

Type: boolean
Default: false

If set to true, the plugin will not render the language switcher dropdown.
This is useful when you want to control translations programmatically using the public API.

Example:

disableLanguageButton: true;

Skipping parts of the page

If there are sections inside the target container that you want to exclude from translation, you can use the class ptp-translate-skip.

Example:

<main>
  <h1>Welcome</h1>
  <p>This paragraph will be translated.</p>
  <div class="ptp-translate-skip">This stays untouched.</div>
</main>

Any element with the ptp-translate-skip class (and its children) will be ignored. In addition, you can specify selectors in your configuration:

Complete examples

A. Floating, bottom‑right

<script>
  window.PTP_TRANSLATE_CONFIG = {
    sourceLang: "de",
    targetLangs: [
      { code: "en", label: "English" },
      { code: "fr", label: "Français" },
    ],
    placement: {
      type: "floating",
      position: "bottom-right",
      offset: { x: 16, y: 16 },
    },
    dropdownStyle: {
      accentColor: "#2A6EF2",
      borderRadius: "10px",
    },
  };
</script>

<header>
  <div class="brand">…</div>
  <nav>…</nav>
  <div id="language-switcher"></div>
</header>

<script>
  window.PTP_TRANSLATE_CONFIG = {
    sourceLang: "de",
    targetLangs: [
      { code: "en", label: "English" },
      { code: "tr", label: "Türkçe" },
    ],
    placement: {
      type: "inside",
      buttonContainer: "#language-switcher",
      buttonInsidePosition: "end",
    },
    dropdownStyle: {
      width: "220px",
      fontFamily: "Inter, system-ui, sans-serif",
    },
  };
</script>

C. Multiple target languages with explicit native labels

<script>
  window.PTP_TRANSLATE_CONFIG = {
    sourceLang: "de",
    targetLangs: [
      { code: "en", label: "English" },
      { code: "fr", label: "Français" },
      { code: "es", label: "Español" },
      { code: "tr", label: "Türkçe" },
    ],
  };
</script>

Troubleshooting

Nothing shows up: Make sure the config is defined before the plugin script and that your page has no JavaScript errors.
Inside placement not working: Ensure buttonContainer matches exactly one element at runtime.
Unexpected position: Check placement.type and placement.position values; typos fall back to defaults.

Next steps

See Installation for where to place the script and minimal configuration.
Check out Default Translations to learn how to provide custom translations for specific elements.
See API Reference for programmatic control of translations.
See Overview for what the plugin does and browser support.

Minimal configuration (recap)​

Full schema reference​

sourceLang (required)​

targetLangs (required)​

Supported Languages​

placement (optional)​

Floating​

Inside​

dropdownStyle (optional)​

disableLanguageButton (optional)​

Skipping parts of the page​

Example:​

Complete examples​

A. Floating, bottom‑right​

B. Inside a custom header container​

C. Multiple target languages with explicit native labels​

Troubleshooting​

Next steps​