Anklickbare Telefonnummern – Telefonate, FaceTime- oder Skype-Anrufe direkt über die Website ermöglichen

Viele Geräte mit denen Websites besucht werden sind zum Telefonieren oder Video-Chatten geeignet. Um einem Anwender, der beispielsweise mit seinem Smartphone die Website besucht, die Kontaktaufnahme so einfach wie möglich zu machen, sollten Telefonnummern anklickbar sein. Telefonate, FaceTime- oder Skype-Anrufe lassen sich ohne großen Aufwand komfortabel einrichten.

Telefonnummern anklickbar machen

Um Telefonnummern anklickbar zu machen reicht ein ganz normaler Link. Lediglich das Link-Ziel muss eine Telefonnummer in einem gültigen Format (z. B. +4930555709666) enthalten.

<a href="tel:TELEFONNUMMER">Jetzt anrufen</a>

Der Link muss innerhalb von href mit tel: eingeleitet werden. Dieser Aufbau ist vergleichbar mit einem E-Mail-Link, hier lautet die Einleitung bekanntlich mailto:. nach tel: folgt die Telefonnummer in internationaler Schreibweise, ohne Leerzeichen und sonstige Trennungen.
Wenn nun ein Besucher auf dem Handy den Link anklickt, öffnet sich die Telefon-App. Hier können nun je nach Betriebssystem verschiedene Optionen ausgewählt werden.

Anrufdialog unter iOS – Es wird die Telefonnummer sowie der Button »Anrufen« angezeigt
Anrufdialog unter iOS

Skype-Anrufe per Klick

Auch für Telefonate via Skype kann die Funktion eingerichtet werden. Der Link-Aufbau folgt in diesem Fall dem nachfolgendem Schema. Ersetzt [BENUTZERNAME / NUMMER] mit dem jeweiligen Skype-Benutzernamen oder der Telefonnummer in internationalem Format.

<a href="skype:[ BENUTZERNAME / NUMMER]?call">Jetzt mit Skype anrufen</a>

FaceTime-Anrufe

Wenn ihr einen Facetime-Anruf ermöglichen wollt, verwendet einen Link nach folgendem Schema:

<a href="facetime:+4930555709666">Jetzt mit FaceTime anrufen</a>
Erweiterter Anrufdialog unter iOS – Es stehen verschiedene installierte Apps und Messenger nach dem Klick auf die Telefonnummer zur Verfügung.
Erweiterter Anrufdialog unter iOS

WhatsApp-Nachrichten

