Dialogfenster

Kommunizieren Sie eilige Informationen mit Ihren Besuchern

Das Plugin Dialogfenster gibt Ihnen die Möglichkeit zur Hand, schnell und auffällig Nachrichten in Form eines Popup-Dialogs an Ihre Besucher weiterzugeben. Es ist für Situationen gedacht, in denen es darauf ankommt, Leute sicher zu erreichen.

Mit wenigen Mausklicken können Sie relevante Informationen zielgerichtet an Ihr Publikum verteilen:

Das Plugin unterstützt Sie dabei durch mehrere Features:

• Aktivieren und deaktivieren Sie Dialoge mit einem Klick von der Übersichtsseite aus
• Setzen Sie Start- und Enddaten für zeitlich begrenzte Informationen
• Zeigen Sie Dialoge nur ein Mal an oder bei jeder neuen Browser-Session
• Wählen Sie zwischen vier Gestaltungsoptionen, je nach der Art des Inhalts
• Veröffentlichen Sie einen Dialog nur an einem oder an beliebig vielen Navigationspunkten

Übersicht über bestehende Dialoge

Auf der Backend-Startseite klicken Sie im Bereich „Plugins“ auf „Dialogfenster“. Anschließend sehen Sie eine Liste der bereits angelegten Dialoge.

Die Liste bietet auch einen Überblick darüber, welche Dialoge derzeit auf der Seite angezeigt werden: Kontrollieren Sie die Werte für „beginnt am“ und „endet am“ sowie die Spalte „Status“, um einen aktiven Dialog zu finden.

In der ersten Spalte „Name“ sehen Sie die interne Beschreibung des Dialogs. Dieser Text wird nie im Frontend ausgegeben, sondern dient den Redaktionsmitarbeitern zur Dokumentation.

Die Spalte „Priorität“ gibt an, welche Dialoge zuoberst geöffnet werden. Eine höhere Priorität legt einen Dialog über andere mit niedrigerer Priorität.

In der letzten Spalte finden Sie drei Aktionen, die Sie durchführen können:

• bearbeiten Sie diesen Dialog
• entweder ein aktiver Dialog wird offline gestellt
• oder ein offline-Dialog wird aktiviert
• der Dialog wird endgültig gelöscht

Unter der Liste befindet sich der Button „neuen Dialog anlegen“. Klicken Sie auf ihn, um einen weiteren Dialog zu erstellen.

Wenn Sie schnell zu dieser Hilfeseite, die Sie gerade lesen, kommen möchten, klicken Sie in der grünen Kopfzeile der Backendseite auf den Navigationspunkt „Hilfe“.

Einen Dialog erstellen bzw. bearbeiten

Wenn Sie sich in der Bearbeitungsmaske eines Dialogs befinden, haben Sie die Kontrolle über Inhalt und Aussehen des Fensters, das im Frontend angezeigt wird.

Beschreibung

Das Feld „Beschreibung“ dient als interne Gedächtnisstütze für Redakteure. Dessen Inhalt wird nur an einer Stelle ausgegeben, in der Spalte „Name“ auf der Übersichtsseite.

Dialog-Titel

Geben Sie dem Dialog einen Titel, z.B. „Wichtige Information“ oder „An alle Eltern des Kindergartens Sonnenblume“. Dieser wird im Dialog als Titelleiste ausgegeben.

Das Feld ist optional. Wenn Sie keinen Titel vergeben, wird der fertige Dialog auch keine Titelleiste haben.

Dialog-Text

Hier steht der Text des Dialogs. Sie haben die volle Kontrolle. Der Editor erlaubt Bilder, Actioncodes und Formatierungen.

Das Fenster des Dialogs im Frontend wird sich an die Menge der Information anpassen, die Sie in diesem Feld angeben.

Tipp

Beachten Sie, dass es für Besucher schwierig sein kann, innerhalb von Dialogen zu scrollen. Bei größeren Textmengen empfiehlt es sich, einen eigenen Artikel dafür anzulegen, der dann auch in der Suche gefunden werden kann, und im Dialog auf diesen zu verweisen.

