WordPress 웹 사이트에 Apple 비즈니스 채팅 버튼을 추가하는 방법

게시 됨: 2021-03-01

Apple Message는 웹마스터가 웹사이트에 비즈니스 채팅 버튼과 전화/통화 버튼을 추가할 수 있는 기능입니다. 사용자가 웹사이트 소유자에게 직접 연락하여 도움을 요청할 수 있기 때문에 매우 유용하고 편리합니다. 따라서 웹 사이트 소유자는 WordPress 웹 사이트 에 비즈니스 채팅 버튼을 추가 하여 사용자 경험을 향상시켜야 합니다.

목차 숨기기

1. 1 단계: 비즈니스 채팅 가입
2. 2 단계: 자바스크립트 라이브러리 추가
1. 2.1. 방법 1: 테마 파일에서 코드 편집
2. 2.2. 방법 2: Slim SEO 플러그인 사용
3. 3 단계: 비즈니스 채팅 버튼을 원하는 위치에 표시
4. 마지막 말

구현하는 동안 일부 HTML 코드를 사용해야 하므로 기술에 정통하지 않은 사람에게는 상대적으로 어렵습니다. 하지만 이 과정을 단계별로 안내해 드리기 때문에 걱정하지 마세요.

참고 : 비즈니스 채팅 버튼은 Apple 기기에서만 사용할 수 있습니다. 사용자가 이러한 장치를 사용하지 않으면 버튼이 숨겨집니다.

1단계: 비즈니스 채팅 가입

먼저 Apple Business Register 페이지로 이동하여 Apple ID로 Business Chat에 등록합니다. 아주 쉽기 때문에 자세한 내용은 언급하지 않겠습니다.

이제 비즈니스 채팅 ID가 이미 있습니다. 다음 단계에서 필요하므로 이 ID를 어딘가에 저장하십시오.

2단계: 자바스크립트 라이브러리 추가

다음으로, 비즈니스 채팅 버튼을 웹사이트에 표시하기 위해 자바스크립트 라이브러리를 추가해야 합니다. 두 가지 방법이 있습니다.

방법 1: 테마 파일에서 코드 편집

테마 파일에서 <head></head> 또는 </body> 태그를 찾습니다. 테마에 따라 위치가 다릅니다. 예를 들어 Justread 테마를 사용하고 있으므로 <head><head> 태그는 header.php 파일에 있고 </body> 태그는 footer.php 파일에 있습니다.

위의 태그를 찾은 후 이 코드를 </body> 태그 앞이나 <head><head> 태그에 추가합니다.

 <script src="https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"></script>

방법 2: Slim SEO 플러그인 사용

테마 파일에서 코드를 편집하는 것 외에 Slim SEO 플러그인을 사용하여 테마 파일로 이동하여 <head><head> 및 </body> 태그를 찾지 않고도 코드를 추가할 수 있습니다.

Slim SEO는 완전 무료이므로 wordpress.org에서 쉽게 찾을 수 있습니다. 관리자 대시보드 에서 플러그인 > 새로 추가 로 이동한 다음 평소와 같이 플러그인을 설치하고 활성화합니다.

Slim SEO – 빠르고 자동화된 WordPress SEO 플러그인

저자: eLightUp

현재 버전: 3.11.1

최종 업데이트: 2021년 11월 16일

Slim-seo.3.11.1.zip

92% 등급 10,000+ 설치 WP 4.5+ 필요

그런 다음 설정 > Slim SEO 로 이동하여 위의 코드를 헤더 코드 또는 본문 코드 섹션에 추가합니다.

저장 을 클릭하는 것을 잊지 마십시오.

또한 Slim SEO에는 WordPress 웹 사이트를 SEO용으로 자동 최적화하는 데 도움이 되는 다른 많은 유용한 기능이 있습니다. 여기에서 이러한 기능에 대해 자세히 알아볼 수 있습니다.

3단계: 원하는 위치에 비즈니스 채팅 버튼 표시

이 마지막 단계에서는 원하는 위젯 영역에 비즈니스 채팅 버튼을 표시해야 합니다. 이것은 위젯에 일부 HTML 코드를 추가하여 수행할 수 있습니다. HTML 코드는 다음과 같은 구조를 가져야 합니다.

 <div class="apple-class-name" 사과 속성 이름 ></div>

data-apple-business-id 형식의 속성으로 예제를 만듭니다. 1단계에서 찍은 아이디 기억하시나요? 이제 사용할 때입니다. 내 ID는 ca0db090 이고 container-style 배너에 채팅 버튼을 추가하고 싶으므로 <div> 태그는 다음과 같습니다.

 <div class="apple-business-chat-banner-container" 데이터-apple-business-></div>

