Hinweis-Banner einrichten

Das Hinweis-Banner ist ein schmaler Streifen mit einer kurzen Nachricht, der quer über Ihre Website läuft — typischerweise ganz oben, noch über Logo und Menü. Es eignet sich für alles, was für begrenzte Zeit gilt und alle Besucher sofort sehen sollen, zum Beispiel:

Betriebsurlaub oder Schließtage
Geänderte Öffnungszeiten, etwa an Feiertagen oder während einer Inventur
Befristete Aktionen und Sonderangebote
Kurzfristige Hinweise, zum Beispiel eine Krankheitsvertretung, eine Baustelle vor dem Eingang oder ein gesperrter Parkplatz

So funktioniert es im Überblick

Öffnen Sie in Ihrem Konto beim Widget Hinweis-Banner die Schaltfläche Öffnen. Dort finden Sie Status, Vorlagen, Live-Vorschau und Einstellungen auf einer einzigen Seite.
Klicken Sie eine passende Vorlage an oder tragen Sie Ihre Nachricht selbst ein, wählen Sie Farben und — falls gewünscht — einen Zeitraum, und klicken Sie auf Speichern.
Betten Sie den Code auf Ihrer Website ein, am besten mit der Zusatzangabe data-mode="banner", damit das Banner ganz oben erscheint (Einzelheiten dazu weiter unten).

Einrichtung: Die Banner-Seite

Über Öffnen gelangen Sie auf die Hauptseite des Banners. Oben zeigt sie den Status Ihres Banners (AKTIV oder INAKTIV) mit einer kurzen Begründung sowie eine Live-Vorschau, darunter die Vorlagen und das Bearbeitungsformular.

Vorlagen: in einem Klick starten

Statt bei einem leeren Formular anzufangen, können Sie oben auf der Seite eine Vorlage anklicken: Betriebsurlaub, Feiertags-Öffnungszeiten, Umzug, Krankheit / kurzfristig geschlossen oder Aktion. Das füllt Nachricht, Icon, Farbwahl und — wo sinnvoll — auch gleich einen Beispielzeitraum aus.

Wichtig: Eine Vorlage ist ein Startpunkt, kein Endergebnis. Prüfen Sie danach den Text (Adresse bei „Umzug“, tatsächliches Datum bei „Betriebsurlaub“ oder „Krankheit“) und passen Sie ihn an, bevor Sie auf Speichern klicken. Ein bereits eingetragener Nachrichtentext wird beim Klick auf eine Vorlage erst nach einer Sicherheitsabfrage ersetzt.

Nachricht

Im Feld Nachricht (max. 500 Zeichen) steht der Text, den Besucher lesen. Zeilenumbrüche werden übernommen. Ist das Feld leer, wird kein Banner angezeigt — unabhängig davon, was bei Zeitraum oder Farben eingetragen ist.

Vor dem Livegang prüfen: Ein neu angelegtes Banner ist mit einem Beispieltext zu einem Betriebsurlaub vorausgefüllt (samt Beispieldatum im Text) — ohne hinterlegten Zeitraum. Lassen Sie diesen Beispieltext unverändert stehen, zeigt Ihre Website dauerhaft eine falsche Urlaubsmeldung, auch weit über das im Text genannte Datum hinaus, weil nichts sie automatisch beendet. Ersetzen Sie den Text vor dem Einbetten durch Ihre eigene Nachricht (oder eine angepasste Vorlage) und tragen Sie bei Bedarf einen echten Zeitraum ein (siehe unten).

Farben

Unter Farben legen Sie fest, woher die Gestaltung des Banners kommt:

Design der Website übernehmen (empfohlen und Voreinstellung bei neuen Bannern): Hintergrund, Text und Akzentfarbe folgen automatisch dem Design, das Sie für diese Widget-Instanz eingestellt haben — das Banner sieht dann aus wie ein Teil Ihrer Website, auch bei einer dunklen Seite.
Vordefinierter Stil: eine feste Signalfarbe unabhängig vom Website-Design — Info (blau, folgt Ihrer Akzentfarbe), Warnung (immer Gelb) oder Urlaub (immer Türkis). Praktisch, wenn eine Meldung unbedingt auffallen soll, egal wie die Website sonst gestaltet ist.
Eigene Farben: Sie bestimmen Hintergrund, Text und Akzent (für Link/Button) selbst über je einen Farbwähler. Darunter zeigt Ihnen die Seite sofort das berechnete Kontrastverhältnis von Hintergrund zu Text an — liegt es unter 4,5:1, erscheint ein Warnhinweis, weil der Text dann schwer lesbar werden kann.

Die Akzentfarbe (Rückfallwert) weiter unten im Formular wirkt beim Stil „Info“ sowie überall dort, wo „Design der Website übernehmen“ gewählt ist — solange im Design-Editor keine eigene Akzentfarbe eingestellt ist. Am einfachsten stellen Sie Ihre Markenfarbe direkt im Design-Editor der Instanz ein (Link „🎨 Design anpassen“ auf der Banner-Seite): Das gilt dann automatisch für alle Widgets dieser Instanz.

Icon

Im Feld Icon (Emoji, optional) können Sie ein einzelnes Emoji voranstellen, zum Beispiel 🏖️ für Urlaub oder ⚠️ für eine Warnung. Falls Sie nicht wissen, wie man ein Emoji eintippt:

Windows: Taste Windows + . (Punkt) öffnet die Emoji-Auswahl.
Mac: Tastenkombination Cmd + Ctrl + Leertaste.
Smartphone: Auf der Bildschirmtastatur das Smiley- oder Globus-Symbol antippen.

Das Icon-Feld ist rein optisch und darf auch leer bleiben.

Anzeigen ab / Anzeigen bis (Zeitraum mit Uhrzeit)

Mit diesen beiden Feldern steuern Sie, wann das Banner automatisch erscheint und wieder verschwindet — ganz ohne dass Sie am Stichtag selbst etwas tun müssen. Zu jedem Datum gehört ein optionales Uhrzeit-Feld daneben. Alle vier Felder sind optional und beziehen sich auf die deutsche Zeitzone (Europe/Berlin):

Bleibt Anzeigen ab leer, ist das Banner sofort nach dem Speichern sichtbar. Bleibt die zugehörige Uhrzeit leer, gilt 00:00 Uhr.
Bleibt Anzeigen bis leer, bleibt das Banner unbegrenzt sichtbar, bis Sie es selbst ändern. Bleibt die zugehörige Uhrzeit leer, gilt 23:59 Uhr.
Das Datum bei Anzeigen bis zählt noch mit (einschließlich).

Beispiel: Die Aktion soll am Freitag um 20:00 Uhr enden. Tragen Sie bei Anzeigen bis das Freitagsdatum und bei der Uhrzeit daneben 20:00 ein — ab 20:01 Uhr ist das Banner weg. Lassen Sie die Uhrzeit stattdessen leer, gilt der ganze Freitag bis 23:59 Uhr.

Die Checkbox Restzeit anzeigen (z.B. „noch 3 Tage“) blendet direkt neben der Nachricht die verbleibenden Tage bis zum Enddatum ein — praktisch, um Dringlichkeit zu erzeugen, etwa bei einer befristeten Aktion. Ohne hinterlegtes Anzeigen bis bleibt die Einstellung wirkungslos.

Link (optional) und Darstellung

Unter Link-URL (optional) können Sie eine Adresse hinterlegen, zu der Besucher gelangen, zum Beispiel zu Ihrer Aktionsseite. Im Feld Link-/Button-Text legen Sie die Beschriftung fest — bleibt es leer, wird automatisch „Mehr erfahren“ verwendet. Bei Darstellung des Links wählen Sie, wie der Link erscheint:

Als Text-Link in der Nachricht: ein unterstrichenes Wort direkt im Fließtext — dezent, klassisch.
Als eigene Schaltfläche (Button): ein echter, farbig abgesetzter Button neben dem Text — auffälliger und meist die bessere Wahl für Aktionen, bei denen Sie wirklich einen Klick wollen.

Besonders wichtig: Die Link-URL muss vollständig sein und mit https:// (oder http://) beginnen, zum Beispiel https://ihre-website.de/aktion — nicht nur ihre-website.de/aktion. Ist die URL unvollständig oder falsch, wird beim Speichern nichts übernommen, auch nicht Ihre neue Nachricht oder ein geänderter Zeitraum: Sie landen wieder auf dieser Seite mit den alten, zuvor gespeicherten Werten und müssen alle Änderungen erneut eintragen. Ohne hinterlegte Link-URL erscheint weder Text-Link noch Button — die Nachricht steht dann einfach ohne Link da.

Schließen-Button

Über die Checkbox Besucher dürfen das Banner schließen legen Sie fest, ob rechts im Banner ein kleines Kreuz zum Wegklicken erscheint. Ist die Checkbox aktiviert, merkt sich der Browser des Besuchers das Wegklicken — beim nächsten Seitenbesuch bleibt das Banner dann für ihn ausgeblendet.

Diese Merkfunktion hängt am Wortlaut der Nachricht (sowie Farbe/Icon/Link im Hintergrund). Ändern Sie nur die Zeitraum-Uhrzeit oder die Darstellung des Links, aber lassen den Nachrichtentext identisch, bleibt das Banner für Besucher, die es bereits weggeklickt hatten, weiter unsichtbar. Soll das Banner für alle wieder neu erscheinen, ändern Sie zusätzlich ein Wort im Nachrichtentext.

Ganz oben einbetten: data-mode="banner"

Anders als bei den übrigen Widgets erscheint das Hinweis-Banner meist nicht mittendrin in Ihrer Seite, sondern quer über die ganze Website — ganz oben, noch über Logo und Menü. Damit das funktioniert, ergänzen Sie im Einbett-Code die Angabe data-mode="banner":

<script src="https://tools.rapidspark.de/embed.js" data-widget="IHR-SCHLÜSSEL" data-mode="banner" async></script>

Den passenden Code mit Ihrem eigenen Schlüssel finden Sie über die Schaltfläche Einbettungscode anzeigen auf der Banner-Seite (oder in der Widget-Übersicht Ihres Kontos über Einbetten). Ergänzen Sie data-mode="banner" danach von Hand im kopierten Code, so wie oben gezeigt.

Ohne data-mode="banner" erscheint das Banner genau dort, wo der Code in Ihrer Seite steht — fügen Sie ihn zum Beispiel im Fußbereich ein, taucht das Banner ganz unten auf, wo es kaum jemand sieht. Am besten platzieren Sie den Code deshalb an einer Stelle, die auf allen Seiten geladen wird, etwa im Kopf- oder Fußbereich Ihres Baukastens. Die ausführliche Schritt-für-Schritt-Anleitung dazu — inklusive WordPress, Wix, Jimdo, IONOS MyWebsite, Squarespace und Webflow — finden Sie unter Widget einbetten, Abschnitt „Banner-Modus“.

Ohne Ruckeln laden und beim Scrollen sichtbar bleiben (Sticky)

Zwei zusätzliche Angaben im selben Code-Schnipsel verbessern das Verhalten des Banners zusätzlich — beide finden Sie mit einem fertigen, auf Ihr Banner zugeschnittenen Beispiel direkt unter dem Bearbeitungsformular auf der Banner-Seite:

Zusatz	Wirkung
`data-height="NN"`	Reserviert beim Einfügen vorab ungefähr die richtige Höhe des Banners (in Pixel), damit Ihre Website beim Laden nicht sichtbar nach unten springt. Die tatsächliche Höhe korrigiert sich danach automatisch von selbst.
`data-sticky="1"`	Hält das Banner beim Scrollen ganz oben fest, statt mit der Seite mitzuwandern — wirkt nur zusammen mit `data-mode="banner"`.

<script src="https://tools.rapidspark.de/embed.js" data-widget="IHR-SCHLÜSSEL" data-mode="banner" data-height="52" data-sticky="1" async></script>

Beide Zusätze lassen sich frei kombinieren oder auch weglassen. Eine feste Position am unteren Bildschirmrand bietet das Hinweis-Banner bewusst nicht — es erscheint stets ganz oben, wo es alle Besucher sofort sehen.

Wann ist das Banner sichtbar?

Es gibt zwei unterschiedliche Gründe, warum ein Banner gerade nicht zu sehen ist — beide zeigt die Statusanzeige oben auf der Banner-Seite mit einer passenden Begründung an:

Die Widget-Instanz ist deaktiviert. Das ist der komplette Aus-Schalter: Gehen Sie zurück in die Widget-Übersicht und klicken Sie in der Zeile des Banners auf Aktivieren. Solange dort Inaktiv steht, wird das Banner gar nicht ausgeliefert — auch nicht mit passendem Zeitraum.
Gerade ist kein Zeitraum aktiv (oder die Nachricht ist leer). Die Instanz selbst ist dabei ganz normal aktiv, nur die Bedingungen für die Anzeige treffen momentan nicht zu — zum Beispiel weil Anzeigen ab (samt Uhrzeit) noch in der Zukunft liegt oder Anzeigen bis bereits verstrichen ist.

In der Live-Vorschau sehen Sie den Unterschied so: Ist gerade kein Zeitraum aktiv oder die Nachricht leer, bleibt die Vorschau schlicht leer — das ist normal und kein Fehler. Ist dagegen die ganze Widget-Instanz deaktiviert, zeigt die Vorschau stattdessen eine Fehlermeldung „Widget nicht gefunden“ an. Auch das ist kein technisches Problem, sondern nur ein Hinweis darauf, dass Sie das Widget zunächst über Aktivieren wieder freischalten müssen.

Tipp: Möchten Sie das Banner schnell und ohne einen bestimmten Termin abschalten, reicht es, das Feld Nachricht zu leeren und zu speichern — dann bleibt die Widget-Instanz aktiv (praktisch fürs nächste Mal), zeigt aber nichts mehr an.

Häufige Fragen

Muss ich unbedingt data-mode="banner" verwenden?

Nein, technisch nicht. Lassen Sie die Angabe weg, erscheint das Banner wie jedes andere Widget genau an der Stelle im Text, an der der Code steht. Für einen Hinweis, den wirklich alle sofort sehen sollen, ist die Platzierung ganz oben über data-mode="banner" aber fast immer die bessere Wahl.

Wie unterscheiden sich „Design der Website übernehmen“ und „Vordefinierter Stil“?

„Design der Website übernehmen“ lässt das Banner wie einen Teil Ihrer Website aussehen — es folgt Farben, Ecken und Rahmen aus dem Design-Editor Ihrer Instanz und ist die empfohlene Wahl. „Vordefinierter Stil“ ist bewusst unabhängig davon: Info, Warnung und Urlaub haben feste, geprüft kontrastsichere Farben, die immer gleich aussehen — praktisch, wenn eine Meldung auffallen soll, unabhängig vom sonstigen Design.

Ich habe gespeichert, aber meine neue Nachricht ist wieder der alte Text — was ist passiert?

Vermutlich ist beim Speichern ein anderes Feld ungültig gewesen, meistens die Link-URL oder eine Uhrzeit-Kombination, bei der „Anzeigen bis“ vor „Anzeigen ab“ liegt (siehe Abschnitte oben). In diesem Fall wird gar nichts übernommen, und die Seite zeigt wieder die zuletzt gespeicherten Werte. Prüfen Sie die Fehlermeldung oben auf der Seite, korrigieren Sie das betroffene Feld und tragen Sie Ihre übrigen Änderungen — auch die Nachricht — erneut ein.

Ein Besucher hat das Banner weggeklickt — sieht er es nie wieder?

Nur so lange, wie sich Nachrichtentext, Farbwahl, Icon oder Link nicht sinngemäß ändern. Ändern Sie den Wortlaut der Nachricht (und sei es nur geringfügig), erscheint das Banner für alle Besucher wieder neu, auch für die, die es zuvor weggeklickt hatten.

Werden für die Schließen-Funktion oder den Countdown Cookies gesetzt?

Nein. Die Schließen-Funktion merkt sich das Wegklicken ausschließlich lokal im Browser des Besuchers (localStorage), nicht über ein Cookie und nicht auf unseren Servern. Der Countdown („noch X Tage“) wird beim Laden der Seite serverseitig aus dem Enddatum berechnet und verwendet dafür keinerlei Besucherdaten. Es werden keine Daten über den Besucher an RapidTools übertragen.

Warum sieht ein Besucher meine Änderung nicht sofort?

In den allermeisten Fällen erscheint eine Änderung innerhalb weniger Sekunden. Hat ein Besucher Ihre Seite aber schon vorher im Browser zwischengespeichert (Cache), kann es helfen, die Seite einmal mit Strg+F5 (am Mac Cmd+Shift+R) neu zu laden.

Kann ich mehrere Banner gleichzeitig verwenden, zum Beispiel für verschiedene Seiten?

Ja. Legen Sie in der Widget-Übersicht einfach ein weiteres Hinweis-Banner-Widget mit eigenem Namen an — jedes hat einen eigenen Schlüssel, eigene Nachricht und einen eigenen Zeitraum und wird über einen eigenen Einbett-Code eingebunden.

Alle Anleitungen · Noch Fragen? Schreiben Sie uns: tools@rapidspark.de