Konfiguration

Optionen setzen Sie als data-*-Attribute am Skript-Tag:

<script src="https://leichtesprache.participaite.de/plugin/leichte-sprache.js"
        data-site="IHRE-KENNUNG" data-button="#ls-button" data-label-off="Standard-Sprache" data-accent="#00507d" defer></script>

Für Listen und Werte aus einem CMS-Feld ist das Objekt window.LS_PLUGIN_CONFIG vor dem Skript-Tag praktischer:

<script>
  window.LS_PLUGIN_CONFIG = {
    site: "IHRE-KENNUNG",
    placement: "above",
    accent: "#00507d",
    skipSelectors: [".newsletter-anmeldung", "#veranstaltungskalender"],
    skipUrls: ["/formulare/", "/buergerkonto/"],
    labels: { off: "Standard-Sprache" }
  };
</script>
<script src="https://leichtesprache.participaite.de/plugin/leichte-sprache.js" defer></script>

Steht eine Option an beiden Stellen, gilt window.LS_PLUGIN_CONFIG. Beschriftungen (labels) werden zusammengeführt, Sie können also einzelne ändern. Ja/Nein-Attribute sind eingeschaltet, außer bei false, 0, no, off oder nein: data-force allein heißt „an“, data-remember="false" heißt „aus“. Auch die Optionsnamen des früheren Plugins v2 versteht window.LS_PLUGIN_CONFIG (Umstieg).

Grundlagen

Attribut	JavaScript	Standard	Bedeutung
data-site	site	nicht gesetzt	Kennung Ihrer Website aus der Freischaltung. Alternativ in der Skript-Adresse: leichte-sprache.js?site=IHRE-KENNUNG.
data-content	contentSelector	automatisch	CSS-Selektor des Inhaltsbereichs, alle sichtbaren Treffer werden übersetzt. Ohne Treffer sucht das Plugin selbst und meldet das in der Konsole. Mit eigenem Selektor kommt die Hauptüberschrift nicht automatisch dazu. Steht sie außerhalb, nehmen Sie sie auf: main, .seitentitel.
data-lang	lang	de	Seitensprachen (<html lang>), auf denen das Plugin startet, mit Komma getrennt, * für alle. de gilt auch für de-DE, de-AT usw. Ohne lang-Attribut entscheidet der Text.

Button

Attribut	JavaScript	Standard	Bedeutung
data-placement	placement	floating	floating: schwebend. above: im Inhalt, meist unter der Hauptüberschrift. inside: im Element aus data-button (mit data-button der Standard). none: kein Button, Steuerung über die JavaScript-API.
data-position	position	bottom-right	Bei floating: bottom-right, bottom-left, middle-right, middle-left, top-right oder top-left.
data-offset	offset	16,16	Bei floating: Abstand zum Fensterrand als „x,y“, Zahlen in Pixeln oder CSS-Längen (1rem,5vh). Ein einzelner Wert gilt für beide Richtungen. In JavaScript auch als Objekt: offset: { x: 24, y: 80 }.
data-z-index	zIndex	2147483000	Stapelhöhe von schwebendem Button, Hinweis-Fenster und Fortschrittsbalken.
data-button	buttonTarget	nicht gesetzt	CSS-Selektor des Elements für den Button. Fehlt es, erscheint der schwebende Button. Als Attribut heißt none oder false: kein Button.
data-button-at	buttonAt	end	Bei inside: Button an den Anfang (start) oder das Ende (end) des Elements.
data-accent	accent	#1a1a1a	Farbe von Button, Fortschrittsbalken, „Verstanden“-Button und Banner (Kontrast).

Texte und Hinweis

