Blogger에 WhatsApp 채팅 버튼을 추가하는 방법(무료)

WhatsApp은 널리 사용되는 인스턴트 메시징 플랫폼 중 하나이며 비즈니스에서 이를 활용할 수 있습니다. WhatsApp을 통해 서비스와 제품을 쉽게 판매할 수 있습니다.

이 문서에서는 WhatsApp 채팅 버튼을 Blogger 웹사이트에 추가하는 방법을 배웁니다.

따라서 단계로 이동하기 전에 웹사이트에 채팅 버튼을 추가하면 어떤 이점이 있고 웹사이트에서 사용해야 하는지에 대해 알아보겠습니다.

eMarketer 의 최근 데이터에 따르면 WhatsApp은 현재 인도에서 3억 9010만 명의 월간 활성 사용자를 보유하고 있으며 브라질과 미국이 그 뒤를 잇고 있습니다.

따라서 이 인스턴트 메시징 플랫폼을 활용하여 비즈니스를 성장시킬 수 있습니다. 따라서 WhatsApp 채팅 위젯을 추가하면 사용자가 이메일을 보내는 대신 귀하에게 직접 연락할 수 있는 쉬운 매체를 제공합니다.

따라서 WordPress 사용자라면 플러그인을 추가하여 웹사이트에서 이를 쉽게 구현할 수 있습니다. WordPress에서 WA 채팅 버튼 추가 가이드를 따르세요.

Blogger에 WhatsApp 채팅 버튼을 추가하는 단계

WhatsApp 채팅 위젯을 추가하려면 다음 단계를 따르세요.

1단계: Blogger 대시보드에 로그인하고 테마 섹션으로 이동합니다.

2단계: 이제 테마 백업을 수행하고 HTML 편집 옵션을 클릭합니다.

