워드프레스에 클릭투콜 통화 버튼을 추가하는 방법

63%의 소비자가 모바일 기기에서 제품이나 서비스에 대한 정보를 찾는 것을 선호하기 때문에, 여러분의 사이트 역시 스마트폰 화면을 통해 보일 가능성이 높습니다. 이러한 소비자 중 상당수는 시간이 촉박하여 즉시 연락하기를 원하므로, 연락을 취하는 과정에서 단계가 하나씩 추가될 때마다 중간에 포기하고 경쟁업체를 찾을 확률이 높아집니다.

사이트에 일반 텍스트로 적힌 전화번호는 불필요한 추가 단계에 해당합니다. 방문자가 번호를 메모하고 사이트에서 나가 전화 앱을 연 다음, 직접 번호를 입력해야 하기 때문입니다. 클릭투콜(click-to-call) 버튼을 사용하면 탭 한 번으로 전화를 걸 수 있어 이 모든 과정이 대체됩니다. 

워드프레스에서는 블록 편집기를 사용해 버튼을 전화번호 링크로 만들어 전화를 걸 수 있는 버튼을 생성할 수 있습니다. 하지만 방문자가 스크롤할 때 화면에 계속 남아 있고 사이트의 모든 페이지에 나타나는 플로팅 전화 상담 버튼 기능은 기본적으로 제공하지 않습니다.

사이트에 통화 버튼을 배치하는 방법에는 두 가지가 있습니다. 기본 구텐베르크 버튼을 만들어 링크를 “tel:” URL로 설정하는 방법(작동은 하지만 배치한 위치에만 고정됨)과, 페이지 위에 떠서 방문자가 스크롤할 때 따라다니는 무료 호스팅 위젯을 사용하는 방법이 있습니다.

워드프레스에 클릭투콜 버튼을 추가하려는 지역 비즈니스 소유자, 프리랜서 또는 워드프레스 양식 전문가라면, 이 가이드에서 두 가지 옵션을 모두 확인할 수 있습니다. 두 가지 방법 모두 코드가 필요하지 않기 때문에, 이는 워드프레스 사용법을 배우기 시작하는 현명한 방법이기도 합니다.

옵션 1: 기본 구텐베르크 버튼 수동으로 만들기

플러그인이나 외부 도구 없이 구텐베르크 버튼 블록과 “tel:” 링크를 사용하여 워드프레스에서 클릭 가능한 전화번호 링크를 만들 수 있습니다. 워드프레스는 이를 일반 링크로 처리하지만 URL이 “https:”가 아닌 “tel:”로 시작하기 때문에, 휴대폰에서 이 링크를 탭하면 번호가 이미 입력된 상태로 방문자의 전화 앱이 열립니다. 

구텐베르크 링크를 사용하여 워드프레스에 클릭투콜 통화 버튼을 설정하는 방법은 다음과 같습니다.

1. 편집하려는 페이지나 포스트를 열고 **더하기 아이콘**을 클릭한 다음, **버튼**을 검색하여 선택합니다. 버튼 안을 클릭하고 ‘지금 전화하기’와 같은 텍스트를 입력합니다.

2. 버튼이 선택된 상태에서 **링크 아이콘**을 클릭하거나 **Cmd+K**를 누른 다음, 공백이나 대시 없이 “tel:” 뒤에 번호를 입력합니다(예: “tel:15555551212”). 국제 전화번호의 경우 더하기 기호와 국가 코드를 포함합니다(예: “tel:+442079460192”). **Enter** 키를 눌러 적용합니다.

3. **블록 설정 사이드바**를 사용하여 채우기 또는 윤곽선 스타일을 선택하고, 색상을 설정하며, 테두리 반경을 조정합니다. 전체 너비 버튼은 엄지손가락으로 탭하기 훨씬 더 쉬우므로 너비를 100%로 설정하는 것이 좋습니다. 오른쪽 상단의 **저장**을 클릭한 다음, 휴대폰에서 페이지를 열고 전화 상담 버튼을 탭하여 올바르게 전화가 연결되는지 확인합니다.

이 방법은 특정 페이지의 정확히 배치한 위치에만 존재하는 정적인 버튼을 만듭니다. 긴 페이지의 중간쯤 읽고 있는 방문자는 이미 스크롤하여 지나쳤을 것이고, 이 버튼을 사용하려면 다시 위로 스크롤해야 합니다. 사이트 편집기의 푸터 템플릿에 버튼을 추가하여 모든 페이지에 나타나게 하면 각 페이지에 수동으로 추가하는 수고를 덜 수 있습니다. 하지만 푸터 버튼 역시 클릭하려면 사용자가 맨 아래까지 스크롤해야 합니다.

지금 바로 전화 상담을 할 준비가 된 방문자에게, 직접 찾아야 하는 버튼은 사용될 가능성이 낮습니다. 

옵션 2: 무료 플로팅 클릭투콜 위젯 추가하기(권장)

전환율을 높이는 데 도움을 주는 워드프레스의 플로팅 통화 버튼을 원한다면, 가장 현명한 솔루션은 호스팅 위젯입니다. 최고의 워드프레스 플러그인들도 이 기능을 제공할 수 있지만, 단일 버튼을 위해 관리하고 업데이트해야 할 설치 항목이 하나 더 늘어납니다. Jform의 클릭투콜 위젯과 같은 무료 호스팅 위젯을 사용하면 버튼이 페이지 위에 떠 있으므로 고객이 스크롤할 때도 계속 표시됩니다. 

위젯이 생성하는 임베드 코드를 복사하여 워드프레스 푸터의 사용자 정의 HTML 블록에 붙여넣기만 하면, 사이트의 모든 페이지에 반응형 플로팅 버튼을 추가할 수 있습니다. 이를 통해 긴 페이지의 중간쯤 있는 방문자도 버튼을 찾기 위해 다시 스크롤할 필요 없이 바로 탭할 수 있습니다.

워드프레스에 클릭투콜 전화번호 링크를 추가하는 방법은 다음과 같습니다.

1. Jform 워크스페이스 페이지에서 **생성**을 클릭하고 **웹사이트 위젯**을 선택한 다음, ‘클릭투콜’을 검색하고 **위젯 사용**을 클릭합니다.

2. 국가 코드와 함께 전화번호를 입력하고, 아이콘 옆에 텍스트를 표시하려면 ‘지금 전화하기’와 같은 라벨을 추가합니다. 그런 다음 버튼의 스타일을 지정하고 화면의 하단 및 측면에서 얼마나 떨어져 표시될지 편집합니다. 모바일에서만 표시되도록 설정할 수도 있는데, 이는 통화 기능을 가장 많이 사용할 가능성이 높은 방문자를 위해 탭하여 전화 걸기 기능을 최우선으로 제공합니다.

3. **게시**를 클릭하고 임베드 코드를 복사합니다. 

4. 워드프레스 백엔드로 이동합니다. 통화 버튼을 한 페이지에 추가하려면 블록 편집기에서 해당 페이지를 열고 버튼을 표시할 위치에서 **더하기 아이콘**을 클릭한 다음, **사용자 정의 HTML**을 선택하고 **HTML 편집**을 클릭하여 코드를 붙여넣고 **업데이트**를 클릭합니다. 

5. 모든 페이지에 전화 상담 버튼을 추가하려면 편집기를 닫고 대시보드 사이드바의 **외모**로 이동합니다. **편집기**를 선택하고 **푸터 템플릿**을 열어 **사용자 정의 HTML** 블록을 추가한 다음, 코드를 붙여넣고 **업데이트**를 클릭합니다.

이 방법을 사용하면 플러그인을 설치하지 않고도 시각적인 요소를 완벽하게 제어할 수 있습니다. 위젯 빌더에서 테마에 맞게 색상, 크기, 모양을 설정하고, 화면에서 버튼이 표시될 위치를 선택하며, 표시할 기기를 지정하는 등 이 모든 것을 할 수 있습니다.

스마트한 서버리스 위젯으로 워드프레스 사이트 강화하기

통화 버튼은 각각의 단일 용도 플러그인 없이도 워드프레스 사이트에 추가할 수 있는 여러 기능 중 하나입니다. Jform의 무료 웹사이트 위젯 디렉토리에는 150개 이상의 옵션이 있으며 다음을 포함합니다.

• 통화보다 메시징을 선호하는 고객을 위한 WhatsApp 채팅 버튼 — 대화가 필요 없는 질문에 적합
• 방문자가 행동을 취할 수 있는 남은 시간을 알 수 있도록 도와주는 프로모션 또는 예약 마감일에 대한 카운트다운 타이머
• 내용이 긴 서비스 페이지에서 모바일 환경에서도 쉽게 내비게이션을 사용할 수 있게 해주는 맨 위로 이동 버튼

각각의 기능은 통화 버튼과 마찬가지로 사용자 정의 HTML 블록을 통해 임베드되므로, 사이트에 더 많은 기능을 추가할 때마다 별도의 플러그인을 설치하고 업데이트할 필요가 없습니다.

비즈니스 소유자라면 작은 작업 하나를 위해 플러그인을 관리하는 것보다 전화를 받는 데 집중하는 편이 낫습니다. Jform의 클릭투콜 위젯과 같은 무료 도구를 사용하면 모바일 잠재 고객이 전화 상담을 할 준비가 된 바로 그 순간을 포착할 수 있습니다. 오늘 무료로 사용해 보세요.