live von

Wählen Sie ein Datum, ab dem der Dialog angezeigt werden soll. Das erlaubt zeitgesteuerte Displays genau ab dem Zeitpunkt, an dem Sie ihn brauchen.

live bis

Hier können Sie ein Enddatum angeben, bis zu dem der Dialog angezeigt werden soll. Nach diesem Zeitpunkt wird er nicht mehr ausgegeben, selbst wenn sein Status auf „aktiv“ steht.

Priorität

Vergeben Sie eine frei gewählte Zahl. Werden auf einer Seite im Frontend mehrere Dialoge ausgegeben, wird derjenige mit der höchsten Zahl am obersten liegen und damit zuerst gelesen werden. Wenn Sie keine Zahl angeben, wird das Feld intern mit 0 belegt.

Status

Wählen Sie zwischen „aktiv“ und „inaktiv“. Das ist eine schnelle Möglichkeit für Backendbenutzer, einen bestehenden Dialog offline zu nehmen, ohne ihn löschen zu müssen. Gleichzeitig erlaubt der Status, einen Dialog vorzubereiten, ohne dass er sofort live sichtbar wird.

Darstellungsart

Das Plugin bietet Ihnen vier Darstellungsoptionen für Ihre Nachricht, je nach dem Inhalt.

• alles überlagernd: der klassische modale Dialog lässt die Seite ausgegraut, sodass sich die Besucher voll auf den Inhalt der Meldung konzentrieren können.
• Erfolgsnachricht: haben Sie eine gute Nachricht? Wählen Sie diese Darstellung. Sie ist ebenfalls überlagernd, vermittelt aber durch Farben und Icons den Besuchern gleich eine positive Stimmung.
• Warnung: wichtige Warnungen vor Gefahr können Sie mit dieser Darstellung hervorheben. Auch diese Option überlagert die Seite. Sie weist durch Farben und Icons darauf hin, dass die Nachricht sicherheitsrelevante Informationen enthält.
• unauffällige Statusmeldung: Sie wollen Benutzer über eine Neuigkeit informieren, ohne sie im Lesefluss der Seite zu stören? Wählen Sie diese Option, um die Nachricht als Statusmeldung oben mittig auf der Seite zu positionieren. Die Seite selbst wird nicht ausgegraut, sodass Besucher die Wahl haben, wie sie mit der Meldung umgehen wollen.

Einstellungen

Hier können Sie das Verhalten des Dialogs feintunen.

• Schließen-Knopf oben: zeigt einen schließen-Knopf mit stilisiertem „x“ in der Titelleiste an. Das funktioniert auch, wenn das Feld „Dialog-Titel“ leer bleibt.
• Schließen-Knopf unten: zeigt eine Fußleiste im Dialog mit einem Button mit Text „schließen“ an.
• Klick auf Hintergrund schließt Dialog: Benutzer können den Dialog auch schließen, indem sie neben ihn auf die ausgegraute Seite klicken.
• Öffnen animieren: der Dialog öffnet sich mit einer kleinen Animation anstatt der instantanen Ansicht
• Schließen animieren: der Dialog schließt sich mit einer kleinen Animation, sobald der Benutzer einen entsprechenden Button drückt.
• nur 1x anzeigen, nicht erneut öffnen: im Regelfall wird der Dialog 1x pro Session angezeigt, also jedes Mal, wenn ein Besucher wieder neu auf Ihre Seite kommt. Mit diesem Haken wird der Dialog nur ein einziges Mal angezeigt und dann nicht mehr. In vielen Fällen ist dieses Verhalten sinnvoll, isb. wenn es sich nur um eine einmalige Information für den Besucher handelt. Dadurch werden Störungen für ihn minimiert.

Achtung!

Achten Sie darauf, mindestens einen Schließen-Knopf aktiv zu lassen. Ansonsten können Sie beinahe unschließbare Dialoge erstellen, die eine normale Benutzung der Seite unmöglich machen.

(Die einzige Art, diese Art Dialoge dann zu schließen, ist mit der Esc-Taste, die auf Handys vollständig fehlt.)

Insbesondere können Besucher dann nicht über Kontaktformulare oder Telefonnummern auf der Seite mit Ihnen in Verbindung treten, um Sie auf das Problem aufmerksam zu machen.

Hinweis zu den Animationen

Sollten Sie die Haken bei Öffnen animieren oder Schließen animieren gesetzt haben, aber keinen Unterschied feststellen, kontrollieren Sie, ob Sie bei den Einstellungen Ihres Betriebssystems ausgewählt haben, Animationseffekte zu reduzieren. (Z.B. in Windows 11: Einstellungen > Barrierefreiheit > Visuelle Effekte > Animationseffekte)

Ihr Betriebssystem gibt diese Information an den Browser, und dieser an die Webseite weiter. Das Plugin respektiert diese Benutzereinstellung und zeigt in diesem Fall keine Animation an.

Navigationspunkte

Schränken Sie die Ansicht des Dialogs auf spezifische Navigationspunkte ein. Soll die Nachricht nur auf der Startseite ausgespielt werden? Betrifft sie nur die Grundschule oder das Rathaus? Mit einer geschickten Wahl der Navigationspunkte optimieren Sie die Leser Ihrer Nachricht, ohne Seitenbesucher zu behindern, die sie nicht betrifft.

Klicken Sie anschließend auf „speichern“, um die Änderungen zu übernehmen.

Tipps zur Verwendung

Anzahl aktiver Dialoge kontrollieren

Versuchen Sie, die Anzahl an Dialogen einzuschränken. Im besten Fall sollte sich auf einer Seite im Frontend niemals mehr als ein Dialog öffnen.

Kontrollieren Sie mit den Feldern „live von“ und „live bis“ den Anzeigezeitraum des Dialogs. Fassen Sie diese Werte so eng wie möglich, sodass die Besucher stets nur relevante Informationen sehen.

Schränken Sie Navigationspunkte ein, sodass Dialoge nur in den Bereichen der Webseite angezeigt werden, in denen sie relevante Informationen beisteuern.

Dialoge testen

Wenn Sie einen Dialog während der Entwicklung testen möchten, verwenden Sie dafür z.B. einen versteckten Navigationspunkt, zu dem nur angemeldete Nutzer Zugriff haben.

Wenn Sie in den Einstellungen bestimmt haben, dass ein Dialog nur 1x angezeigt werden soll, ist ein Testen schwierig. Hier hilft Ihnen das Plugin: Sobald Sie einen Dialog bearbeitet haben und auf „speichern“ klicken, wird Ihr Browser (und nur Ihrer!) angewiesen zu vergessen, dass der Dialog bereits geöffnet war. Auf diese Weise können Sie durch ein Neuladen der Seite den Dialog wieder öffnen.

Haben Sie den Haken bei „1x anzeigen“ nicht gesetzt, wird der Dialog von alleine immer wieder angezeigt, wenn man die Seite besucht. Gehen Sie in diesem Fall beim Testen so vor: Schließen Sie offene Browser-Tabs, in denen das Frontend geladen ist. Öffnen Sie einen neuen Tab und geben Sie die URL Ihrer Webseite ein. Sobald Sie am richtigen Navigationspunkt ankommen, wird der Dialog wieder geöffnet.

Hintergrund

Der Browser speichert die Informationen darüber, welcher Dialog bereits angezeigt worden war, an zwei verschiedenen Orten.

Im Fall von „1x anzeigen“ ist das ein globales Verzeichnis, das auch für das Backend gilt. Hier kann das Backend eingreifen und Werte zurücksetzen.

Beim anderen Fall („zeige immer wieder neu an“) speichert der Browser die Information, welche Dialoge schon angezeigt wurden, für jeden neuen Tab separat. Wenn Sie einen Tab schließen und einen neuen öffnen, setzen Sie diese Information aktiv zurück.