Anklickbare Telefonnummern – Telefonate, FaceTime- oder Skype-Anrufe direkt über die Website ermöglichen
Text-Links können mit Meta-Informationen für mobile Endgeräte angereichert werden. Somit lassen sich z.B. Telefonnummern verlinken oder Apps starten.
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.
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>
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
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
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
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
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
wie kann ich das jetzt noch schön aussehen lassen (größere schrift andere farbe und nicht unterstrichen…)?
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 */
}
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 :)
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?
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
Super. Gesucht und gefunden. Hat wunderbar funktioniert und mich kann jetzt jeder per Klick anrufen :) Danke vielmals für das Tutorial! ;)
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.
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.
[…] blog.kulturbanause.de: Telefonate, FaceTime- oder Skype-Anrufe direkt über die Website […]
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.
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
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.
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.
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).
Das ist leider ein kleines Problem. Es gibt jedoch Addons um den Browser mit der Telefonanlage zu verbinden.