Attribut	JavaScript	Standard	Bedeutung
data-label-on	labels.on	„Leichte Sprache“	Button, solange das Original angezeigt wird
data-label-off	labels.off	„Original-Text“	Button, solange Leichte Sprache angezeigt wird
data-label-busy	labels.busy	„Übersetze …“	Button und Screenreader-Meldung während der Übersetzung
data-label-error	labels.error	„Leichte Sprache ist gerade nicht möglich.“	Meldung, wenn die Übersetzung nicht möglich ist
data-label-ok	labels.ok	„Verstanden“	Button im Hinweis-Fenster
data-label-unavailable	labels.unavailable	„Diese Seite gibt es nicht in Leichter Sprache.“	Meldung auf Seiten aus data-skip-urls
data-label-later	labels.later	„Diese Seite gibt es bald in Leichter Sprache.“	Meldung, wenn eine Seite bei der täglichen Übersetzung noch nicht übersetzt ist
data-label-done	labels.done	„Der Text ist jetzt in Leichter Sprache.“	Screenreader-Meldung nach dem Einschalten, wenn kein Hinweis-Fenster erscheint
data-label-restored	labels.restored	„Sie sehen wieder den Original-Text.“	Screenreader-Meldung nach dem Zurückschalten
data-label-more	labels.more	„Mehr Infos“	Beginn der Zeile mit Links, deren Text in der Übersetzung fehlt
data-labels	labels	nicht gesetzt	Alle Beschriftungen als JSON, zum Beispiel {"off": "Standard-Sprache"}. Einzelne data-label-*-Attribute gehen vor.
data-notice	notice	„Diesen Text hat ein Computer in Leichte Sprache übersetzt. Der Text kann Fehler haben.“	Text des Hinweises, \n für eine neue Zeile, false für keinen Hinweis (Kennzeichnung).
data-notice-style	noticeStyle	popup	popup: Fenster bei jedem Einschalten. banner: Hinweis über dem Inhalt, auf jeder Seite, solange Leichte Sprache an ist.

Inhalte ausnehmen

Attribut	JavaScript	Standard	Bedeutung
data-skip	skipSelectors	nicht gesetzt	CSS-Selektoren für Bereiche, die nie übersetzt werden. Als Attribut eine Selektorliste mit Kommas (.newsletter, #termine), in JavaScript eine Liste oder ein Text mit einem Selektor pro Zeile.
data-skip-text	skipText	nicht gesetzt	Regeln tag|Text, getrennt durch ;, zum Beispiel p|Hinweis der Redaktion; div|Anzeige. Ein Textblock (Überschrift, Absatz, Liste), dessen Element zum Tag oder CSS-Selektor passt und dessen Text so beginnt, bleibt im Original. Ohne tag| gilt die Regel für alle Elemente.
data-skip-urls	skipUrls	nicht gesetzt	Adressteile von Seiten ohne Übersetzung, getrennt durch Komma, Leerzeichen oder ; (oder als JSON-Liste). Ausgenommen ist jede Seite, deren Adresse einen der Teile enthält. Geben Sie Pfade (/formulare/) oder ganze Adressen mit https:// an, dort spielt www. keine Rolle. Der Button meldet dort „Diese Seite gibt es nicht in Leichter Sprache.“

Verhalten

Attribut	JavaScript	Standard	Bedeutung
data-remember	remember	an	Leichte Sprache bleibt beim Weiterklicken an (gespeichert im localStorage). Mit false speichert das Plugin nichts, jede Seite startet im Original.
data-admin-check	adminCheck	an	Kein Start im erkannten CMS-Bearbeitungsmodus (Redaktionsmodus). false schaltet die Erkennung ab, nicht empfohlen.
data-force	force	aus	Start auch in automatisierten Browsern und für Crawler. Nur für Tests auf einem Test-System.

Technik

Diese Optionen brauchen Sie im Normalfall nicht.

Attribut	JavaScript	Standard	Bedeutung
data-api	apiUrl	Herkunft des Skripts + /api	Adresse der Übersetzungs-Schnittstelle. Nur nach Absprache ändern.
data-key	key	nicht gesetzt	Zugangsschlüssel eines Testzugangs von uns. Im Regelbetrieb nicht gesetzt.
data-chunk-size	chunkSize	40	Textblöcke pro Anfrage, höchstens 200. Größere Seiten gehen in mehreren gleichzeitigen Anfragen.
data-timeout	timeout	120000	Wartezeit pro Anfrage in Millisekunden.
data-stream	stream	true	Jeder Textblock erscheint, sobald er übersetzt ist. false: erst wenn eine ganze Anfrage fertig ist.

Beispiele

Button in der Service-Leiste, eigene Beschriftung:

<script src="https://leichtesprache.participaite.de/plugin/leichte-sprache.js"
        data-site="IHRE-KENNUNG" data-button="#service-leiste" data-button-at="start"
        data-label-off="Standard-Sprache" defer></script>

Button über dem Inhalt, Hinweis als Banner, Inhaltsbereich festgelegt:

<script src="https://leichtesprache.participaite.de/plugin/leichte-sprache.js"
        data-site="IHRE-KENNUNG" data-placement="above" data-notice-style="banner"
        data-content="#inhalt, .seitentitel" defer></script>

Schwebender Button unten links, über einer 64 Pixel hohen Leiste:

<script src="https://leichtesprache.participaite.de/plugin/leichte-sprache.js"
        data-site="IHRE-KENNUNG" data-position="bottom-left" data-offset="16,80" defer></script>