Es ist auch möglich WhatsApp zu nutzen. Da in diesem Zusammenhang einige Dinge beachtet werden müssen, lest bitte diesen Artikel: Website-Inhalte per WhatsApp-Nachricht empfehlen – WhatsApp URL Scheme

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 19 Kommentare

  1. Herbert
    schrieb am 19.03.2021 um 12:11 Uhr:

    Dear all,

    hat wer von euch schon Erfahrung mit anklickbaren Telefonnummern und „Ihr Smartphone“ in Win10 gemacht? Sprich wenn ich eine TelNr. im Browser anklicke, dass dann nicht skype, sondern nachdem man „Ihr Smartphane“ als Anwendung im Browserpopup ausgewählt hat direkt dann das Handy das Telefonat übernimmt?

    Freue mich auf Euer Feedback!

    Herbert

    Antworten
  2. Duschwannen-Profi
    schrieb am 05.02.2020 um 17:51 Uhr:

    Moin in die Runde, ich weiß ich bin ein wenig spät für die Diskussion, hab aber dennoch eine Frage:

    Bin auf dem Themengebiet leider ein absoluter Newbie, kann ich die Optionen (Tel., FaceTime & Skype) auch alle für die gleiche Telefonnummer einrichten, ohne dreimal die Telefonnummer untereinander stehen zu haben?

    Danke schonmal vorab

    Antworten
  3. Hochzeits DJ Köln
    schrieb am 25.01.2019 um 09:47 Uhr:

    Vielen Dank für den Artikel. Ich muss unter einem Menüpunkt eine Klickbare Telefonnummer für DJ Bookings einfügen – über den Weg (Link) geht das nicht optimal. Auch whatsapp sollte zu nutzen sein – gibt es dahingehend eine aktualisiertung oder vorschlag? Vielen Dank

    Antworten
  4. Nico
    schrieb am 16.11.2016 um 15:53 Uhr:

    Hi Zusammen,

    vielen Dank für den Artikel. Wenn ich es so einbinde, wird mir nur die „Anrufen“-Funktion vorgeschlagen. Da ich möchte, dass die User meine Nummer einspeichern und mich dann per Whatsapp anschreiben können, ist das nicht so schön. Gibt es da Ideen?

    Danke und BG
    Nico

    Antworten
  5. helga
    schrieb am 18.07.2016 um 14:00 Uhr:

    wie kann ich das jetzt noch schön aussehen lassen (größere schrift andere farbe und nicht unterstrichen…)?

    Antworten
    • Stefan Niedermann
      schrieb am 20.07.2016 um 11:28 Uhr:

      Durch die Verwendung von ganz normalen Selektoren und Eigenschaften, z. B.:

      /* Alle Anker die vom Typ „tel“ sind */
      a[type=“tel“] {
      font-size: x-large; /* Größere Schriftart */
      color: #600; /* Rote Farbe */
      text-decoration: none; /* nicht unterstrichen */
      }

      Antworten
      • Stefan Niedermann
        schrieb am 20.07.2016 um 11:31 Uhr:

        Na hoppala, da ist mir was durchgerutscht. Der Selektor muss natürlich heißen:

        a[href^=“tel:“] {

        }

        Da bei Telefon-Ankern nicht der Typ gesetzt wird sondern das href-Attribut mit tel: beginnt.

        Grüße :)

  6. Michael
    schrieb am 10.08.2014 um 18:22 Uhr:

    Wie sieht es eigentlich mit dem Datenschutz bei der Einbindung von Skype aus? Muß daß in die Datenschutzbedingungen aufgenommen werden?

    Werden da irgendwelche Daten an amerikanische Server gesendet?

    Antworten
    • Stefan Niedermann
      schrieb am 22.12.2014 um 11:04 Uhr:

      Hallo,

      nachdem ja nichts direkt von Skype eingebunden wird, sollte es zunächst einmal keine Probleme geben – es werden ja keine Dateien ohne Nachfrage an Dritt-Server geschickt.

      Interessant wird es erst, wenn der Benutzer Skype selbst installiert. Skype klinkt sich in den Browser ein und hat dann natürlich die Möglichkeit, Daten zu verändern und zu versenden. Bei der Installation von Skype muss jeder Benutzer die AGB lesen (ha…) und verstehen (haha…), sodass jeder Benutzer selbst zugestimmt hat, wenn seine Daten versendet werden.

      Ein Benutzer ohne Skype-Plug-In hat nichts zu befürchten, er sieht lediglich einen Link, der nicht geöffnet werden kann.

      So ist die Datenschutzproblematik unabhängig vom Websitebetreiber und vom Browser. Der Nutzer, der Skype verwenden möchte, ist selbst dafür verantwortlich.

      Dies ist natürlich keine Rechtsberatung, sondern lediglich eine technische Darstellung.

      Freundliche Grüße

      Antworten
  7. Clemens Pelz
    schrieb am 10.06.2014 um 19:41 Uhr:

    Super. Gesucht und gefunden. Hat wunderbar funktioniert und mich kann jetzt jeder per Klick anrufen :) Danke vielmals für das Tutorial! ;)

    Antworten
  8. Rai
    schrieb am 15.05.2014 um 15:50 Uhr:

    Ich verwende dies bereits ebenfalls, damit es nicht auf dem Desktop/Tablet angezeigt wird, hinterlege ich eine css-Klasse die auf der Desktop-Ansicht einfach mit Display:none ausgeblendet wird. Dafür extra ein Javascript zu implementieren halte ich nicht für sinnvoll.

    Antworten
    • Christoph
      schrieb am 21.12.2014 um 12:18 Uhr:

      So setze ich dies auch immer um. Ist zwar ein wenig Code, der nun in gewissen Browseransichten unnötig ist, aber meiner Meinung nach immer noch besser, als JavaScript.

      Antworten
  9. Die besten deutschsprachigen WordPress Blogs / Magazine
    schrieb am 13.05.2014 um 17:36 Uhr:

    […] blog.kulturbanause.de: Telefonate, FaceTime- oder Skype-Anrufe direkt über die Website […]

    Antworten
  10. Robert
    schrieb am 09.05.2014 um 16:52 Uhr:

    Zumindest gibt es für die verschiedenen Systeme Implementierungen, um Inhaltselemente für spezifische Browser oder Betriebssysteme zu konfigurieren. Die abgedeckten Kriterien hierfür sind ja mittlerweile recht gut ausgereift. Wenn es jedoch um die reine Typisierung Desktop vs. Mobile geht, sollte das eigentlich kein Problem sein.

    Antworten
  11. Stefan Niedermann
    schrieb am 09.05.2014 um 12:44 Uhr:

    Hallo,

    dies ist eine interessante Möglichkeit, die ich selbst einsetze. Das Problem besteht für mich darin, dass Desktop-Browser dies ebenfalls als klickbaren Link rendern, jedoch bei einem Klick darauf aufgrund des unbekannten Protokolls eine Fehlermeldung werfen.

    Hier müsste man per Javascript analyiseren, auf was für einem Gerät man sich befindet, um diese Sackgasse für Desktop- und Tablet-User zu vermeiden. Dies kann jedoch nie 100% sicher gestaltet werden und führt daher zu Nachteilen für nicht-telefon-fähige Endgeräte.

    Mit freundlichen Grüßen
    Stefan Niedermann

    Antworten
    • Jonas Hellwig
      schrieb am 09.05.2014 um 13:20 Uhr:

      Hallo Stefan,

      vielen Dank für diese sehr hilfreiche Ergänzung! Das Problem besteht wohl in erster Linie bei normalen Telefonnummern. Bei FaceTime-Links öffnet sich bei mir am Mac (natürlich nur am Mac) die FaceTime-App. Bei Skype sieht es ähnlich aus – hier wird Skype geöffnet. Natürlich ebenfalls nur wenn die Anwendung installiert ist.

      Aber bei E-Mail-Links (mailto: ) besteht das Problem ja auch. Wer keinen Client eingerichtet hat, guckt in die Röhre.

      Antworten
      • Alex Sawallich
        schrieb am 09.05.2014 um 14:22 Uhr:

        Das sehe ich genau so. Letztendlich ist es immer vom Client-Rechner abhängig, ob er entsprechende Software installiert hat. Mit entsprechender Software lässt sich auch ein „tel:“-Link vom PC aus aufrufen, man siehe Callcenter, die in der Regel auch per Headset über PC telefonieren. Solltest Du den Link auf dem Desktop jedoch nicht haben wollen, könntest Du ihn mit Media-Queries zumindest so aussehen lassen, als wenn es kein Link wäre :)

        @Jonas: Noch eine kleine Sache: Ich weiß Du versuchst deine Beiträge immer gut verständlich zu gestalten, schade finde ich es aber, dass Du nicht einmal das Wort „Protokoll“ verwendest. Denn genau wie „http://“, „ftp://“, „mailto:“, „skype:“, uvm. ist „tel:“ nur ein weiteres Protokoll.

      • Stefan Niedermann
        schrieb am 12.05.2014 um 07:05 Uhr:

        Nun, hier wären meiner Ansicht nach die Browser-Hersteller am Zug – Wenn ich ein Protokoll nicht kenne, sollte ich einen Link mit einem entsprechenden Protokoll nicht als Link rendern (oder zumindest die Fehlermeldung für einen Otto-Normal-Benutzer nicht so unverständlich gestalten).

    • Nico
      schrieb am 09.06.2014 um 11:34 Uhr:

      Das ist leider ein kleines Problem. Es gibt jedoch Addons um den Browser mit der Telefonanlage zu verbinden.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →