Search Knowledge Base by Keyword

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

PastedGraphic-1.png

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>

 

Das folgende Code Snippet muss in die Styles Sektion der Website eingetragen werden:

.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
...
}
}

Table of Contents

timum timum Knowledge Base