kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

Klickbare Telefonnummern

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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 enthalten.


<a href="tel:+4915118956490">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.

Anruf-Dialog unter iOS
Anruf-Dialog unter iOS 7

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:+4915118956490">Jetzt mit FaceTime anrufen</a>
FaceTime-Anruf-Dialog unter iOS 7
FaceTime-Anruf-Dialog unter iOS 7

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

Links & Quellen

URI Scheme
Wikipedia-Eintrag zu diesem Thema

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

16 Kommentare

  1. Stefan Niedermann

    Verfasst am 9. Mai 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

    • Jonas Hellwig

      Verfasst am 9. Mai 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.

      • Alex Sawallich

        Verfasst am 9. Mai 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

        Verfasst am 12. Mai 2014 um 7: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

      Verfasst am 9. Juni 2014 um 11:34 Uhr.

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

  2. Robert

    Verfasst am 9. Mai 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.

  3. Rai

    Verfasst am 15. Mai 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.

    • Christoph

      Verfasst am 21. Dezember 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.

  4. Clemens Pelz

    Verfasst am 10. Juni 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! ;)

  5. Michael

    Verfasst am 10. August 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?

    • Stefan Niedermann

      Verfasst am 22. Dezember 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

  6. helga

    Verfasst am 18. Juli 2016 um 14:00 Uhr.

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

    • Stefan Niedermann

      Verfasst am 20. Juli 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 */
      }

      • Stefan Niedermann

        Verfasst am 20. Juli 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 :)

  7. Nico

    Verfasst am 16. November 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.