W tym artykule temat prosty. Zwyczajnie podsumowujemy w jednym miejscu możliwości tworzenia telephone links, lub jak kto woli klikalnych numerów telefonu. Współcześnie pewna część aplikacji mobilnych jest realizowana nie jako native, ale jako web apps, a tam często zachodzi potrzeba stworzenia linku do rozmowy telefonicznej (zadzwoń do użytkownika), lub wysłania SMS.

Klikalny numer telefonu w HTML5

Również na „zwykłych” stornach, umieszczając dane kontaktowe, w tym numery telefonów, mile widziana jest (z punktu widzenia użytkowników jak i UX) możliwość kliknięcia w numer telefonu, aby go bezpośrednio wywołać. Rozmowa telefoniczna, SMS, a może Skype? HTML5 daje nam wygodny sposób tworzenia linków do rozmowy telefonicznej, Skype, e-mail, itd.

Jak to zrobić?

Nic prostszego. Wystarczy skorzystać z atrybutu 'href' linku, dodając wyrażenie tel:, a następnie poprawny numer telefonu. Przykłady poniżej.

Podstawowy klikalny numer telefonu:

<a href="tel://+1234567890">Call Me</a>

lub:

<a href="tel:123-456-7890">123-456-7890</a>

Skype (numer lub nazwa użytkownika):

<a href="skype:+1234567890?call">Call Me</a>

Bardziej uniwersalny (callto):

<a href="callto://+1234567890">Call Me</a>

Klikalny obrazek (np. ikona telefonu) to również prosta sprawa:

<a href="skype:nazwa_uzytkownika?call"><img src="/images/call.png"></a>

Czyli parametr href może obsłużyć następujące opcje:

tel: (telefon)

callto: (Skype)

sms: (wiadomość tekstowa sms)

fax: – send a fax

Zasoby

https://davidwalsh.name/phone-link-protocol

http://www.wpbeginner.com/wp-tutorials/how-to-add-clickable-phone-numbers-for-smartphones-in-wordpress

https://www.elegantthemes.com/blog/tips-tricks/telephone-links-how-to-add-call-able-links-ctas-to-your-website

https://developers.google.com/web/fundamentals/native-hardware/click-to-call

Książki

Ruby on Rails

Jeżeli programujesz w RoR, być może przyda Ci się prosty helper do tworzenia klikalnych linków. Przykład poniżej. Prosta sprawa.

# Renders telephone number as click-able link.
# Types:
# tel:, callto:, sms:, fax:
#
# Samples:
# <a href="tel:123-456-7890">123-456-7890</a>
# <a href="tel://+1234567890">Call</a>
# <a href="skype:+1234567890?call">Call</a>
# <a href="callto://+1234567890">Call</a>
# <a href="skype:username?call">Call</a>
def clickable_phone_number(phone_number)
  # ret = link_to phone_number, "skype:#{phone_number}"
  ret = link_to phone_number, "tel:#{phone_number}"
  ret
end

Więcej przykładów Rails:

https://stackoverflow.com/questions/38821059/what-is-the-rails-way-equivalent-of-mailto-and-tel

http://tammersaleh.com/posts/easy-iphone-telephone-links-in-rails

https://github.com/swordray/tel_to_helper

Książki

Podsumowanie

Tym samym mamy w jednym miejscu dość kompletny spis opcji, jakie mamy chcąc tworzyć klikalne numery telefonów, otwierać programy telefonii lub sms, Skype, czy też po prostu e-mail.

Happy coding!

Podaj dalej:

Facebook

0

Twitter

Linkedin

Tumblr

0

Digg

email

Pinterest

0