사용자가 귀하의 전화번호를 클릭하여 전화를 걸 수 있도록 하여 전화번호를 다룰 때 귀하의 웹사이트에 더욱 쉽게 접근할 수 있도록 하십시오.

TL;DR

전화번호를 닻줄로 감싼다<a></a>

href 스키마

가 있는 tel: 속성의 전화번호 접두사

전화번호가 international dialling format을 사용하는지 확인하십시오.

참고: 구현하는 데 몇 초가 걸리므로 실행하지 않을 핑계가 없습니다!

문제

문제를 논의하기 위해 실제 사람과 대화하고 전화 번호를 얻기 위해 웹 사이트의 "문의하기"페이지를 방문하면 이제 웹 사이트에서 전화기로 번호를 복사한 다음 다이얼 버튼을 눌러야 합니다.

Arrrrgggh, 이렇게 어렵지 않아야 합니다!

알려지지 않은 웹사이트는 다음 HTML 마크업에 전화번호가 포함되어 있습니다.

<span>+44 (0)20 7946 0123</span>

참고: 위의 번호는 가상이므로 연결에 실패합니다. 가상의 숫자는 영화, TV 프로그램 등에서 사용됩니다. fictitious numbers on Wikipedia에 대해 자세히 알아볼 수 있습니다.

솔루션(전화: Schema)

tel: 스키마는 전화 번호에 대한 URI 스키마입니다. 브라우저는 이러한 값을 구문 분석할 수 있으며 전화 번호로 취급되어야 함을 이해합니다.

HTML에는 전화 번호를 앵커 링크로 래핑하고 tel: 스키마를 사용하여 Click to Call을 기본적으로 지원합니다. 예를 들어

<a href="tel:+44-207-946-0123" title="Click to Call">+44 (0)20 7946 0123</a>

참고: 선량한 시민이 되어 국제 전화 걸기 형식을 사용하여 발신자의 위치에 관계없이 항상 통화가 연결되도록 하십시오.

이 5초 수정을 구현하지 않을 변명의 여지가 없습니다. 우리는 사용자에게 책임이 있습니다.✅

무슨 일이야

모바일 장치 또는 데스크탑으로 웹 사이트를 방문하는지 여부에 따라 링크의 동작이 변경됩니다.

모바일 장치

이제 전화번호를 누르면 전화번호가 이미 삽입된 장치의 기본 다이얼러 앱이 열리므로 사용자는 다이얼 버튼만 누르면 됩니다.


Android 전화에서 클릭하여 전화 걸기

데스크탑

이것은 웹사이트를 탐색하는 데 사용되는 브라우저에 따라 다르지만 대부분의 최신 브라우저는 사용자에게 전화를 걸거나 애플리케이션을 선택하라는 메시지를 표시합니다.


Google 크롬 전화 걸기 프롬프트

사용해 보세요

다음은 웹사이트를 방문할 때 전화번호가 표시되는 방법의 예입니다. 다시 말하지만 이것은 가상 번호이므로 통화가 연결되지 않지만 UX를 볼 수 있습니다.

+44 (0)20 7946 0123

학점

표지 이미지: Unsplash의 James Sutton 사진