모바일 브라우저 용 클릭 투 콜 링크를 만드는 방법(How to create click-to-call links for mobile browsers, 핸드폰으로 전화하기, 문자보내기 등)

2018년 6월 7일

이미지에 전화걸기, 문자보내기 등 설정하기

아래에서는 워드프레스에서 이미지에 전화걸기, 문자보내기등을 설정하는 방법에 관해 기술하고자합니다.

알림판 > 외모 > 위젯 > 이미지를 차례로 click하시고 이미지 위젯을 설치하고자하는 위치로 드래그하여 배치합니다.

(사이트에서) 휴대폰으로 전화하기

링크에 http://으로 되어 있는 부분을 지우고 tel:02-***-***형식으로 자신/자사가 연락받고자하는 전화번호를 입력해주시면 끝. 쉽습니다.

(사이트에서) 문자보내기

tel html code 는 가능한데 sms code는 입력이 안됩니다. 대신 (사이트에서) 휴대폰으로 전화하기처럼 tel 을 넣어주시면 됩니다. (sms는 문자발송비용이 발생하는데, sms 호스팅이 안되어서 그런 것 같습니다. 아래의 카페24의 sms 호스팅은 pc에서도 가능한 것 같습니다. )

‘핸드폰으로 전화하기’ 처럼 링크에 tel:010-****-****으로 넣어주면 스마트폰에서 통화, 메시지 보내기, 연락처 정보보기, 복사 등이 떠서 문자를 보낼 수 있습니다.

워드프레스 SMS 문자 보내기 플러그인 – 카페24(cafe24) 연동

1. 카페24에서 SMS호스팅을 구매해주세요.

예제

** 예제 **

** 아래의 서비스는 휴대폰에서만 가능합니다 **

전화로 상담하기

(Click하시면 전화로 연결됩니다.)

상담 문자 보내기

(Click하시면 문자를 보내실 수 있습니다.)

e-mail 로 문의하기

(Click 하시면 e-mail을 보내실 수 있습니다.)

** html 소스 코드 **

상기 예제의 html 소스 코드 입니다. 자신의 번호에 맞게 변경하여 사용하세요.

** 아래의 서비스는 휴대폰에서만 가능합니다 **
<a href=”tel:010-3266-7931″>
<img width=”150″ src=”/design/upload_file/__HTMLEDITOR__/cook_kimsangheu/0c8155065d7960b10ce4438551dee0ef_94855_1.jpg”></a><a href=”tel:010-3266-7931″>
 </a>
<a href=”tel:010-3266-7931″>전화로 상담하기</a>
<a style=”line-height: 1.5;” href=”tel:010-3266-7931″>(Click하시면 전화로 연결됩니다.)</a>   
<a style=”line-height: 1.5;” href=”sms:010-3266-7931″><img width=”150″ src=”http://www.i-help.kr/design/upload_file/__HTMLEDITOR__/cook_kimsangheu/ad3b5672cc9968ae25dd67cb9c446191_77183_1.jpg”></a>
 
<a style=”line-height: 1.5;” href=”sms:010-3266-7931″>상담 문자 보내기</a><a style=”line-height: 1.5;” href=”tel:010-3266-7931″>(Click하시면 문자를 보내실 수 있습니다.)</a>  
<a href=”mailto:[email protected]”> <img width=”150″ src=”http://www.i-help.kr/design/upload_file/__HTMLEDITOR__/cook_kimsangheu/1de62ddf1578f575ab25950a0fb6847f_67211_1.jpg”></a>
 
<a href=”mailto:[email protected]”>e-mail 로 문의하기</a> 
<a href=”mailto:[email protected]”>(Click 하시면 e-mail을 보내실 수 있습니다.) </a>

추가적인 상세 기술

추가적인 상세 기술은 아래의 게시글을 참조하세요.

출처 : 모바일 브라우저 용 클릭 투 콜 링크를 만드는 방법(How to create click-to-call links for mobile browsers)

