Neu Kostenloser WhatsApp Chat Button Generator

Sergej Stroh

Offizieller Servicepartner
SPBanner
8. Oktober 2008
606
11
Radolfzell am Bodensee
Firma
Themeart GmbH
WhatsApp Chat Button für deine Website - in Sekunden erstellt

Wir haben ein kleines Tool gebaut, mit dem ihr in wenigen Sekunden einen WhatsApp Chat Button für eure Website oder euren Shop erstellen könnt.
Ihr konfiguriert den Button direkt im Tool, kopiert anschließend den generierten Code und bindet ihn einfach in eure Website ein.

⚡ Schnell eingerichtet
🎨 Individuell anpassbar
🌍 Für jede Website geeignet
💸 Komplett kostenlos

Der Button ermöglicht Besuchern, euch direkt über WhatsApp zu kontaktieren – ohne zusätzliche Plugins oder komplizierte Integration.

Das Tool ist komplett kostenlos.

Falls jemand Feedback oder Ideen für weitere Funktionen hat, gerne her damit.

👉 Jetzt WhatsApp Chat Button erstellen.
 
  • Gefällt mir
Reaktionen: hula1499, recent.digital, Harald Weingaertner und 1 anderer User

Sergej Stroh

Offizieller Servicepartner
SPBanner
8. Oktober 2008
606
11
Radolfzell am Bodensee
Firma
Themeart GmbH
Zuletzt bearbeitet:

Zappageck71

Aktives Mitglied
14. Februar 2017
35
0
Hi!
Habe mit Interesse diese neue Möglichkeit zur Integration eines WhatsApp Chats gesehen.
Ich wollte das per footer.tpl im Layout-Ordner im Child-Ordner per FTP lösen und habe mir den Code generieren lassen und mit dem Editor mit dem Zusatz {literal} {literal} so erstellt:

HTML: 
{literal}
<!-- Themeart WhatsApp-Chat-Button-Generator -->
<style>
  .wa-w{position:fixed;bottom:24px;right:24px;display:flex;align-items:center;gap:10px;flex-direction:row;z-index:9999}
  .wa-c{width:58px;height:58px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 18px #25d36680;cursor:pointer;text-decoration:none;animation:wap 2s infinite;}
  .wa-c svg{width:55%;height:55%}
  .wa-lb{background:#25d366;color:#ffffff;padding:9px 16px;border-radius:22px;font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap;text-decoration:none}
  .wa-tt{position:absolute;bottom:calc(100% + 9px);right:0;background:#fff;color:#111;padding:8px 12px;border-radius:10px 10px 3px 10px;font-size:12px;font-family:inherit;box-shadow:0 3px 14px rgba(0,0,0,.18);white-space:nowrap;pointer-events:none}
@keyframes wap{0%,100%{box-shadow:0 5px 18px #25d36680}50%{box-shadow:0 5px 26px #25d366cc,0 0 0 8px #25d36621}}
</style>
<div class="wa-w">
  <div class="wa-tt">Hallo! 👋 Wie können wir helfen?</div>
  <span class="wa-lb">Schreib uns!</span>
  <a class="wa-c" href="https://api.whatsapp.com/send?phone=*Nummer entfernt*&text=Ich%20berate%20Sie%20gerne%20direkt%20und%20pers%C3%B6nlich.%20Nutzen%20Sie%20gerne%20den%20WhatsApp%20-%20Chat%20mit%20mir%2C%20um%20sich%20%C3%BCber%20unsere%20Produkte%20oder%20Fertigungsmethoden%20zu%20informieren.%0A%0AIch%20freue%20mich%20auf%20Ihre%20Anfrage." target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" fill="#ffffff"/></svg></a>
</div>
{/literal}

Diesen Code habe ich als footer.tpl gespeichert und unter /httpdocs/templates/NOVAChild/themes/my-nova/layout eingefügt.
Cache im Shop geleert und Vorschau angesehen.
Es wird weder das Icon noch die Chatfunktion angezeigt.
Was mache ich falsch?
Danke.
 
Du musst Dich einloggen oder registrieren um hier antworten zu können.
Top Bottom