Webmaster: Klickbare Telefon- und WhatsApp-Buttons in HTML

Wenn der Website-Besucher anrufen soll: Mit einem „tel:“ Link kann ein Text oder Button klickbar gemacht werden. Beim Klick öffnet sich auf dem Handy direkt die Telefon-App, auf dem Mac startet stattdessen Facetime. Das ist praktisch für Landingpages, bei denen der Besucher direkt bei Fragen anrufen können soll – oder, um einen Termin zu vereinbaren.

Eine Telefonnummer, die man mühsam abtippen muss, wirkt heute unnötig umständlich. Genau hier kommen klickbare Telefon- und WhatsApp-Links ins Spiel: Denn statt der Telefon-App kann man auch einen WhatsApp-Link einbauen und hier sogar Text vorgeben!

 
Warum klickbare Telefonnummern sinnvoll sind

Viele Website-Besucher surfen mit dem Smartphone: Lässt sich dort eine Telefonnummer direkt per Klick anrufen, erleichtert dies die Kontaktaufnahme erheblich. Der Besucher spart Zeit und man vermeidet Tippfehler – egal ob es um Beratung, Support oder einen schnellen Rückruf geht.

So funktioniert der klickbare „tel:“-Link!

Eine anklickbaren Telefonnummer benötigt kein Plugin, sondern nutzt ein alternatives HTML-Attribut zum normalen Link: Den „tel:“-Link. Er funktioniert ähnlich wie ein normaler Link („https:“), allerdings wird statt einer Webadresse eine Telefonnummer angegeben.

Statt dem normalen Link:

<a href="https://computerhilfen.de">Website</a>

Nutzt man „tel:“ für den Anruf:

<a href="tel:+49241123455567">Telefon</a>

Auf Smartphones öffnet ein Klick direkt die Telefon-App, die Nummer ist bereits korrekt eingetragen und der Besucher kann direkt auf Anrufen klicken. Auf dem Mac wird stattdessen die Facetime-App gestartet, wenn hierfür ein Telefon verknüpft ist.

tel Link in HTML: Die richtige Schreibweise

Ein häufiger Fehler ist die falsche Formatierung der Telefonnummer: Diese darf keine Leerzeichen oder Klammern enthalten, sondern beginnt mit der Ländervorwahl, gefolgt von Vorwahl ohne führende „0“. Dies ist wichtig für den klickbaren Telefon-Klick:

• Beginnt mit + und internationaler Ländervorwahl (z. B. +49 für Deutschland)
• Ohne führende Null der Orts- oder Mobilfunkvorwahl
• Leine Leerzeichen, Klammern oder Bindestriche verwenden

Der angezeigte Text kann dabei Klammern, Leerzeichen und Sonderzeichen enthalten, wichtig ist die richtige Formatierung des tel Links selbst:

<a href="tel:+4924123455567">
Rufen Sie uns an: +49 (0)241 123455567
</a>

WhatsApp Link als Alternative: Click-to-Chat

Alternativ oder zusätzlich zum Telefon-Link kann man auch per Klick zu WhatsApp verweisen: Per Button oder Text-Link öffnet sich dann auf Smartphone oder PC die WhatsApp App (falls installiert). Der Website-Besucher kann darüber bequem einen Chat starten, um erste Fragen zu stellen – auch außerhalb der Geschäftszeiten.

WhatsApp bietet dafür die Click-to-Chat-Funktion, die ähnlich Funktioniert wie der klickbare Telefonlink. Damit kann man einen Chat starten, ohne dass die Nummer im Adressbuch gespeichert ist.

Einfacher WhatsApp-Link

Der einfache WhatsApp-Link verweist auf die Webseite „wa.me“, was unter iOS und Android automatisch die WhatsApp-App öffnet. Wichtig ist auch hier die Formatierung der Telefonnummer: Diese beginnt, wie auch bei dem Tel Link, mit der Landesvorwahl, der Ortsvorwahl ohne Null und dann der Telefonnummer. Auch für WhatsApp darf der Link keine Klammern, Sonder- oder Leerzeichen enthalten.

Anders als bei dem Tel Link zum Anrufen gilt das bei einem WhatsApp Link aber auch für die Landesvorwahl: Hier fehlt jetzt das „+“ Zeichen:

<a href="https://wa.me/49170123455567">WhatsApp</a>

 
Falsch wäre dagegen:

https://wa.me/+49 (170) 123-4567

aber auch:

https://wa.me/+491701234567

Wichtig ist bei dem WhatsApp Link, dass er anders als bei dem Telefon-Link die Landesvorwahl ohne Plus-Zeichen geschrieben wird.

WhatsApp-Link mit vorgefertigter Nachricht

Eine weitere Funktion ist bei dem WhatsApp Link besonders praktisch: Die Nachricht lässt sich schon ganz (oder in Teilen zum Ergänzen!) vorgeben. Per Klick wird dann auch die Nachricht an WhatsApp übergeben, zum Senden muss man aber noch den Button drücken.

https://wa.me/491711234567?text=Mein%20Text

Wichtig: Der Text muss URL-kodiert sein: Dabei wird aus dem Leerzeichen zum Beispiel „%20“. Die Texte lassen sich aber zum Beispiel mit unserem urlencode-Generator bequem umwandeln und kopieren.