기억하십시오 : 대부분의 휴대 기기는 휴대 전화입니다. 그렇다면 링크 – 투 – 콜 액션을 만들지 않겠습니까? 비즈니스 가이드를 만들거나 고유 한 전화 번호부를 작성하는 경우 대부분의 사람들은 장치의 양식을 작성하는 대신 사람에게 전화하는 것을 선호합니다.

이 기사에서는 새로운 URI 체계, 일부 메타 태그 및 웹 사이트에서 Skype 또는 Facetime 응용 프로그램을 호출하는 방법을 분석합니다.

이 내용은 O’Reilly 발행 의 저서 “Programming the Mobile Web” 에서 부분적으로 추출되었습니다 .

전화: 계획

첫 번째 사실상의 표준(일본 i-Mode 표준에서 복사)은 tel: 체계를 사용하는 것입니다. 이것은 RFC 5341 에서 표준으로 제안되었지만 , 거기에 제안된 대부분의 매개변수는 어떤 장치에서도 작동하지 않으므로 조심하십시오.

오늘날, Safari on iOS, Android Browser(위 이미지), webOS Browser(위 이미지), Symbian 브라우저, Internet Explorer, Opera Mini 및 저사양 기기의 브라우저 등 거의 모든 모바일 기기에서 tel: URI 스키마에 대한 지원을 찾아볼 수 있습니다.워드프레스외모위젯

매우 기본적이고 간단한 구문은 다음과 같습니다.

<a href="tel:+1800229933">Call us free!</a>

사용자가 통화 링크를 활성화하면 전체 번호를 표시하는 전화를 걸 것인지 묻는 확인 경고 메시지를 받게됩니다. 이는 사용자가 속임수를 사용하여 다른 국가 또는 프리미엄 번호로 전화하는 사기를 방지하기위한 것입니다.

국제 전화 번호는 더하기 기호 (+), 국가 코드, 지역 번호 및 지역 번호로 삽입하는 것이 좋습니다. 우리는 방문자가 어디에 있는지 알지 못합니다. 그들이 같은 나라에 있거나 심지어 같은 지역에 있다면 국제적인 형식이 여전히 유효합니다.

사용자가 클릭하면 어떻게됩니까?

iPhone, Android, Nokia 및 BlackBerry와 같은 많은 브라우저가 통화 동작에 대한 확인 알림을 제공하지만 Sony Ericsson의 NetFront 브라우저는 사용자에게 다른 조치를 제안하는 메뉴를 제공합니다.

일부 비 휴대 전화 휴대 기기 (예 : iPod Touch, iPad)는 음성 통화를 허용하지 않습니다. 대신 전화 번호부에 전화 번호를 추가하라는 메시지를 표시합니다 (아래 이미지 참조).

DMTF 톤 전송

일부 장치는 대상이 호출에 응답 한 후에 DMTF 톤을 전송할 수도 있습니다. 이 기능은 톤 제어 서비스, 헬프 데스크 시스템 또는 음성 메일에 액세스 할 때 유용합니다. “이 전화 번호로 전화를 걸면 전화가 올 때 2를 누르고 2 초 후에 913 #”을 누를 수 있습니다. 숫자 뒤에 postd 매개 변수를 사용하면 이렇게 됩니다 : 구문은 ; postd = 입니다. URL 인코딩 된 % 23 값을 사용하여 숫자, *, #를 사용할 수 있으며 1 초간 일시 중지하려면 p 키 를 누르고 일시 중지 대기 모드로 이동하려면 w 키 를 사용할 수 있습니다.

이 기능은 모든 모바일 장치에서 작동하지 않지만이를 이해하지 못하는 장치에서는 기본 전화 번호를 적어도 호출해야합니다. 이 기능의 호환성 목록은 복잡하므로 의존하지 않는 것이 좋습니다.

전화 번호 자동 감지

