timum Hilfetimum Hilfe durchsuchen
Termin-Button für Webseiten
Fixed Button Code Demo
Du finden die Codebasis (css, html, javascript) für einen Fixed Button zur Terminbuchung unter folgendem Link, inkl. integrierter Demo:
In dieser Oberfläche kannst du völlig frei alle gewünschten Änderungen vornehmen und ausprobieren. Klicke für die Ausführung der Änderungen oben links auf “Run”.
Diese Änderungen werden allerdings nicht gespeichert, sondern gelten nur für die aktuelle Sitzung.
Du kannst als Klick-Ziel des Buttons (href) eine beliebige Seite innerhalb deiner Webseite eintragen, in die Terminbuchung eingebunden ist. Auch ein Sprung zur eingebundenen Terminbuchung auf der selben Seite ist möglich – durch Verwendung eines anchor-tags (Sprungmarke) am entsprechenden Ziel-Element.
Weiterhin kannst du die Terminbuchung als Modal-Layer vor die aktuell geöffneten Seite zeigen, so dass dein Kunde während der Terminbuchung auf der Seite innerhalb deines Contents bleibt, auf der er bisher war.
Ausgangs-Design – Fixed Button
Code-Vorlage für Fixed Buttons
Diese Zeilen müssen in die html-Seite, in der der Button erscheinen soll, direkt unter den body-tag:
<div class="fixed-button">
<a href=“https://www.meine-domain.de/Beratungsterminseite">Beratungstermin</a>
</div>
.fixed-button {
display: inline-block;
position: fixed;
bottom: 200px;
right: 0;
background: #c10637;
-webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
overflow: hidden;
z-index: 999;
}
.fixed-button a {
display: block;
padding: 11px 15px 10px 15px;
color: #fff;
font-family: Arial, sans-serif;
font-size: 17px;
text-decoration: none;
/* font-weight: bold; */
}
Und für responsive Design, in welchem der Button auf dem Smartphone nicht erscheinen soll, kann man im css die obigen Code-Snippets durch folgende Umfänge einfassen.
Der Parameter @media definiert, ab welcher Screen Größe der Button erscheinen soll. Dass muss evtl. an das CMS angepasst werden.
.fixed-button {
display: none;
}
@media (min-width: 991px) {
.fixed-button {
...
hier den gesamten css Code von oben einfügen
...
}
}
