Skip to main content

Installation

Prerequisite​

  • Your Participaite client ID.

Step 1: Add a minimal configuration​

Add a global config before loading the script. Place it in the <head> or before </body>.

<script>
  // Minimal required config
  window.PTP_TRANSLATE_CONFIG = {
    sourceLang: "de",
    targetLangs: [{ code: "en" }, { code: "fr" }],
  };
</script>

Notes

  • sourceLang is the language your site is written in.
  • targetLangs lists the languages visitors can switch to. You may optionally add a label per language (e.g. { code: "en", label: "English" }).
  • Placement and styling are optional and covered on the Configuration page.

Step 2: Include the plugin script​

Replace {{client_id}} with your client ID. Load the script after the config block.

<script
  src="https://api.participaite.de/static/{{client_id}}/ptpTranslate.js"
  defer
></script>

Complete HTML example​

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>My Multilingual Page</title>

    <!-- Participaite Translate Plugin: minimal config -->
    <script>
      window.PTP_TRANSLATE_CONFIG = {
        sourceLang: "de",
        targetLangs: [{ code: "en" }, { code: "fr" }],
      };
    </script>

    <!-- Participaite Translate Plugin Script -->
    <script
      src="https://api.participaite.de/static/{{client_id}}/ptpTranslate.js"
      defer
    ></script>
  </head>
  <body>
    <header>...</header>
    <main>
      <h1>Willkommen auf unserer Website</h1>
      <p>Diese Inhalte können in andere Sprachen übersetzt werden.</p>
    </main>
    <footer>...</footer>
  </body>
</html>

Where to place it in your website​

  • Add the config and script either in the <head> (recommended) or right before </body>.
  • Ensure the config appears before the script.

You may want to prevent the plugin from loading for logged-in administrators or editors.

See Admin Check for examples in JavaScript and WordPress PHP.

Next steps​

  • Go to Configuration to learn about placement (floating/inside), dropdownStyle, and other options.
  • See Overview for capabilities and browser support.