BlackBerry 브라우저와 iOS 용 Safari (iPhone / iPod / iPad)는 전화 번호와 이메일 주소를 자동으로 감지하여 링크로 변환합니다. 이 기능을 사용하지 않으려면 일부 메타 태그를 사용해야합니다.

Safari의 경우

<meta name="format-detection" content="telephone=no">

BlackBerry 용

<meta http-equiv="x-rim-auto-match" content="none">

기본 응용 프로그램 열기

주로 iOS에서 링크로 열 수있는 일부 기본 애플리케이션이 있습니다. 한 샘플은 iPhone 4 및 iPod Touch 의 Facetime 비디오 킷 애플리케이션입니다. iOS 4.1에서 Facetime : URI를 사용하여 Facetime 애플리케이션을 열고 누군가를 호출 할 수 있습니다. 예를 들면 다음과 같습니다.

<a href="facetime://5555555555">Call us free using Facetime!</a>

iOS 용 Skype 는 자체 URI 스키마가있는 또 다른 응용 프로그램입니다. Skype 사용자 이름이 필요합니다. 선택적으로? call 매개 변수를 추가하여 즉시 호출을 시작할 수 있습니다. 이 정보가 없으면 대신 사용자의 프로필이 표시됩니다.

<a href="skype:skype_user?call">Call us using Skype!</a>

사용자가 기본 응용 프로그램을 설치 한 경우 즉석에서 감지 할 수있는 방법이 없음을 기억하십시오. 내 책 에서이 문제를 해결하기위한 약간의 해킹을 찾을 수 있습니다 .

지금까지 게시 된 iOS 용 Google 보이스에는 URI 스키마가 없습니다.

WTAI : 계획

아래의 표는 tel :와 마찬가지로 잘 지원되지 않지만 wp public 라이브러리와 mc (make call) 함수를 통해 WTAI 표준을 사용하는 호출의 다른 방법을 보여줍니다. 제 책에서 언급했듯이, WTAI는 WAP 1.0 시대의 오래된 표준이며 WML에서 사용할 수 있습니다. . 이 URI 스키마는 기기의 공개 라이브러리에 연결하기 위해 작성되었으며 iOS 또는 webOS 브라우저의 Safari에서는 작동하지 않습니다.
<a href="wtai://wp/mc;+1800229933">Call us free!</a>

WTAI는 통화가 진행되는 동안 사용할 수있는 링크도 허용하지만 사용자가 핸즈프리 모드 또는 헤드셋을 사용하는 경우에만 유용합니다. 이 링크에는 wp 라이브러리의 sd (DTMF 톤 전송) 기능을 사용하여 지정된 키패드에서 사용자가 누른 것처럼 톤이 대상에 전송 될 수 있습니다.

라디오 전화 걸기

iDEN 네트워크 (Nextel과 같은)는 무선 패킷을 사용하여 네트워크 내부에서 내부 통화를합니다. 이러한 네트워크의 고객 (예 : 인트라넷)과 함께 작업하는 경우 사용자가 직접 연결 URL 스키마 ([inlinecode] dc : [inlinecode])를 사용하여 팀의 다른 구성원 (또는 외부 호출) / inlinecode]). 또한 BlackBerry iDEN 장치와 호환됩니다.

<a href="dc:5040*0077">Ping John</a>

화상 통화 호출

일부 모델에서는 음성 만 또는 화상 통화 (3G 시스템에서 사용 가능)를 배치 할지를 선택할 수 있도록 tel : 링크를 클릭 할 때 하위 메뉴가있는 사용자를 표시합니다. 일부 일본 전화에서는 프로토콜 tel-av :를 사용하여 링크에서 화상 통화를 시작하도록 지정할 수 있습니다 .

참고자료 : 1. 모바일용 a href속성 (전화걸기, 문자메시지 등)

2. 워드프레스 SMS 문자 보내기 플러그인 – 카페24(cafe24) 연동

3. How to create click-to-call links for mobile browsers

상희 김

검색엔진최적화, 인바운드마케팅, 유튜브최적화 전문