클릭 투 콜(Click-to-Call)이란?
클릭 투 콜은 웹 페이지에서 전화번호를 클릭하면 바로 통화가 연결되는 기능입니다. 이 기능은 HTML의 <a> 태그와 tel: 프로토콜을 사용하여 구현됩니다.
tel: 프로토콜의 모바일 지원 현황
현재 대부분의 모바일 기기는 tel: 프로토콜을 기본적으로 지원합니다. 지원하는 주요 브라우저는 다음과 같습니다.
- iOS의 Safari
- 안드로이드 기본 브라우저(Android Browser)
- 심비안(Symbian) 브라우저
- 오페라 미니(Opera Mini)
따라서 일반적인 경우에는 별도의 감지 로직 없이 <a href="tel:01012345678"> 형태로 링크를 작성하기만 하면 됩니다.
특정 기기에서 wtai: 프로토콜로 변환하기
다만 일부 구형 기기나 특정 제조사의 브라우저는 tel: 대신 WAP 표준인 wtai:(Wireless Telephony Application Interface) 프로토콜을 요구하는 경우가 있습니다. 예를 들어 HTC 계열 기기 중 일부 모델이 그렇습니다. 이런 경우 자바스크립트로 사용자 에이전트(userAgent)를 검사한 뒤, 링크의 프로토콜을 동적으로 교체할 수 있습니다.
if (/(HTC825)/i.test(navigator.userAgent)){
$("a[href^='tel:']").each(function(){
this.href = this.href.replace("tel:", "wtai://wp/mc;");
});
}코드 설명
navigator.userAgent값에 'HTC825'가 포함되어 있는지 정규식으로 검사합니다.- 해당 기기로 확인되면, 페이지 내의 모든
tel:로 시작하는 링크를 순회합니다. - 각 링크의
href속성에서tel:을wtai://wp/mc;로 치환하여 통화 연결이 정상적으로 동작하도록 합니다.
정리
요즘 모바일 환경에서는 tel: 프로토콜만으로도 클릭 투 콜을 충분히 구현할 수 있습니다. 다만 레거시 기기까지 지원해야 한다면 위 예제처럼 사용자 에이전트를 판별하여 필요에 따라 wtai: 프로토콜로 변환해 주는 방법을 활용하면 좋습니다.