가이드

플러그인 없이 WordPress에 WhatsApp 채팅 위젯 추가하는 방법

Abhishek Sachan
#WordPress WhatsApp 채팅 위젯#WordPress WhatsApp 위젯#플러그인 없이#The Chat Quotient

플러그인 대신 복사 붙여넣기 스니펫으로 WordPress에 WhatsApp 채팅 위젯을 추가하는 방법: 세 가지 삽입 방식과 플러그인을 하나 더 설치할 때 감수해야 할 것들.

WordPress 대시보드의 사용자 정의 HTML 블록에 표시된 WhatsApp 위젯 스크립트와 실시간 사이트 미리보기

“WhatsApp 채팅 위젯 WordPress”를 검색하면 대부분의 결과가 플러그인을 가리킵니다. 설치하고, 활성화하고, 별도의 설정 화면에서 구성하면 이제 WordPress 코어나 테마가 바뀔 때마다 함께 업데이트해야 할 것이 하나 더 늘어납니다. 플러그인을 아예 건너뛰는 더 빠른 길이 있습니다. WhatsApp 위젯은 떠있는 버튼이고, 떠있는 버튼은 HTML 몇 줄과 스크립트 태그 하나일 뿐이며, WordPress에는 플러그인 페이지에 아무것도 추가하지 않고도 이를 붙여넣을 자리가 이미 마련되어 있습니다.

이 글에서는 사이트가 어떻게 만들어졌는지에 따라 달라지는 세 가지 방법을 차례로 살펴보고, 전용 플러그인이 실제로 제 몫을 하는 상황도 함께 짚어보겠습니다.

왜 플러그인을 건너뛰는가

WordPress WhatsApp 플러그인이 가짜이거나 부실한 것은 아닙니다. 스니펫 방식과 마찬가지로 진짜로 떠있는 버튼을 추가해 줍니다. 차이는 이를 계속 유지하는 데 드는 비용입니다. WordPress 사이트의 모든 플러그인은 페이지가 로드될 때마다 실행되는 코드이며, WordPress나 PHP 버전이 바뀔 때마다 자체 업데이트가 필요하고, 오래 방치되면 보안 스캐너가 지적하는 항목이 하나 더 늘어납니다. 페이지 빌더, SEO 플러그인, 캐싱 플러그인, 폼 플러그인이 이미 있는 사이트에 WhatsApp 플러그인까지 더해지면 서로 충돌할 수 있는 다섯 가지 요소가 생기는 셈이고, 특히 WhatsApp 위젯 플러그인은 방문자가 버튼을 클릭하든 안 하든 모든 페이지에서 자체 CSS와 JavaScript를 불러오는 경우가 많습니다.

붙여넣은 스니펫에는 설정 화면도, 변경 이력도, 호환성 공지도 없습니다. 테마 바닥글의 정적 블록이거나 페이지의 사용자 정의 HTML 블록일 뿐이며, WordPress는 이를 다른 임베드 콘텐츠와 똑같이 취급합니다. 활성화할 것도, 패치 상태를 유지할 것도 없습니다.

그렇다고 모든 사이트에 플러그인이 잘못된 선택이라는 뜻은 아닙니다. 어디에든 코드를 붙여넣는 것이 불편하거나, 모양 → 테마 파일 편집기를 건드려서는 안 될 사람이 wp-admin에서 위젯 설정을 바꿀 수 있게 하고 싶다면 플러그인의 설정 UI가 더 안전한 선택입니다. 스니펫 방식은 코드 한 블록을 한 번 복사해서 붙여넣고, 실제로 뭔가를 바꾸고 싶을 때만 다시 열어보는 것이 괜찮다는 전제 위에 있습니다.

스니펫 받기

WhatsApp 채팅 위젯 생성기는 번호, 버튼 색상, 위치, 인사말을 스크립트 태그 하나로 바꿔줍니다. 폼을 채우고, WhatsApp 번호는 앞의 0이나 플러스 기호 없이 국제 전화 형식으로 입력하고, 색상을 고르고, 버튼이 놓일 모서리를 선택하면 도구가 다음과 같은 코드를 출력합니다.

<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
  data-widget-id="wgt_xxxxxxxx"
  data-whatsapp-number="15551234567"
  data-color="#25D366"
  data-position-vertical="bottom"
  data-position-horizontal="right"
  data-offset-vertical="20"
  data-offset-horizontal="20"
  data-z-index="5000"
  data-greeting="Hi! How can we help?"
  async
  defer
></script>

이것이 위젯의 전부입니다. 업로드할 아이콘 파일도, 불러올 스타일시트도, PHP 코드도 없습니다. 복사한 다음, 사이트가 어떻게 구성되어 있는지에 따라 아래 세 가지 삽입 방식 중 하나를 고르면 됩니다.

방법 1: 사용자 정의 HTML 블록

테마가 블록 에디터(구텐베르크) 기반이라면 스니펫을 넣을 가장 빠른 자리는 페이지나 재사용 블록에 직접 넣는 것이지만, 이 경우 위젯이 그 페이지에만 표시됩니다. 사이트 전체에 위젯을 노출하려면, 테마가 바닥글용 템플릿 파트를 제공하지 않는 한 블록 에디터는 사이트 전체 바닥글 삽입에 딱 맞는 도구는 아닙니다.

전체 사이트 편집을 지원하는 테마는 대부분 바닥글 템플릿 자체에 사용자 정의 HTML 블록을 추가할 수 있습니다.

  1. 모양 → 편집기로 이동합니다 (구버전 설정에서는 모양 → 테마 편집기).
  2. 바닥글(Footer) 템플릿 파트를 엽니다.
  3. 그 안 아무 곳에나 사용자 정의 HTML 블록을 추가합니다.
  4. 스크립트 태그를 붙여넣고 저장합니다.

바닥글 템플릿 파트 안에 있으므로 이제 그 바닥글을 사용하는 모든 페이지에서 렌더링되며, 대부분의 테마에서는 이것이 곧 사이트 전체를 의미합니다.

방법 2: 테마 파일 편집기로 footer.php 수정하기

클래식(블록 기반이 아닌) 테마에는 시각적으로 편집할 수 있는 바닥글 템플릿 파트가 없으므로, 스니펫을 테마의 PHP 파일에 직접 넣습니다.

  1. 모양 → 테마 파일 편집기로 이동합니다.
  2. 오른쪽 파일 목록에서 footer.php를 엽니다.
  3. 파일 하단 부근에 있는 닫는 </body> 태그를 찾습니다.
  4. </body> 바로 앞, 별도의 줄에 스크립트 태그를 붙여넣습니다.
  5. 파일 업데이트를 클릭합니다.

이 방법은 테마 코드를 직접 건드리는 유일한 방식이므로, 스니펫 방식이 갖는 진짜 유의점 하나가 여기서 나타납니다. 테마 업데이트가 footer.php를 덮어써서 붙여넣은 코드를 조용히 지워버릴 수 있습니다. 테마가 자식 테마를 지원한다면, 부모 테마 업데이트에도 영향을 받지 않는 자식 테마의 footer.php에 이 편집을 대신 적용하세요. 자식 테마를 쓰지 않고 새로 설정하고 싶지도 않다면, Insert Headers and Footers 같은 단일 목적의 저부담 플러그인(전체 WhatsApp 위젯 플러그인이 아닙니다)을 쓰면 테마 파일과 전혀 무관한 전용 바닥글 입력란을 얻을 수 있고, 테마가 업데이트될 때마다 자동으로 유지됩니다.

방법 3: Elementor나 Divi의 임베드 코드 위젯

사이트가 페이지 빌더로 만들어졌다면, 대개 정확히 이럴 때 쓰라고 만든 위젯이 있습니다.

두 빌더 모두 원시 HTML과 스크립트 태그를 그대로 렌더링하며, 일부 WYSIWYG 콘텐츠 영역처럼 <script> 태그를 걸러내는 정제 과정이 없으므로, 위젯은 footer.php에 직접 붙여넣었을 때와 똑같이 로드되고 작동합니다.

제대로 작동하는지 확인하기

어떤 방식으로 붙여넣었든, 시크릿 창에서 사이트를 열어 캐시된 페이지가 예전 버전을 보여주는 일이 없도록 하고, 위젯이 나타나야 할 모든 템플릿을 확인하세요. 홈페이지, 블로그 글, 그리고 사이트 나머지 부분과 다른 템플릿으로 만들어진 랜딩 페이지가 있다면 그것도 포함됩니다. 테마 파일이나 빌더 템플릿 하나를 수정한다고 해서 별도 템플릿을 쓰는 랜딩 페이지까지 자동으로 반영되지는 않기 때문입니다. 데스크톱과 실제 휴대폰 양쪽에서 버튼을 눌러보세요. WhatsApp이 설치된 모바일에서는 앱이 바로 열리면서 번호와 인사말이 미리 채워져 있어야 하고, 데스크톱에서는 새 탭에서 web.whatsapp.com이 열려야 합니다.

플러그인이 실제로 더 나은 선택인 경우

몇 가지 상황에서는 다시 전용 플러그인을 설치하는 쪽으로 저울이 기울어집니다.

기술에 익숙하지 않은 여러 사람이 사이트를 관리하고, 그 누구도 테마 파일 편집기 근처에 가서는 안 된다면, 모두가 footer.php를 건드리지 않을 것이라고 믿는 것보다 플러그인의 설정 화면이 더 안전합니다. 템플릿 파일을 편집하는 대신 에디터 사이드바의 체크박스로 페이지나 게시물 유형마다 위젯을 표시하거나 숨기고 싶다면, 이런 페이지별 로직은 정확히 플러그인의 PHP가 처리하는 영역이며 정적 스니펫으로는 할 수 없습니다. 그리고 이미 위젯까지 더 큰 기능 세트의 일부로 함께 처리하는 완전한 WhatsApp Business API 통합 플러그인을 쓰고 있다면, 위젯 부분만 따로 스니펫으로 바꾸는 것은 하나를 없애는 게 아니라 유지해야 할 것을 하나 더 늘리는 셈입니다.

번호 하나, 버튼 하나, 모든 페이지에서 동일하게 동작하는 흔한 경우라면, 스니펫이 나중에 업데이트할 것을 하나도 남기지 않으면서 똑같은 일을 해냅니다.

자주 묻는 질문

이 방법이 WordPress 사이트를 느리게 만드나요? 스크립트 태그가 asyncdefer를 쓰기 때문에 나머지 페이지 로딩을 막지 않고 불러와지며, 전체 플러그인이 불러올 수 있는 여러 개의 개별 스타일·스크립트 파일 대신 외부 요청 하나로 끝납니다.

WP Rocket이나 W3 Total Cache 같은 캐싱 플러그인과 함께 작동하나요? 네. 매 요청마다 PHP가 렌더링하는 것이 아니라 정적 스크립트 태그이기 때문에 페이지 캐싱이 이를 방해하지 않습니다. 반면 일부 플러그인 기반 위젯은 과도한 HTML 압축 설정 때문에 이따금 제거되기도 합니다.

WooCommerce와 함께 써도 되나요? 네, 삽입 방식은 동일합니다. footer.php, 바닥글 템플릿 파트, 또는 페이지 빌더의 바닥글 템플릿 중 어느 것도 사이트가 WooCommerce를 함께 운영하는지 신경 쓰지 않습니다.

테마에 테마 파일 편집기가 없으면 어떻게 하나요? 일부 호스팅사는 보안상의 이유로 이를 비활성화합니다. 이럴 때는 테마가 전체 사이트 편집을 지원한다면 바닥글 템플릿 파트의 사용자 정의 HTML 블록을, 페이지 빌더가 있다면 그 임베드 위젯을, 아니면 테마 파일을 전혀 건드리지 않는 대안으로 Insert Headers and Footers 같은 단일 목적의 작은 플러그인을 쓰면 됩니다.

WordPress 테마를 바꾸면 스니펫을 다시 설치해야 하나요? 네. 이전 테마의 footer.php나 템플릿 파트에 붙여넣었던 것이기 때문입니다. 생성기에서 같은 스니펫을 다시 복사하고(위젯 ID는 그대로 유지됩니다), 새 테마에 맞는 세 가지 방법 중 하나로 붙여넣으세요.

결론

WhatsApp 위젯은 스크립트 태그 하나이며, WordPress에는 이를 담을 자리가 이미 세 곳 마련되어 있습니다. 바닥글 템플릿의 사용자 정의 HTML 블록, 테마 파일 편집기를 통한 footer.php, 또는 페이지 빌더의 임베드 코드 위젯입니다. 어느 쪽도 전용 플러그인 설치를 필요로 하지 않습니다. WhatsApp 채팅 위젯 생성기에서 스니펫을 가져와 사이트 구성에 맞는 방법에 붙여넣으면 바로 작동하며, 다음에 WordPress가 새 릴리스를 내놓아도 새로 업데이트할 것이 없습니다.

← 블로그로 돌아가기

Your Next Customer Is Messaging You Right Now.

Chrome 확장 프로그램을 추가하고 비즈니스를 위한 WhatsApp 대화 관리 방식을 혁신하세요.

5.0 rating on the Chrome Web Store · 500+ small businesses already on board