Du möchtest, dass deine Website-Besucher dich mit nur einem Klick anrufen direkt können? Ein klickbarer Telefon-Link macht genau das auf mobilen Endgeräten möglich. Wie einfach du dies in deine Website einbauen kannst, erkläre ich dir gleich Schritt für Schritt in meiner Anleitung.
Stell dir vor, ein potenzieller Kunde landet auf deiner Website und möchte dich sofort anrufen. Doch wenn deine Nummer einfach nur als Text eingegeben wurde, muss er sie zunächst umständlich abtippen und kann dich erst dann kontaktieren.
Viel besser und auch benutzerfreundlicher ist es, wenn sich beim Klicken auf die Nummer oder den Kontakt-Button direkt eine Verbindung aufbaut.
Was genau ist ein Telefon Link?
Ein Telefon-Link ist eine spezielle Art von Hyperlink, über den Nutzer mit einem einzigen Klick eine Telefonnummer direkt anrufen können. Dieser Verweis wird im HTML-Code deiner Website als „tel:“-Tag eingefügt, gefolgt von der gewünschten Telefonnummer.
Wenn der Benutzer auf diesen HTML-Tel-Link klickt, öffnet sich automatisch die Telefon-App auf mobilen Geräten. Das funktioniert sowohl mit dem iPhone als auch mit Android Handys und Tablet (z.B. Facetime-App) problemlos.
Und auf Desktop- Geräten können VoIP-Programme wie z.B. Skype auf diese Art und Weise im Browser geöffnet werden.
Damit die verlinkte Nummer auch wirklich funktioniert, wird ein bestimmtes URI Schema genutzt. Ähnlich wie bei einem mailto-Link für E-Mail Adressen. Dabei muss folgender Aufbau beim Einfügen ins HTML beachtet werden:
<a href="tel:+49123456789">Kontaktiere mich</a>Der Aufbau des Telefon-Hyperlinks sieht so aus:
- tel:
- Plus-Zeichen
- Internationale Vorwahl
- Ortsvorwahl ohne führende Null
- Telefonnummer
Eine ähnliche Syntax wird auch für Skype genutzt:
<a href="skype:benutzername?call">Über Skype Verbinden</a>Klickbare Telefonnummer auf Website einfügen
Wenn du deine Telefonnummer einfach nur so als Ziffern in deine Webseite einträgst, kann sie leider nur abgelesen werden. D.h. der Besucher muss die Nummer abtippen, statt direkt mir dir in Kontakt zu kommen. Aber das kann man natürlich für mobile Endgeräte optimieren, in dem man daraus einen Telefon Link macht.
Bei einer HTML-Website sieht das dann im Code so aus:
<a href="tel:+4912345">Text anklicken</a>Damit die Telefonnummer problemlos direkt angewählt werden kann, sollte die Formatierung dem vorgegebenen URI Schema entsprechen.
Telefon-Link in WordPress einfügen
Wenn du einen klickbaren Tel-Link auf einer WordPress Website einfügen möchtest, hast du dafür mehrere Möglichkeiten. Dabei musst du nicht einmal im HTML Code arbeiten, sondern kannst dafür die WP-Boardmittel verwenden.
WordPress Editor
So kannst du im Gutenberg Editor die Nummer ganz einfach wie einen normalen Hyperlink hinterlegen.
Markiere einfach den zu verlinkenden Text und klicke auf das Link-Symbol. Nun kannst du hier die Telefonnummer eintragen. Natürlich musst du auch hier die richtige Formatierung beachten.
Ganz genauso funktioniert das auch mit den Blöcken in Widgets. Und auch Buttons kannst du so in Click to Call Buttons umwandeln: Button-Block auswählen und dann einfach über das Link-Symbol die Tel-Nummer oder den gewünschten Text verlinken, fertig.
Diese Vorgehensweise funktioniert natürlich auch mit Page Buildern wie z.B. Elementor.
Klickbare Telefonnummern im Menü einbinden
Potenzielle Kunden sollen dich direkt schon beim Aufrufen deiner Website per Smartphone kontaktieren können? Dann platzierst du am besten einen Tel-Link in der Hauptnavigation.
Dort ist er gut sichtbar und auch für Smartphones direkt anklickbar.
Dazu gehst du im Backend auf > Design > Menüs und wählst das entsprechende Menü aus. Jetzt kannst du für deinen Click-to-Call-Link einen neuen WordPress Menüpunkt erstellen. Wähle dazu im linken Bereich „Individuelle Links“ aus und anschließend „zum Menü hinzufügen“.
Im Feld URL trägst du nun deinen Tel-Link ein und im Feld darunter den anzuzeigenden Text. Je nach verwendetem Theme kannst du auch noch ein Icon davor einblenden. Für dieses Beispiel habe ich das WP-Theme OceanWP genutzt.
Styling der Rufnummer
In der Regel werden Links auf Websites mit einer Unterstreichung angezeigt. Falls du das speziell für den Phone-Link nicht möchtest, kannst du das ganz einfach per CSS ändern. Und auch sonst, kannst du mit ein paar kleinen CSS-Anweisungen dein eigenes Styling bestimmen.
Code-Beispiel 1: Keine Unterstreichung, Textfarbe blau.
a[href^="tel:"]{
text-decoration:none;
color:blue;
}Code-Beispiel 2: Keine Unterstreichung, Phone-Link als Button gestylt.
a[href^="tel:"]{
text-decoration:none;
color:white;
font-weight:bold;
background:red;
border-radius:50px;
padding:20px;
}Den CSS-Code kannst du entweder im Customizer oder in der Datei style.css deines Child-Themes einbauen.
Telefon-Link per Plugin einrichten
Du möchtest deine Kontaktmöglichkeit besonders hervorheben? Dann kannst du dafür eines der vielen WP-Plugins nutzen. In diesem Bereich gibt es einige Tools, die sowohl Rufnummern oder auch Mail-Adresse als Floating Buttons oder als Footer-Bar einbinden können.
Call Now Button – The #1 Click to Call Button for WP
Das kostenlose Plugin Call Now Button platziert am unteren Bildschirmrand einen Click-to-Call Button. Darüber können Website-Besucher mit Mobilegeräten per Klick direkt deine Nummer anwählen.
Weitere Action-Buttons können beispielsweise auch für WhatsApp, SMS oder Skype genutzt werden.
WP Call Button
Auch mit dem kostenlosen Tool WP Call Button kannst du mit wenigen Klicks und ohne Programmierkenntnisse eine ansprechende Kontaktmöglichkeit auf deiner Website anbieten.
Elementor
Nutzt du Elementor Pro? Wenn ja, benötigst du keines der zuvor erwähnten Plugins. Denn Elementor bietet genau diese Funktion bereits mit den „Floating Elements“. In den Templates findest du auch schon mehrere Vorlagen, mit denen du schnell und einfach einen Click To Call Button oder eine Floating Bar auf deiner Website einbinden kannst.
Fazit:
Ein klickbarer Telefon-Link ist eine sehr gute Möglichkeit, um den Kontakt zu erleichtern und dabei gleichzeitig die Nutzererfahrung zu verbessern. Eine klare Gestaltung des Phone-Links macht ihn zudem auffälliger und einladender für die Website-Besucher.
Die mit einem * markierten Links sind Affiliate Links. Wenn Du darüber ein Produkt kaufst, erhalte ich dadurch eine kleine Provision. Für dich entstehen dabei natürlich keine zusätzlichen Kosten, aber du unterstützt damit meinen Blog!