3단계: 이제 ]]></b:skin> 태그 또는 </style> 태그를 검색하고 바로 위에 CSS 코드를 붙여넣습니다.

 /* Chatbox Whatsapp */ :root { --warna-background: #4dc247; --warna-bg-chat: #f0f5fb; --warna-icon: #fff; --warna-text: #505050; --warna-text-alt: #989b9f; --lebar-chatbox: 320px; } svg{width: 22px;height: 22px;vertical-align: middle;fill: var(--warna-icon)} .chatMenu, .chatButton .svg-2{display: none} .chatButton{position: fixed;background-color: var(--warna-background);bottom: 20px;left: 20px;border-radius: 50px;z-index: 20;overflow: hidden;display: flex;align-items: center;justify-content: center;width: 50px;height: 50px;-webkit-transition: all .2s ease-out;transition: all .2s ease-out} .chatButton svg{margin: auto;fill: var(--warna-icon)} .chatBox{position: fixed;bottom: 70px;left: 20px;width: var(--lebar-chatbox);-webkit-transition: all .2s ease-out;transition: all .2s ease-out;z-index: 21;opacity: 0;visibility: hidden;line-height: normal} .chatContent{border-radius: 15px;background-color: #fff;box-shadow: 0 5px 15px 0 rgba(0,0,0,.05);overflow: hidden; border: 1px solid #b6b6b6;} .chatHeader{position: relative;display: flex;align-items: center;padding: 15px 20px;background-color: var(--warna-background);overflow: hidden} .chatHeader svg{width: 32px;height: 32px;flex-shrink: 0;fill: var(--warna-icon)} .chatHeader .chatTitle{padding-left: 15px;font-size: 14px;color: var(--warna-icon)} .chatHeader .chatTitle span{font-size: 11.5px;display: block;line-height: 1.58em} .chatText{display: flex;flex-wrap: wrap;margin: 25px 20px;font-size: 12px;color: var(--warna-text)} .chatText span{display: inline-block;margin-right: auto;padding: 10px 10px 10px 20px;background-color: var(--warna-bg-chat);border-radius: 3px 15px 15px} .chatText span:after{content: 'Just now';margin-left: 15px;font-size: 9px;color: var(--warna-text-alt)} .chatText .typing{margin: 15px 0 0 auto;padding: 10px 20px 10px 10px;border-radius: 15px 3px 15px 15px} .chatText .typing: after{display: none} .chatStart{display: flex;align-items: center;margin-top: 15px;padding: 18px 20px;border-radius: 10px;background-color: #fff;overflow: hidden;font-size: 12px;color: var(--warna-text); border: 1px solid grey;} .chatMenu:checked + .chatButton{-webkit-transform: rotate(360deg);transform: rotate(360deg)} .chatMenu:checked + .chatButton .svg-1{display: none} .chatMenu:checked + .chatButton .svg-2{display: block} .chatMenu:checked ~ .chatBox{bottom: 90px;opacity: 1;visibility: visible}

4단계: 이제 </body> 태그를 검색하고 바로 위에 HTML 코드를 붙여넣습니다.

 <input class='chatMenu hidden' type='checkbox'/> <label class='chatButton' for='offchatMenu'> <svg class='svg-1' viewBox='0 0 32 32'><g><path d='M16,2A13,13,0,0,0,8,25.23V29a1,1,0,0,0,.51.87A1,1,0,0,0,9,30a1,1,0,0,0,.51-.14l3.65-2.19A12.64,12.64,0,0,0,16,28,13,13,0,0,0,16,2Zm0,24a11.13,11.13,0,0,1-2.76-.36,1,1,0,0,0-.76.11L10,27.23v-2.5a1,1,0,0,0-.42-.81A11,11,0,1,1,16,26Z'/><path d='M19.86,15.18a1.9,1.9,0,0,0-2.64,0l-.09.09-1.4-1.4.09-.09a1.86,1.86,0,0,0,0-2.64L14.23,9.55a1.9,1.9,0,0,0-2.64,0l-.8.79a3.56,3.56,0,0,0-.5,3.76,10.64,10.64,0,0,0,2.62,4A8.7,8.7,0,0,0,18.56,21a2.92,2.92,0,0,0,2.1-.79l.79-.8a1.86,1.86,0,0,0,0-2.64Zm-.62,3.61c-.57.58-2.78,0-4.92-2.11a8.88,8.88,0,0,1-2.13-3.21c-.26-.79-.25-1.44,0-1.71l.7-.7,1.4,1.4-.7.7a1,1,0,0,0,0,1.41l2.82,2.82a1,1,0,0,0,1.41,0l.7-.7,1.4,1.4Z'/></g></svg> <svg class='svg-2' viewBox='0 0 512 512'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg> </label> <div class='chatBox'> <div class='chatContent'> <div class='chatHeader'> <svg viewbox='0 0 32 32'><path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/><rect height='2' width='2' x='19' y='9'/><rect height='2' width='2' x='14' y='9'/><rect height='2' width='2' x='24' y='9'/><path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/></svg> <div class='chatTitle'>Do you have any doubts? <span>chat with us on WhatsApp</span></div> </div> <div class='chatText'> <span>Hello, How can I help you?</span> <span class='typing'>...</span> </div> </div> <a class='chatStart' href='https://api.whatsapp.com/send?phone=9668362528&amp;text=Hello Abhishek, I need your help' rel='nofollow noreferrer' target='_blank'> <span>Click me to start the chat...</span> </a> </div>

5단계: 이제 WhatsApp 번호와 미리 정의된 메시지를 변경하고 코드를 저장합니다.

이제 WhatsApp 채팅 버튼이 Blogger 웹사이트에 추가됩니다.

단계를 시각적으로 보려면 아래 비디오를 시청하십시오.

WhatsApp 채팅 위젯을 사용자 정의하는 방법은 무엇입니까?

음, 버튼 색상을 변경하고 테두리 및 상자 그림자를 추가할 수 있는 것처럼 채팅 버튼의 모양과 느낌을 추가로 사용자 지정할 수 있습니다.

여기에서 채팅 버튼은 왼쪽에서 20픽셀 떨어진 위치에 있으며 오른쪽으로 변경하려면 CSS 코드에서 위치를 변경해야 합니다.

여기에서 채팅 버튼(.chatButton)과 채팅 상자(.chatBox)에 대한 두 가지 값을 변경해야 합니다. 여기서 코드를 변경해야 합니다. 왼쪽:20픽셀; 에게 오른쪽:20px; .

결론

이 기사가 블로거 웹사이트에 채팅 버튼을 추가하는 데 도움이 되었기를 바랍니다. 이 과정에서 문제가 발생하면 댓글 섹션에서 저에게 질문하거나 텔레그램 그룹에 참여하여 토론할 수 있습니다.

이와 같은 놀라운 튜토리얼을 더 보려면 YouTube 채널 Key2Blogging을 구독하고 Twitter 에서 업데이트를 위해 나를 팔로우할 수 있습니다.