Doku › Für Entwickler

Marker & Shortcodes

Als Template-Autor markierst du direkt im HTML, wo ein verwalteter ProntoSite-Baustein erscheinen soll – ein Formular, ein Google-Bewertungen-Block oder ein Rechts-Link. Beim Import legt ProntoSite den Baustein an, der Kunde konfiguriert ihn danach im Dashboard. So wird aus einem statischen Template direkt eine funktionierende, pflegbare Seite.

Zwei Schreibweisen #

1. Sichtbar (empfohlen) – ein Attribut data-ps an einem beliebigen Element:

<section data-ps="google-reviews">
  <!-- dein eigener Platzhalter, den du frei gestaltest -->
  <p>Kundenstimmen</p>
</section>

<div data-ps="formular:kontakt">…dein Formular-Platzhalter…</div>

Du gestaltest den Platzhalter selbst – beim lokalen Bauen und im Editor ist er sichtbar. Beim Veröffentlichen wird der Inhalt des Elements durch den echten Baustein ersetzt; Element, Klassen und Layout bleiben erhalten (der Baustein erbt dein Design). Das funktioniert an jedem Tag (div, section, li, span, p …).

2. Als HTML-Kommentar – für Stellen ohne eigenes Markup:

<!-- ps:google-reviews -->
<!-- ps:formular name="kontakt" -->

Der ganze Kommentar wird durch den Baustein ersetzt.

Verfügbare Marker #

Marker Ergebnis
google-reviews Google-Bewertungen-Block (Kunde verbindet seinen Google-Ort im Dashboard)
formular:name Verwaltetes Kontaktformular mit Spam-Schutz; Einsendungen landen im Anfragen-Postfach
hinweis Stelle für einen Inline-Hinweis aus dem Widget „Pop-Ups". Nur nötig für die Darstellung »inline« im Seiteninhalt – Modal und Banner brauchen keinen Marker (sie schweben und sind rein im Dashboard aktivierbar).
impressum / datenschutz Markiert die Seite als Rechtstext-Seite
link-impressum / link-datenschutz Setzt einen Link auf die Impressums- bzw. Datenschutz-Seite. Bei Rechtstexten extern zeigt er auf die hinterlegte Adresse (neuer Tab, rel="noopener")
cookie-einstellungen / cookie-richtlinie Link zum Consent-Dialog bzw. zur Cookie-Richtlinie
badge Footer-Badge „Made with ProntoSite" (einheitlich in allen Sprachen). Optional – erscheint nur, wenn du den Marker setzt (kein automatisches Badge). ProntoSite bringt das Element beim Ausliefern auf die kanonische Form (eigene Klassen/Styles entfallen); wählbar ist nur data-ps-variant = auto | light | dark | mono. Footer, letzte Zeile, bündig mit dem Copyright. Snippet: Dashboard Website › Badge, Details: Badge.

Die Link-Marker (link-…, cookie-…) gehören auf ein <a>-Element: ProntoSite setzt dann nur das href und lässt deinen Linktext und deine Klassen unverändert. Ist ein Ziel nicht verfügbar, bleibt der Anker unangetastet – es entsteht nie ein toter Link.

Pflicht-Marker #

Diese Marker gehören in jede Vorlage/jeden sauberen Import:

  • Rechtsseiten: impressum/index.html und datenschutz/index.html enthalten IMMER <div data-ps="impressum"> bzw. <div data-ps="datenschutz"> als Inhaltsbereich und bringen ihre eigene <h1> mit. Schreib keinen Rechtstext von Hand hinein – ProntoSite generiert ihn in den Marker. Weil die Seite ihre eigene Überschrift hat, die Widget-Überschrift ausschalten (Dashboard: „Überschrift anzeigen" aus; per API site_legal_options showTitle:false). Beim Erst-Import mit automatischer Marker-Nachrüstung setzt ProntoSite showTitle:false selbst, sobald die Rechtsseite eine eigene <h1> hat.
  • Footer: IMMER alle vier Marker – link-impressum, link-datenschutz, cookie-einstellungen, cookie-richtlinie. Fehlen die Cookie-Links, hängt das Consent-Widget sonst einen ungestylten Block an den Seitenfuß. Mehrsprachig: dieselben vier Marker je Sprach-Footer, nur der Linktext lokalisiert.

Regeln #

  • Verwende ausschließlich data-ps (ohne Suffix). Der Namensraum data-ps-* (mit Bindestrich-Zusatz) ist systemreserviert – nicht selbst setzen.
  • Marker werden innerhalb von <script>, <style>, <pre> und <textarea> nicht interpretiert.
  • Denselben Marker mehrfach (auch auf mehreren Seiten) zu verwenden ist unkritisch – es entsteht trotzdem nur eine Instanz. Auch ein erneuter Import erzeugt keine Duplikate.
  • Das Badge (data-ps="badge") ist rein optional und tarif-unabhängig – es erscheint nur, wo du den Marker setzt, auf allen Paketen gleich. Empfohlen im Footer neben den Rechts-Links.

Die vollständigen Template-Regeln stehen in der Website-Spec.

Zuletzt aktualisiert: