웹사이트에 무료 WhatsApp 채팅 위젯을 몇 분 안에 추가하는 방법: 기본 wa.me 링크 접근법과 커스터마이징할 수 있는 완성된 스니펫을 출력하는 생성기.
웹사이트에 WhatsApp 채팅 위젯을 추가하는 데 돈을 들이지 않으면서 정직하게 할 수 있는 방법은 두 가지입니다. 일반 wa.me 링크를 붙여넣고 직접 스타일을 지정하거나, 완성되고 커스터마이징할 수 있는 스니펫을 제공하는 생성기를 사용하는 것입니다. 둘 다 정말로 무료이고 둘 다 몇 분만에 끝낼 수 있습니다. 다만 6개월 뒤에는 아주 다른 상황에 처하게 됩니다.
이 글에서는 둘을 모두 다루며, 생략했을 때 정확히 무엇을 포기하는지 알 수 있도록 기본 링크부터 시작합니다.
가장 기본적인 버전은 한 줄의 HTML입니다.
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>15551234567을 국제 전화 형식의 전체 번호로 바꾸세요. 플러스 기호, 공백, 앞의 0은 없어야 합니다. text 파라미터는 사전 입력된 메시지이며 URL 인코딩되어 있으므로 %20은 공백이고 %2C는 쉼표입니다. 이를 클릭하면 WhatsApp이 열리고 메시지가 이미 상자에 입력되어 있으며, 방문자가 보내기를 누르기를 기다리고 있습니다.
wa.me는 이를 위한 Meta의 자체 단축 링크이므로 다른 쪽에서의 동작이 일관성 있습니다. 휴대폰에서는 앱이 설치되어 있으면 WhatsApp 앱을 직접 열고, 설치되어 있지 않으면 방문자를 앱 스토어로 보냅니다. 앱이 설치되지 않은 데스크톱 브라우저에서는 대신 web.whatsapp.com을 새 탭에서 엽니다. 이 감지를 직접 구축할 필요가 없으며, 이것이 이 접근 방식에서 정말로 해결되는 유일한 부분입니다.
그 외의 모든 것은 아닙니다. 그 단일 링크는 어디에 놓든 밑줄이 그어진 파란 텍스트일 뿐입니다. 이를 사람들이 “WhatsApp 채팅 위젯”이라고 말할 때 실제로 의미하는 떠있는 하단 모서리 버튼으로 바꾸려면 CSS를 직접 작성해야 합니다.
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>이것은 작동하지만, 이제 아이콘 파일도 필요하고, 쿠키 배너와 모든 모달 위에 앉을 만큼 높은 z-index도 필요하며, 모바일에서 자신의 nav를 가리지 않아야 하고, 다음 달에 누군가 메시지 텍스트를 변경하고 싶을 때 어떻게 할지에 대한 계획도 필요합니다. 즉, 이를 붙여넣은 모든 페이지 또는 템플릿의 같은 마크업 블록을 다시 열어야 한다는 뜻입니다.
WhatsApp 채팅 위젯 생성기는 위의 링크와 동일한 작업을 수행하며, 스타일 지정, 위치 지정, 아이콘도 포함하고, 유지 관리할 책임이 있는 사용자 정의 CSS 블록 대신 하나의 스크립트 태그를 반환합니다. 무료이고 계정이 필요하지 않으며 WhatsApp Business API에 접근하지 않으므로 사용하기 전에 인증 단계가 없습니다.
실제 사용 방법은 다음과 같습니다.
#25D366)이 기본값이지만, 대신 사이트의 브랜드 색상과 일치하도록 하려면 필드에 16진수 값을 입력할 수 있습니다.text 파라미터와 동일한 아이디어이지만, URL 인코딩된 문자열 대신 양식에서 편집할 수 있습니다.양식을 작성하면 버튼의 실시간 미리보기가 페이지의 오른쪽에 렌더링되고, 그 옆의 코드 패널이 완성된 스니펫으로 실시간 업데이트됩니다.
<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>복사를 클릭하고, 사이트의 닫는 </body> 태그 앞 어디든 그 단일 태그를 붙여넣으면 위젯이 실시간으로 작동합니다. 업로드할 것이 더 이상 없고, 아이콘 파일도 없고, 별도의 스타일시트도 없습니다. 양식의 모든 설정(색상, 위치, 오프셋, 인사말, 팝업)이 그 단일 태그의 data- 속성으로 인코딩되므로, 전체 것이 하나의 붙여넣기로 이동합니다.
두 결과는 표면적으로는 비슷해 보입니다. 모서리의 버튼이 WhatsApp을 열지만, 시간이 지나면서 다르게 변합니다.
손으로 작성한 버전의 경우 모든 설정은 인라인 스타일이나 별도의 CSS 파일 내에 묻혀 있는 값입니다. 인사말을 변경하려면 URL 인코딩된 문자열에서 text 파라미터를 찾아 편집해야 합니다. 새로운 쿠키 배너가 이제 이와 겹치기 때문에 버튼을 이동하려면 붙여넣은 모든 페이지 또는 템플릿의 CSS를 다시 편집해야 하며, 하나를 빠뜨리면 누군가 알아차릴 때까지 그 페이지는 조용히 손상된 것처럼 보이는 위젯을 갖게 됩니다. 이 중 어느 것도 크게 실패하지는 않으며, 단지 페이지별로 점차 동기화되지 않을 뿐입니다.
생성된 스니펫은 이러한 모든 설정을 한 줄의 레이블이 지정된 속성으로 유지하며, 몇 초 만에 양식에서 다시 복사할 수 있고, 공유 헤더나 바닥글 포함을 사용하지 않는 경우 사이트에서 찾아 바꿀 수 있습니다. 그리고 실제 버튼 논리가 붙여넣은 코드가 아니라 태그가 가리키는 호스팅된 스크립트 파일에 있으므로, 위젯 자체의 버그 수정 및 동작 개선이 사이트를 다시 건드릴 필요 없이 배포됩니다.
메커니즘은 모든 곳에서 동일합니다. 스니펫을 모든 페이지에서 렌더링되는 위치에 가져오되, 이상적으로는 </body> 바로 앞이어야 합니다.
</body> 태그 바로 위에 있는 theme.liquid에 붙여넣습니다.각각 자신만의 특이점이 있고 더 자세히 살펴볼 가치가 있으므로 WordPress는 별도로 더 자세히 다루겠지만, 붙여넣기 단계 자체는 모든 곳에서 동일합니다. 하나의 스크립트 태그, 한 위치, 모든 페이지에 한 번에 적용됩니다.
시크릿 창에서 사이트를 로드하여 캐시된 스타일이 실제 문제를 숨기지 않도록 하고, 버튼을 데스크톱과 실제 휴대폰에서 모두 확인하세요. 크기가 조정된 브라우저 창이 아닙니다. 각각에서 한 번 클릭하고 WhatsApp(모바일의 앱, 데스크톱의 web.whatsapp.com)이 열리며 번호와 인사말이 이미 입력되어 있는지 확인하세요. 그런 다음 쿠키 배너나 고정 요소가 표시된 상태에서 페이지를 스크롤하세요. 이 시점에서 가장 흔한 실패는 z-index 충돌로, 위젯이 다른 고정 위치의 요소 위가 아니라 뒤에서 렌더링됩니다.
이것이 정말로 무료인가요, 아니면 함정이 있나요? 생성기 자체는 계정 없이 무료입니다. 이것이 가리키는 위젯 스크립트는 비용 없이 호스팅되고 제공됩니다. 나중에 위젯을 통해 들어오는 대화를 관리하기 위해 The Chat Quotient의 Chrome 확장 프로그램을 설치하면, 이것도 자체 무료 플랜이 있지만, 위젯 사용 요구사항이 아니라 별도의 선택 단계입니다.
WhatsApp 위젯은 WhatsApp Web과 같나요?
아니오, 이것은 흔한 착각입니다. WhatsApp Web(web.whatsapp.com)은 브라우저에서 WhatsApp 메시지를 읽고 보내는 데 사용하는 인터페이스입니다. WhatsApp 위젯 웹 요소는 자신의 사이트에 추가하는 작은 버튼이며, 클릭하면 모바일의 WhatsApp 앱에서 또는 데스크톱 앱이 설치되지 않은 데스크톱의 WhatsApp Web에서 채팅이 열립니다. 위젯은 임베드하는 것이고, WhatsApp Web은 결과 대화가 열리는 위치입니다.
방문자가 WhatsApp을 설치하지 않았으면 위젯이 작동하나요? 모바일에서 앱을 설치하지 않은 상태에서 클릭하면 방문자를 먼저 WhatsApp을 설치하도록 앱 스토어로 보냅니다. 링크가 WhatsApp 자체로 넘기는 방법만 알고 있으며 다른 메시징 채널로 대체할 수 없으므로 이 단계를 피할 방법이 없습니다.
판매와 지원 같은 WhatsApp 번호를 두 개 이상 같은 위젯에 가질 수 있나요? 한 버튼에는 불가능합니다. 위젯은 인스턴스당 단일 WhatsApp 번호를 중심으로 구축되었습니다. 두 개의 진입점이 필요한 경우 위치와 인사말이 다른 두 개의 위젯을 추가할 수 있지만, 이 시점에서는 둘을 별도로 나열한 전용 연락처 페이지가 보통 같은 모서리에 쌓인 두 개의 떠있는 버튼보다 방문자에게 더 명확합니다.
생성기를 사용하려면 코드를 알아야 하나요? 아니오. 모든 설정은 양식 필드이며, 붙여넣는 유일한 것은 생성하는 단일 스크립트 태그이며, 사이트가 어느 플랫폼에서 실행되든 동일한 복사 붙여넣기 단계입니다.
wa.me 링크는 자신의 CSS를 작성하고 유지 관리하는 것이 편하고 무엇이든 변경될 때마다 그 코드를 다시 방문하는 것을 괜찮아한다면 정말로 필요한 전부입니다. WhatsApp 채팅 위젯 생성기는 동일한 결과를 생성합니다. 떠있는 버튼이 사전 입력된 WhatsApp 채팅을 열지만, CSS도 없고, 아이콘 파일도 없고, 손으로 작성하는 데 따른 유지 관리도 없으며, 여전히 무료입니다.
Chrome 확장 프로그램을 추가하고 비즈니스를 위한 WhatsApp 대화 관리 방식을 혁신하세요.