WhatsApp 위젯 HTML 코드: 무료 복사 붙여넣기 스니펫 (2026년)

기본 wa.me 링크부터 완전한 플로팅 버튼까지, 복사해서 붙여넣는 WhatsApp 위젯 HTML과 원시 코드만으로는 직접 만들어야 하는 부분들을 정리했습니다.

플로팅 채팅 버튼 미리보기 옆에 WhatsApp 위젯 스니펫이 표시된 HTML 코드 편집기

실제 HTML을 찾고 있었다면, 여기 있습니다. 가입할 필요 없습니다.

<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>

15551234567을 국제 전화 형식의 전체 번호로 바꾸세요. 국가 코드가 먼저 오고, 플러스 기호, 공백, 앞의 0은 없어야 합니다. 이 링크 하나만으로도 방문자가 여러분의 비즈니스와 WhatsApp 채팅을 여는 데 충분합니다. 이것이 또한 “HTML 위젯 코드를 달라”는 요청에 대한 완전히 정직한 답이기도 합니다. 이 지점을 지나면 나머지는 여러분이(또는 생성기가) 이 한 줄이 다루지 않는 부분을 직접 만들어야 하기 때문입니다.

사전 입력된 메시지 추가하기

방문자가 링크에 도달했을 때는 아무것도 입력되어 있지 않습니다. text 파라미터를 추가하면 채팅이 열릴 때 상자에 메시지가 미리 준비되어 있습니다.

<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
  Chat with us on WhatsApp
</a>

메시지는 URL 인코딩되어야 합니다. %20은 공백, %2C는 쉼표, %27은 아포스트로피입니다. 원하는 문장을 먼저 작성한 다음, 아무 URL 인코더에 돌려서 text 값에 붙여넣으세요. 쿼리 문자열 중간에 원시 공백이나 문장 부호가 그대로 들어가면 일부 브라우저에서 링크가 깨질 수 있습니다.

플로팅 버튼으로 바꾸기

텍스트 링크는 대부분의 사람들이 말하는 “WhatsApp 위젯”이 아닙니다. 모서리 버튼은 같은 링크 위에 CSS를 얹은 것입니다.

<a
  href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
  target="_blank"
  rel="noopener"
  aria-label="Chat on WhatsApp"
  style="
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
  "
>
  <svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
    <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
  </svg>
</a>

이 버전은 전화/채팅 아이콘을 SVG로 인라인 처리해서 별도의 아이콘 파일을 건너뜁니다. 그래서 이것은 진짜로 하나의 자체 완결형 블록입니다. </body> 앞에 붙여넣으면 그 외에 업로드할 것이 없습니다. 그래도 여전히 네 가지는 여러분이 직접 처리해야 하며, 바로 이 지점에서 실제 생성기가 제 몫을 합니다.

이 HTML이 대신해 주지 않는 것들

모바일과 데스크톱은 동작 방식이 다르지만, 이 스니펫의 어떤 부분도 그것을 제어하지 않습니다. WhatsApp이 설치된 휴대폰에서 wa.me 링크를 클릭하면 앱이 바로 열립니다. 앱이 설치되어 있지 않으면 방문자를 대신 앱 스토어로 보내는데, 링크 자체에서 설정할 수 있는 대체 메시지나 다른 연락 수단은 없습니다. 데스크톱 브라우저에서는 새 탭에서 web.whatsapp.com을 여는데, 이는 방문자가 그 브라우저에서 이미 WhatsApp Web에 로그인되어 있을 때만 작동합니다. 그렇지 않으면 왜 그런지 아무 설명도 없이 QR 코드만 바라보게 됩니다. 이 세 가지 결과 모두 같은 href에서 비롯됩니다. 어느 쪽이 일어날지 감지하거나 순수 HTML로 가로챌 수는 없습니다.

사전 입력된 메시지는 폼 필드가 아니라 URL 안에 있습니다. 이를 변경하려면 다시 새 문자열을 손으로 인코딩하고, 링크가 붙여넣어진 모든 페이지를 찾아서, 공유 템플릿이 없다면 그곳에서도 일일이 교체해야 합니다.

SVG 경로를 손으로 편집하지 않고는 바꿔 끼울 아이콘 파일이 없으며, 인라인 스타일 블록을 한 줄 한 줄 직접 건드리지 않고는 버튼의 위치, 크기, 색상을 바꿀 방법도 없습니다.

채팅이 열리기 전에 리드를 수집하는 기능은 여기 없습니다. 링크(또는 버튼)는 클릭되는 순간 곧바로 WhatsApp으로 이동합니다. 대화가 시작되기 전에 이름과 연락 사유를 받고 싶다면, 이는 여러분이 직접 만들고 연결한 다음 어떻게든 text 파라미터에 전달해야 하는 별도의 폼입니다.

생성된 버전

WhatsApp 채팅 위젯 생성기는 여러분이 직접 유지 관리하는 CSS 블록 대신, 같은 몇 가지 설정을 하나의 스크립트 태그로 바꿔주는 무료 도구입니다. 번호를 입력하고, 색상을 고르고, 위치와 오프셋을 설정하고, 인사말을 작성한 다음, 선택적으로 사전 채팅 폼(짧은 질문 하나, 이메일이나 전화번호를 필수로 지정할지 여부 포함)을 켜면 WhatsApp 창이 열리기도 전에 맥락을 수집할 수 있습니다. 이 도구는 다음을 출력합니다.