data-apple-business-id 속성은 필수입니다. 비즈니스 채팅 ID의 소유자를 지정하고 메시지를 보내는 데 사용됩니다.

그 외에도 HTML 코드에 사용할 수 있는 다른 많은 클래스와 속성이 있습니다. 아래 목록에서 가장 인기 있는 클래스와 속성을 찾을 수 있습니다.

채팅 또는 통화 버튼을 표시하는 클래스:

apple-business-chat-banner-container : 채팅 및 통화 버튼 모두 표시
apple-business-chat-message-container : 채팅 버튼만 표시
apple-business-chat-phone-container : 통화 버튼만 표시
등

채팅/통화 버튼의 표시를 사용자 정의하는 속성(색상, 글꼴, 크기 등)

data-apple-banner-font-family : 클릭 유도문안 버튼에 대한 패밀리 글꼴 선택
data-apple-banner-icon-background-color : data-apple-banner-icon-background-color 배경색(원)을 선택합니다.
data-apple-banner-icon-color : 채팅 및 통화 버튼의 색상을 선택합니다.
등.

고객과 웹사이트 소유자 간의 상호작용과 관련된 속성:

data-apple-business-group-id : 전화/메시지를 받는 부서를 결정합니다. 예를 들어 "고객 서비스" 또는 "기술 지원" 부서의 ID를 이 속성에 할당할 수 있습니다.
Data-apple-business-phone : 사용자가 채팅할 수 없는 경우 연락하는 데 사용하는 전화번호를 입력합니다. 이 속성을 추가하지 않으면 통화 버튼이 숨겨집니다.
등.

또한 여기에서 Apple의 모든 속성과 클래스를 찾을 수 있습니다.

필요한 <div> 태그를 얻은 후 HTML 편집기를 사용하여 원하는 위치에 추가합니다. 예를 들어, Justread 테마의 바닥글에 있는 위젯에 비즈니스 채팅 버튼을 표시하고 싶습니다. 여기에 그 방법이 있습니다.

관리 대시보드 에서 모양 > 위젯 으로 이동하여 사용자 정의 HTML 위젯을 선택한 다음 바닥글에 위젯을 표시하도록 선택합니다.

다음으로 위젯에 다음 코드를 삽입합니다.

 <div>
	class="apple-business-chat-banner-container"
	데이터-애플-비즈니스-
	data-apple-business-phone="0987725475"
	data-apple-banner-cta="질문이 있습니까? 저희가 도와드리겠습니다."
	data-apple-banner-context="iPhone X에 대한 제안을 받으려면 전문가와 채팅하십시오."
	데이터 사과 배너 규모 = "1"
	데이터 사과 배너 배경 색상 = "rgb(27, 63, 104)"
	데이터 사과 배너 텍스트 색상 = "rgb(255, 255, 255)"
	데이터-애플-배너-아이콘-배경-색상="rgb(255, 255, 255)"
	데이터 사과 배너 아이콘 색상="rgba(0, 210, 143, 0.3)"></div>

마지막으로 저장 을 클릭합니다.

WordPress 웹 사이트 바닥글에 비즈니스 채팅 버튼 표시가 완료되었습니다. 이제부터 Apple 사용자는 바닥글에 다음과 같이 비즈니스 채팅 버튼이 표시되는 것을 볼 수 있습니다.

버튼의 스타일을 지정하고 위의 코드, 클래스 및 속성을 사용하여 동일한 방식으로 다른 위치에 표시할 수 있습니다. 그것을 시도하고 댓글 섹션에서 우리를 보여주세요!

마지막 말

코드를 사용하여 비즈니스 채팅 버튼을 WordPress 웹사이트에 추가하는 것은 WordPress 초보자에게 매우 어려울 수 있습니다. 그러나 이 튜토리얼을 엄격하게 따른다면 확실히 효과가 있을 것입니다. 사이트에 비즈니스 채팅 버튼이 있으면 고객의 전화와 메시지에 답장하는 것을 잊지 마십시오. 고객과 웹 사이트 소유자 간의 신뢰를 구축하여 브랜드를 개선하고 전환율을 높이는 데 도움이 됩니다.

비즈니스 채팅 버튼을 추가하는 것 외에도 라이브 채팅 버튼과 Facebook 고객 채팅 버튼을 WordPress 웹사이트에 추가할 수도 있습니다. 이러한 기능을 사용하면 고객 질문에 보다 신속하게 답변할 수 있습니다.