> ## Documentation Index > Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt > Use this file to discover all available pages before exploring further. # Call to Action PWA # Allgemeine Beschreibung Der **Call to Action PWA**-Portlet zeigt einen Installations-Button, mit dem Besucher deine Progressive Web App (PWA) direkt auf ihrem Endgerät installieren können. Du kannst frei entscheiden, wie und wo der Button dargestellt wird, um die Installationsrate zu steigern. **Hinweis:** Die eigentlichen Einstellungen für die Progressive Web App selbst (Icon, App-Konfiguration, Push Notifications etc.) findest du im Plugin [DZM PWA](/DZM-PWA/pwa-setup). Dieses Portlet dient lediglich der Darstellung des Installations-Buttons im OnPage-Composer. # Featureübersicht Wähle zwischen einem einfachen Button, einer Topbar oder einer Image Box als Installations-Button Typ. Passe Text, Typ, Farbe und Breite des Buttons individuell an dein Design an. Lege die Ausrichtung des Buttons für jeden Breakpoint (XS bis XL) separat fest. Ergänze den Button optional um ein Icon, das vor oder nach dem Text angezeigt wird. # Settings ## Darstellung Wähle die Darstellungsform des Installations-Buttons. **Optionen:** * **Einfacher Button:** Klassischer Call-to-Action-Button * **Topbar:** Installationshinweis als Leiste am oberen Seitenrand * **Image Box:** Installationshinweis als Box mit Bild
Einfacher Button
Für den einfachen Button gibt es keine weiteren Einstellungen auf dieser Ansicht – Text, Farbe und Breite legst du unter [Button Einstellungen](#button-einstellungen) fest.
Topbar Einstellungen
Merkt sich per Cookie, dass ein Besucher die Topbar bereits geschlossen hat, damit sie ihm nicht erneut angezeigt wird. Legt fest, wie viele Tage das "Geschlossen"-Cookie gültig bleibt. Bei `0` gilt es nur für die Dauer der Session. Der Text, der in der Topbar angezeigt wird. Farbe des Topbar-Textes. Schriftgröße des Topbar-Textes, wählbar über die Überschriften-Stile (z. B. h1). Ausrichtung des Textes innerhalb der Topbar. Aktiviert die Möglichkeit, zusätzlich zum Text ein Bild in der Topbar anzuzeigen. Das Bild, das in der Topbar angezeigt wird, wenn "Topbar Bild nutzen?" aktiviert ist. Legt die Höhe des Topbar-Bildes fest. Die Einheit (px, rem oder %) wird direkt mit angegeben. Legt fest, wie sich das Bild an die verfügbare Fläche anpasst (z. B. `cover`).
Image Box Einstellungen
Die Überschrift, die in der Image Box angezeigt wird. Farbe der Überschrift. Schriftgröße der Überschrift, wählbar über die Überschriften-Stile (z. B. h1). Ausrichtung der Überschrift innerhalb der Image Box. Formatierbarer Text-Editor für einen zusätzlichen Beschreibungstext unterhalb der Überschrift, inklusive Textformatierung, Listen und Links. Das Bild, das in der Image Box angezeigt wird. Legt die Höhe des Image-Box-Bildes fest. Die Einheit (px, rem oder %) wird direkt mit angegeben. Legt fest, wie sich das Bild an die verfügbare Fläche anpasst (z. B. `cover`). ### Beispiele im Frontend Beispiel Einfacher Button Beispiel Topbar Beispiel Image Box
## Button Einstellungen Button Einstellungen Der Text, der auf dem Button angezeigt wird. Legt die Darstellung des Buttons fest. **Optionen:** * **Full:** Vollflächig * **Outlined:** Farblich umrandet * **Plain Text:** Nur Schrift Legt fest, welchem Farbschema der Button folgen soll. Die Farbe richtet sich nach den eingestellten Farben des Templates. Legt fest, wie breit der Button sein soll. **Optionen:** * **Content Width:** So breit wie der Text * **Full Width:** So breit wie der umliegende Container Lege die Ausrichtung des Buttons für jeden Breakpoint (XS, SM, MD, LG, XL) separat fest. Legt fest, an welcher Position das Icon relativ zum Button-Text angezeigt wird. Entscheide, ob ein Icon zusätzlich zum Button-Text angezeigt werden soll. ***