Kurzanleitung für Sie als Buchhändler
 

1. Öffnen Sie die Startseite Ihres Shops im Bearbeitungsmodus.
2. Ziehen Sie den Baustein „HTML/CSS“ aus der Bausteingruppe „Experten“ per Drag & Drop ganz nach unten auf die Startseite.
3. Kopieren Sie den unten stehenden Beispielcode vollständig in den Baustein.
4. Ersetzen Sie im Code:
   • Ihre E-Mail-Adresse (2 Stellen)
   • Ihre WhatsApp-Nummer (2 Stellen, einmal als Link, einmal als Anzeige)
5. Speichern und veröffentlichen Sie die Seite.
   Der Kontaktbutton erscheint anschließend rechts unten auf Ihrer Website.
    

Wichtig zur WhatsApp-Nummer

• Im wa.me-Link nur Ziffern, ohne Plus, Leerzeichen oder Sonderzeichen.
• Ländervorwahl voranstellen (z. B. Deutschland = 49, ohne führende 0 der Mobilnummer).

<!-- FLOATING KONTAKTBUTTON (WHATSAPP + E-MAIL) -->
<div class="k-wa">
 <input id="k-wa-toggle" class="k-wa__toggle" type="checkbox" aria-hidden="true" />

 <label for="k-wa-toggle" class="k-wa__button" aria-label="Kontakt öffnen">
   <svg class="k-wa__icon" viewBox="0 0 32 32" aria-hidden="true">
     <path d="M19.2 17.6c-.3-.1-1.7-.8-1.9-.9-.2-.1-.4-.1-.6.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.6-.8-2.9-2-3.8-3.6-.2-.3 0-.4.1-.6.1-.1.2-.3.3-.4.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2.1c-.1-.3-.3-.5-.6-.5h-.5c-.2 0-.5.2-.7.4-.7.7-1 1.7-1 2.6 0 .3 0 .6.1.8.4 1.6 1.3 3 2.5 4.2 1.5 1.6 3.3 2.7 5.4 3.3.4.1.9.2 1.3.3.5.1 1 .1 1.5.1.9 0 1.7-.2 2.5-.6.4-.2.9-.5 1.1-.9.1-.2.2-.5.1-.7-.1-.2-.5-.4-1-.6zM16 3C9.4 3 4 8.4 4 15c0 2.5.8 4.8 2.1 6.7L4 29l7.5-2c1.8 1 3.9 1.5 6.1 1.5 6.6 0 12-5.4 12-12S22.6 3 16 3z"/>
   </svg>
 </label>

 <aside class="k-wa__popup" role="dialog">
   <div class="k-wa__head">
     <h3 class="k-wa__title">Wir sind für Sie da</h3>
     <label for="k-wa-toggle" class="k-wa__close">×</label>
   </div>

   <p class="k-wa__text">Kontaktieren Sie uns gerne direkt:</p>

   <div class="k-wa__actions">
     <!-- E-MAIL: HIER IHRE ADRESSE EINTRAGEN -->
     <a class="k-wa__link k-wa__link--mail"
        href="mailto:info@ihrebuchhandlung.de">
       info@ihrebuchhandlung.de
     </a>

     <!-- WHATSAPP: HIER IHRE NUMMER EINTRAGEN -->
     <a class="k-wa__link k-wa__link--wa"
        href="https://wa.me/4917612345678">
       +49 176 12345678
     </a>
   </div>
 </aside>
</div>

<style>
 :root {
   --k-wa-gap: 20px;
   --k-wa-bump: 76px;
   --k-wa-z: 9999;
   --k-wa-green: #25d366;
   --k-wa-dark: #0b1a14;
   --k-wa-bg: #ffffff;
   --k-wa-shadow: 0 12px 32px rgba(0,0,0,.18);
   --k-wa-radius: 18px;
   --k-wa-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
 }

 .k-wa { font-family: var(--k-wa-font); }
 .k-wa__toggle { position:absolute; opacity:0; pointer-events:none; }

 .k-wa__button {
   position: fixed;
   right: var(--k-wa-gap);
   bottom: calc(var(--k-wa-gap) + 80px);
   width: 56px;
   height: 56px;
   border-radius: 999px;
   background: var(--k-wa-green);
   box-shadow: var(--k-wa-shadow);
   display: grid;
   place-items: center;
   cursor: pointer;
   z-index: var(--k-wa-z);
 }

 .k-wa__icon { width: 28px; height: 28px; fill: #fff; }

 .k-wa__popup {
   position: fixed;
   right: var(--k-wa-gap);
   bottom: calc(var(--k-wa-gap) + var(--k-wa-bump));
   width: min(92vw, 360px);
   background: var(--k-wa-bg);
   color: var(--k-wa-dark);
   border-radius: var(--k-wa-radius);
   box-shadow: var(--k-wa-shadow);
   padding: 16px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: .25s ease;
   z-index: var(--k-wa-z);
 }

 .k-wa__toggle:checked ~ .k-wa__popup {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 .k-wa__actions { display: grid; gap: 10px; }
 .k-wa__link {
   display: inline-flex;
   padding: 12px 14px;
   border-radius: 12px;
   text-decoration: none;
   font-weight: 700;
   border: 1px solid #e7eaec;
 }
 .k-wa__link--mail { background: #f6f8fa; }
 .k-wa__link--wa { background: #eefcf3; }
</style>