Cara Mudah Pasang Chat WhatsApp Melayang di Blogspot

Menambahkan kode HTML

Tambahkan kode HTML di atas tag </body> di dalam template.

<div class="chat_widget">
  <button aria-label="Open WhatsApp Chat" class="chat_widget__toggle_button" data-item="1" type="button">
    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z"></path></svg>
    <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>
  </button>

  <div class="chat_widget__popup">
    <div class="chat_widget__header">
      <div class="chat_widget__avatar">
        <img alt="Admin" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRjOiL-t0dvygOxxg9w-Zy7s4hHeiP7GTf9bmNvMYWOsfxEH0OWajY54tc-U4hiAjUEbq-Fkb7KvU1_3Ok0-PANWpv_AHgrPKjwWSr4rCLv4kyt5qOq8aYdl1mSahOOiD2fiQf0-uPZYSjoENvQdYjRtQLTigwVngdIjikyJfoixpA0O4/s220/Photo.jpg" width="60"/>
      </div>
      <div class="chat_widget__user-info">
        <div class="chat_widget__user_name">Ishar Yulian Satriani <svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"></path></svg></div>
        <div class="chat_widget__user_role">Customer Service</div>
      </div>
    </div>

    <div class="chat_widget__body">
      <div class="chat_widget__message">Halo, ada yang bisa kami bantu?</div>
    </div>

    <div class="chat_widget__footer">
      <form>
        <input aria-label="Ketik pesan" class="chat_widget__input" placeholder="Ketik pesan" autocomplete="off" type="text"/>
        <button aria-label="Send message" class="chat_widget__send_button disabled" type="submit"><svg aria-hidden="true" fill="currentColor" viewBox="0 0 24 24"><path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path></svg></button>
      </form>
    </div>
  </div>
</div>

Menambahkan kode CSS

Tambahkan kode CSS di atas tag </body> di dalam template.