<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
  data-widget-id="wgt_xxxxxxxx"
  data-whatsapp-number="15551234567"
  data-color="#128C7E"
  data-position-vertical="bottom"
  data-position-horizontal="left"
  data-offset-vertical="24"
  data-offset-horizontal="24"
  data-z-index="999"
  data-greeting="Hi! Ask us anything."
  data-prechat="true"
  data-prechat-title="Before we chat"
  data-prechat-description="Tell us what you need help with."
  async
  defer
></script>

모든 설정은 한 줄에 레이블이 지정된 data- 속성이므로, 인사말을 바꾸거나 버튼을 반대쪽 모서리로 옮기는 일은 CSS 파일을 뒤지는 것이 아니라 폼에서 태그를 다시 복사하는 것으로 끝납니다. 아이콘, 위치 지정 로직, 모바일과 데스크톱을 구분하는 딥링크 처리, 사전 채팅 폼은 모두 태그가 가리키는 호스팅된 스크립트 안에 들어 있으며, 이는 위의 원시 HTML이 여러분이 직접 작성하지 않는 한 스스로 해낼 수 없는 부분입니다.

전체 속성 참조

생성된 스니펫을 붙여넣었는데 손으로 수정하기 전에 각 줄이 무엇을 제어하는지 알고 싶다면, 이 태그가 받는 속성은 다음과 같습니다.

속성	제어하는 항목
`data-widget-id`	생성기가 발급하는 고유 ID, 직접 수정하지 마세요
`data-whatsapp-number`	수신 번호, 국제 전화 형식, `+` 기호 없이
`data-color`	버튼 배경색, 임의의 16진수 값
`data-position-vertical`	`top` 또는 `bottom`
`data-position-horizontal`	`left` 또는 `right`
`data-offset-vertical` / `data-offset-horizontal`	해당 모서리로부터의 픽셀 거리
`data-z-index`	스택 순서, 다른 고정 요소가 버튼을 덮으면 값을 높이세요
`data-greeting`	사전 입력된 메시지 텍스트, 수동 URL 인코딩 불필요
`data-prechat`	채팅이 열리기 전에 짧은 폼을 표시하려면 `true`
`data-prechat-title` / `data-prechat-description` / `data-prechat-question`	사전 채팅 폼에 표시되는 문구

두 버전 모두 어디에 붙여넣을지

원시 HTML과 생성된 스크립트 태그 모두 같은 위치에 들어갑니다. 모든 페이지에서 렌더링되는 곳이면 되고, 이상적으로는 </body> 바로 앞입니다.

일반 HTML 사이트: 공유 바닥글 include, 없다면 모든 페이지에 개별적으로.
WordPress: 사용자 정의 HTML 블록, 또는 모양 → 테마 파일 편집기를 통한 테마 바닥글.
Shopify: 온라인 스토어 → 테마 → 코드 편집을 통해 theme.liquid의 </body> 바로 위.
Wix: 설정 → 사용자 정의 코드, 모든 페이지에 로드되도록 설정.
Webflow: 프로젝트 설정 → 사용자 정의 코드 → 바닥글 코드.

자주 묻는 질문

원시 HTML 링크에는 WhatsApp Business 계정이 필요한가요? 아니오. 개인 WhatsApp 번호도 Business 번호와 똑같은 방식으로 wa.me 링크와 함께 작동합니다. 카탈로그나 자동 응답 같은 Business 전용 기능은 링크 자체에 포함되어 있지 않습니다.

버튼에 아이콘 대신 깨진 이미지가 표시되는 이유는 무엇인가요? 이는 HTML이 해당 경로에 업로드되지 않은 외부 아이콘 파일(<img src="/whatsapp-icon.svg">)을 참조할 때 발생합니다. 위의 인라인 SVG 버전은 아이콘이 HTML에 직접 작성되어 있으므로 이 문제를 완전히 피합니다.

위젯 HTML을 <head> 태그 안에 넣어도 되나요? 엄밀히 말하면 앵커 태그 자체는 <body>에서 렌더링되어야 합니다. <head> 콘텐츠는 화면에 표시되지 않기 때문입니다. 스크립트는 <head>에서 불러올 수 있지만, 스니펫을 </body> 바로 앞에 두면 렌더링 차단을 피할 수 있고, 대부분의 사이트 빌더가 기대하는 패턴이기도 합니다.

한 페이지에 추가할 수 있는 WhatsApp 위젯 개수에 제한이 있나요? 두 개를 붙여넣는 것을 막는 장치는 없지만, 같은 모서리에 겹쳐진 두 개의 플로팅 버튼은 대개 기능이 아니라 버그처럼 보입니다. 번호가 두 개(예: 영업과 지원) 필요하다면, 서로 겹치지 않도록 각각 다른 위치를 지정하세요.

Squarespace에서도 똑같이 작동하나요? Squarespace의 코드 삽입 패널(설정 → 고급 아래)은 WordPress의 사용자 정의 HTML 블록과 마찬가지로 두 버전 모두 받아들이며, 바닥글에 삽입하면 한 곳에서 사이트 전체에 적용됩니다.

결론

WhatsApp 위젯의 진짜 HTML은 <a href="https://wa.me/..."> 태그 하나이며, 이제 여러분도 그것을 갖게 되었습니다. 사람들이 보통 떠올리는 플로팅형, 브랜드가 반영된, 리드를 수집하는 버튼으로 만들려면 CSS와 딥링크의 예외 상황들을 직접 작성하고 유지 관리하거나, WhatsApp 채팅 위젯 생성기가 완성된 스크립트 태그를 한 번의 붙여넣기로 출력하게 하면 됩니다. 무료이고 계정도 필요 없습니다.