Skip to main content

Installation

Step 1: Define your content container​

Before loading the plugin, you must specify which part of your site contains the main textual content.

This is done using a configuration object:

window.PTP_CONFIG = {
  targetElementSelector: "main",
  buttonPlacement: "floating",
  ...
};
  • You can use any valid CSS selector (e.g. "main", "#content", .article-container).
  • It must point to one single container that holds all readable text.
  • Do not include the header, navigation, or footer.
  • You can exclude inner elements from simplification using the class ptp-skip. See the configuration section.

Step 2: Add the configuration block​

The config must be included before the plugin script, and preferably in the <head> or before </body>. See configuration section for all configurations regarding positioning and styling.

<script>
  window.PTP_CONFIG = {
    targetElementSelector: "main",
    buttonPlacement: "floating",
    ...
  };
</script>

Step 3: Include the plugin script​

Replace {{client_id}} with your individual client ID, provided by Participaite:

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

Complete HTML example​

Here's a working example of how to integrate the plugin into a typical HTML page:

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

    <!-- Participaite Simplify Plugin Config -->
    <script>
      window.PTP_CONFIG = {
        targetElementSelector: "main",
      };
    </script>

    <!-- Participaite Simplify Plugin Script -->
    <script
      src="https://api.participaite.de/static/{{client_id}}/ptpSimplify.js"
      defer
    ></script>
  </head>
  <body>
    <header>...</header>

    <main>
      <h1>Welcome to our website</h1>
      <p>This content will be translated to Easy Language.</p>
    </main>

    <footer>...</footer>
  </body>
</html>

Where to place it in your website​

You can place the config and script tags:

  • in the <head> (recommended for static sites)
  • before the closing </body> (works too)
  • inside CMS templates (see CMS Recipes)

Be sure that:

  • window.PTP_CONFIG comes before the script
  • The targetElementSelector exists when the DOM loads
  • The selector matches only one outer container

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.

CMS-specific help​

Using a CMS like WordPress, TYPO3 or Drupal?

→ See the CMS Recipes page for platform-specific code examples.