<style>*, *::before, *::after {box-sizing:border-box;}svg {width:24px;height:24px;}.chat_widget {z-index:99;position:fixed;right:32px;bottom:32px;}.chat_widget__toggle_button {display:inline-flex;align-items:center;justify-content:center;background-color:#075e54;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);border:none;border-radius:50%;outline:none;color:#fff;width:56px;height:56px;padding:0;}.chat_widget__toggle_button[data-item]:not([data-item^="0"]):before {content:attr(data-item);display:flex;align-items:center;justify-content:center;position:absolute;top:-4px;right:-4px;background-color:#d32f2f;border:2px solid;border-color:#fff;border-radius:100px;font-size:10px;font-weight:700;color:#fff;height:20px;min-width:20px;line-height:1;padding:0 4px;}.chat_widget__toggle_button svg:last-child {display:none;}.chat_widget.active .chat_widget__toggle_button svg:first-child {display:none;}.chat_widget.active .chat_widget__toggle_button svg:last-child {display:block;}.chat_widget__popup {background-color:#f2ecee;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);border-radius:16px;color:#1c1b1d;min-width:320px;overflow:hidden;opacity:0;visibility:hidden;transform:scale(.8) translateZ(0);transform-origin:bottom right;transition:opacity .03s linear, visibility .25s cubic-bezier(0,0,.2,1), transform .12s cubic-bezier(0,0,.2,1);position:absolute;right:0;bottom:72px;}.chat_widget.active .chat_widget__popup {opacity:1;visibility:visible;transform:scale(1) translateZ(0);}.chat_widget__header {display:flex;align-items:center;gap:12px;background-color:#fff;border-radius:16px;padding:16px;}.chat_widget__avatar {flex:none;line-height:0;}.chat_widget__avatar img {aspect-ratio:1 / 1;object-fit:cover;border-radius:50%;}.chat_widget__user_name {display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;}.chat_widget__user_name svg {width:14px;height:14px;fill:#0197f8;}.chat_widget__user_role {font-size:14px;}.chat_widget__body {display:flex;flex-direction:column;gap:16px;height:300px;padding:16px;overflow:auto;}.chat_widget__message {display:inline-flex;background-color:#fff;border-radius:4px 16px 16px 16px;font-size:16px;width:80%;max-width:fit-content;padding:12px 16px;}.chat_widget__message.chat_widget__message_user {place-self:flex-end;background-color:#075e54;border-radius:16px 4px 16px 16px;color:#fff;}.chat_widget__footer {padding:0 16px 16px;}.chat_widget__footer form {display:flex;align-items:center;background-color:#fff;border-radius:100px;padding-right:8px;}.chat_widget__footer input {background-color:transparent;border:none;outline:none;font-size:16px;color:#1c1b1d;width:100%;height:56px;padding:0 16px;}.chat_widget__footer button {display:inline-flex;align-items:center;justify-content:center;flex:none;background-color:#1c1b1d;border:none;border-radius:50%;outline:none;color:#fff;width:40px;height:40px;padding:0;}.chat_widget__footer button.disabled {background-color:#d9d9d9;color:#6e6e73;pointer-events:none;}@media screen and (max-width:640px) {.chat_widget {right:16px;bottom:16px;}}</style>

Menambahkan kode JavaScript

Tambahkan kode JavaScript di atas tag </body> di dalam template.

<script>
//<![CDATA[
function chatWidget() {
  // Konfigurasi dasar
  const whatsappNumber = '628123456789';
  const redirectNotice = 'Pesan Anda sedang diteruskan ke WhatsApp. Mohon tunggu sebentar.';

  const _0x4f03c7=_0x465f;(function(_0x205d39,_0x2a48c0){const _0x3228d7=_0x465f,_0x2a98fc=_0x205d39();while(!![]){try{const _0x2c5269=-parseInt(_0x3228d7(0x9c))/0x1+parseInt(_0x3228d7(0x9d))/0x2*(-parseInt(_0x3228d7(0xa2))/0x3)+parseInt(_0x3228d7(0xb4))/0x4*(parseInt(_0x3228d7(0x9f))/0x5)+parseInt(_0x3228d7(0xb6))/0x6*(-parseInt(_0x3228d7(0xad))/0x7)+parseInt(_0x3228d7(0xa1))/0x8+-parseInt(_0x3228d7(0xa3))/0x9*(-parseInt(_0x3228d7(0xb8))/0xa)+parseInt(_0x3228d7(0x92))/0xb;if(_0x2c5269===_0x2a48c0)break;else _0x2a98fc['push'](_0x2a98fc['shift']());}catch(_0x30dfbd){_0x2a98fc['push'](_0x2a98fc['shift']());}}}(_0x3fcb,0x302cc));const _0x2ad4b1=(function(){let _0x409ded=!![];return function(_0x366d7a,_0x1bf5b6){const _0x45baa8=_0x409ded?function(){if(_0x1bf5b6){const _0x248169=_0x1bf5b6['apply'](_0x366d7a,arguments);return _0x1bf5b6=null,_0x248169;}}:function(){};return _0x409ded=![],_0x45baa8;};}()),_0x5cb3c0=_0x2ad4b1(this,function(){const _0x8a2053=_0x465f;return _0x5cb3c0[_0x8a2053(0xa9)]()['search'](_0x8a2053(0xb7))[_0x8a2053(0xa9)]()[_0x8a2053(0xaf)](_0x5cb3c0)[_0x8a2053(0xa7)](_0x8a2053(0xb7));});_0x5cb3c0();function _0x3fcb(){const _0x361f6e=['423SJcMto','click','.chat_widget__toggle_button','createElement','search','toggle','toString','.chat_widget','preventDefault','https://wa.me/','8764cJAmXE','remove','constructor','trim','active','addEventListener','querySelector','84NxRBnJ','.chat_widget__input','1152atJcnV','(((.+)+)+)+$','56090bgmBrA','.chat_widget__send_button','contains','.chat_widget__body','location','879890ryoRfR','classList','value','chat_widget__message','scrollTop','div','add','disabled','input','?text=','259602xNzJRQ','12zHSlnp','chat_widget__message\x20chat_widget__message_user','33165evxOFI','textContent','1843056HmLidd','7989XnHYwy'];_0x3fcb=function(){return _0x361f6e;};return _0x3fcb();}const chatWidgetButton=document[_0x4f03c7(0xb3)](_0x4f03c7(0xa5)),chatWidgetContainer=document[_0x4f03c7(0xb3)](_0x4f03c7(0xaa)),inputField=document[_0x4f03c7(0xb3)](_0x4f03c7(0xb5)),sendButton=document[_0x4f03c7(0xb3)](_0x4f03c7(0xb9)),chatBody=document[_0x4f03c7(0xb3)](_0x4f03c7(0xbb));chatWidgetButton&&chatWidgetContainer&&chatWidgetButton['addEventListener'](_0x4f03c7(0xa4),function(){const _0x2cfbe2=_0x4f03c7;chatWidgetContainer[_0x2cfbe2(0x93)][_0x2cfbe2(0xa8)](_0x2cfbe2(0xb1)),chatWidgetButton['setAttribute']('data-item','0');});function _0x465f(_0x3937e0,_0x251a1b){const _0x230e14=_0x3fcb();return _0x465f=function(_0x5cb3c0,_0x2ad4b1){_0x5cb3c0=_0x5cb3c0-0x92;let _0x3fcb31=_0x230e14[_0x5cb3c0];return _0x3fcb31;},_0x465f(_0x3937e0,_0x251a1b);}inputField[_0x4f03c7(0xb2)](_0x4f03c7(0x9a),function(){const _0x3df797=_0x4f03c7;inputField['value']['trim']()!==''?sendButton[_0x3df797(0x93)][_0x3df797(0xae)](_0x3df797(0x99)):sendButton[_0x3df797(0x93)][_0x3df797(0x98)](_0x3df797(0x99));}),sendButton['addEventListener'](_0x4f03c7(0xa4),function(_0x2aaf31){const _0x85dba4=_0x4f03c7;_0x2aaf31[_0x85dba4(0xab)]();const _0xeaf951=inputField[_0x85dba4(0x94)][_0x85dba4(0xb0)]();if(!_0xeaf951||sendButton[_0x85dba4(0x93)][_0x85dba4(0xba)](_0x85dba4(0x99)))return;const _0x1c5aaf=document[_0x85dba4(0xa6)](_0x85dba4(0x97));_0x1c5aaf['className']=_0x85dba4(0x9e),_0x1c5aaf['textContent']=_0xeaf951,chatBody['appendChild'](_0x1c5aaf);const _0x4c850f=document[_0x85dba4(0xa6)](_0x85dba4(0x97));_0x4c850f['className']=_0x85dba4(0x95),_0x4c850f[_0x85dba4(0xa0)]=redirectNotice,chatBody['appendChild'](_0x4c850f),inputField['value']='',sendButton[_0x85dba4(0x93)][_0x85dba4(0x98)](_0x85dba4(0x99)),chatBody[_0x85dba4(0x96)]=chatBody['scrollHeight'],setTimeout(()=>{const _0x2986d7=_0x85dba4,_0x5ac46d=encodeURIComponent(_0xeaf951),_0x1645c0=_0x2986d7(0xac)+whatsappNumber+_0x2986d7(0x9b)+_0x5ac46d;window[_0x2986d7(0xbc)]['href']=_0x1645c0;},0x1388);});
}
chatWidget();
//]]>
</script>

Terima kasih telah mengikuti tutorial Cara Mudah Memasang Chat WhatsApp Melayang di Blogspot. Semoga panduan ini membantu Anda dalam menambahkan fitur chat WhatsApp yang praktis dan menarik di blog Anda.

Jangan lupa untuk meninggalkan komentar di bawah jika Anda memiliki pertanyaan, saran, atau ingin berbagi pengalaman setelah mencoba tutorial ini.

Interactive Demo

Gila Temax

Customer Service

Halo, ada yang bisa kami bantu?