Mobilbarát weboldalak: kattintható telefonszám és e-mail cím

2021.05.22

A mai weboldalaknak a megfelelő tartalmon kívül két dologra kell koncentrálniuk: a megfelelő felhasználói élményre (UX) és a mobilbarát megjelenésre. Mindkettőt segíti, ha azonnal kattintható telefonszám és e-mail cím található rajtuk. De, hogy is kell készíteni ilyet? Most eláruljuk. 

Ha mobiltelefonon keresztül böngészünk, nem sok bosszantóbb dolog van annál, mint amikor egy weboldal láblécében vagy kapcsolati menüpontjában nem kattinthatóak az elérhetőségek, azaz nem tudjuk közvetlen hívni a megadott telefonszámot, vagy nem nyílik meg a levelező az e-mail címre kattintva. Ezek alapvetően rontják a felhasználói élményt és nem kifejezetten mobilbarát megoldások, ráadásul csökkentik a kapcsolatfelvétel egyszerűségét, így a weboldalad hatékonyságát is.

Kattintható telefonszám és e-mail cím beágyazás

A kattintható, azonnal hívható telefonszámot és e-mail címet HTML formátumban kell beágyazni az oldalunk azon részébe, ahol szeretnénk, hogy működjön, vagyis gyakorlatilag egy linket kell készítenünk, ami egy URL (webcím) helyett egy telefonszámot vagy e-mail címet hív meg.

Nézzünk egy példát:

Ha a telefonszám: +36 30 / 218 1779, az e-mail cím pedig: vantgarddigital@gmail.com

A kattintható telefonszám HTML kódja: <a href="tel:+36302181779">+36 30 / 218 1779</a> vagy <a href="tel:+36302181779">Hívj most!</a>

Az azonnali e-mail küldsére lehetőséget adó e-mail cím HTML kódja pedig:
<a href="mailto:vantgarddigital@gmail.com">vantgarddigital@gmail.com</a>

Az eredmény:

Telefon: +36 30 / 218 1779 vagy Hívj most!

E-mail: vantgarddigital@gmail.com

A két kacsacsőr közti >+36 30 / 218 1779< vagy >vantgarddigital@gmail.com< tartalom helyére bármit írhatunk, amit meg szeretnénk jeleníteni az oldalon. Ha akarjuk, akkor a telefonszámunkat vagy e-mail címünket, vagy CTA (cselekvésre felhívó) szavakat, esetleg ikonokra vagy gombokra is rárakhatjuk azokat.

Kattintható Viber és WhatsApp hívás

Nem csak arra van lehetőségünk, hogy telefonszámunkat normál telefonhívás formájában hívják az ügyfeleink, de a Viber és a WhatsApp Messenger alkalmazásokból ingyen, gyorsan és biztonságosan is elérhetnek bennünket (hang- és videohívások, ill. üzenetküldés formájában).

A kattintható Viber HTML kódja:
<a href="viber://contact?number=%2B36302181779" target="_blank">VIBER</a>

A kattintható WhatsApp HTML kódja:
<a href="https://api.whatsapp.com/send?phone=+36302181779" target="_blank">WhatsApp</a>

Felhasználási lehetőségek

Ha Te is szeretnéd alkalmazni ezeket az azonnal kattintható megoldásokat, egyszerűen csak másold ki azt a kódot, amelyikre szükséged van, majd illeszd be oda, ahol meg szeretnéd jeleníteni kattintható elérhetőséged.

Ne feledd átírni az e-mail címet és telefonszámot a sajátodra, illetve figyelj arra, hogy ne törölj véletlenül kacsacsőröket, idézőjeleket, vagy ne tegyél plusz szókozöket, mert akkor nem fognak működni.

Reméljük, hogy a fenti ötletekkel sikerült hozzájárulnunk weboldaladat felhasználó- és mobilbarátabbá tenni, de ha bármi kérdésed lenne, ne habozz, keress meg bennünket és segítünk.