Configuration and Styling

Basic usage

At minimum, you must define the targetElementSelector:

window.PTP_CONFIG = {
  targetElementSelector: "main",
};

Property	Type	Required	Description
targetElementSelector	string	✅	A valid CSS selector pointing to a single container on the page that holds all relevant text for the translation.
buttonPlacement	string		Defines how the toggle button is positioned. One of "above" (default), "floating", or "inside".
buttonFloatingPosition	string		When using "floating" placement, sets the screen corner or side. One of "bottom-right", "bottom-left", "middle-right", or "middle-left".
offsetX	number		Horizontal margin in pixels (default: 20) for floating buttons.
offsetY	number		Vertical margin in pixels (default: 20) for floating buttons.
zIndex	number		Controls stacking order of the floating button (default: 9999).
customButtonContainerSelector	string		Required when using "inside" placement. The button will be inserted into this container.
buttonInsidePosition	string		Optional when using "inside" placement. "start" inserts at the top, "end" appends (default).
accentColor	string		Accent color for UI elements such as links.
noTranslateHandles	string[]		List of URL handles which disable translation. If the current page URL contains one of these handles, pressing the button will show a default message instead of translated content.
noTranslateUrls	string[]		List of complete URLs where translation should be disabled. Matches ignore www. prefixes.
skipSelectors	string[]		CSS selectors for elements that should be ignored by the translator.
skipTextSelectors	string[]		List of <tag>|<Text> strings describing elements to ignore based on their text content.
metaInfos	string		Short description of your website for the context of our AI model. E.g. "Das ist die Internetseite der Musterstadt in Schleswig-Holstein"

---

What should be included in targetElementSelector?

Choose a container that includes:

• The main content of your page (e.g. headings, paragraphs, lists)
• The section you want translated into Easy Language

Avoid selecting:

• Headers, navbars, footers
• Technical widgets like cookie banners → These can be ignored using the skipping class

---

Example selectors

// Good examples
"main";
"#content";
".article-wrapper";

// Not recommended
"body"; // includes everything
".site"; // too generic
".wrapper"; // may contain nav + footer

---

Skipping parts of the page

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

Example:

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

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

• skipSelectors to ignore elements by CSS selector.
• skipTextSelectors to ignore elements by their text using the pattern <tag>|<Text>.

---

Styling the Button

You can customize the style of the button using the ID selector #ptpButton. You can also set accentColor in the configuration to change the button highlight.

Example:

#ptpButton {
  background-color: black;
  color: white;
  font-weight: bold;
}

The button wrapper and layout will still follow the placement configuration (floating, above, or inside).

If you want full layout control (e.g. custom positioning), use buttonPlacement: "inside" and style the wrapper container directly.

---