-->
MqZ6MWB9MGBcNqBdMGBaNaJ6M8IeyCoFADMlNWZ=
6074645612605633477
Cara Membuat Tombol Widget Chat Whatsapp di Blogger

Cara Membuat Tombol Widget Chat Whatsapp di Blogger

Cara Membuat Tombol Widget Chat Whatsapp di Blogger

Anda pasti pernah membaca bahwa menggunakan WhatsApp Business akan memungkinkan Anda untuk berhubungan dengan lebih dari 1,5 miliar orang di seluruh dunia, tetapi kenyataannya, untuk menjangkau calon pelanggan ini Anda harus memanfaatkan setiap saluran yang tersedia untuk memotivasi mereka menghubungi bisnis Anda. melalui WhatsApp. Jika Anda ingat bahwa saat ini perangkat seluler menghasilkan hampir setengah dari lalu lintas situs web Anda, situs web Anda dapat menjadi salah satu sumber terbaik percakapan WhatsApp.

Kami ingin membagikan cara yang sederhana dan menarik untuk meletakkan tombol klik untuk mengobrol di situs web Anda, ini akan memungkinkan pengunjung Anda untuk menghubungi Anda dengan satu klik.

Cara Membuat Tombol Widget Chat Whatsapp di Blog dengan SVG - Tombol Chat Langsung WhatsApp ini biasanya digunakan oleh pengguna blog / website yang ingin memudahkan pengunjung untuk berkomunikasi melalui Chat WhatsApp.

Beragam cara dari mereka dengan meletakkan tombol chat whatsapp, ada yang berbentuk tombol yang disematkan setelah artikel yang mereka tulis dan ada pula yang ditempatkan di bagian bawah halaman blog dengan posisi melayang.

Memang benar, jika ada yang bilang memberikan tombol chat WhatsApp langsung di halaman blog akan cukup berguna. Karena dengan adanya link atau tombol chat langsung whatsapp ini, pengunjung blog kita akan sangat mudah untuk menghubungi kita melalui whatsapp.

Tombol Whatsapp Direct Chat yang akan digunakan kali ini menggunakan icon svg dengan tambahan css untuk mengatur posisi icon Whatsapp nanti.

Tombol Chat Live Whatsapp Dengan ikon SVG ini dapat diterapkan di blog AMP dan Non AMP, serta terdapat juga dua versi opsional yang dapat Anda pilih sesuai dengan keinginan Anda

Bagi Anda yang tertarik memasang Tombol Obrolan Live Whatsapp di Blog Dengan SVG ini di halaman blog Anda, ikuti tutorial singkat di bawah ini:

Cara Memasang Tombol Chat Live Whatsapp di Blog

  1. Buka Blogger >> Tema >> Edit HTML .
  2. Gunakan CTRL+F Untuk mempermudah pencarian
  3. Cari kode </b:skin> atau </style>
  4. Copy kode dibawah dan pastekan tepat diatasnya
  5. Step 1 : CSS

    
    /* Chatbox Whatsapp */
    :root {
      --warna-background: #4dc247; /* Warna background header dan tombol chat */
      --warna-bg-chat: #f0f5fb;
      --warna-icon: #fff; /* Warna icon chat */
      --warna-text: #505050;
      --warna-text-alt: #989b9f;
      --lebar-chatbox: 320px;
    }
    .sticky-button{position:fixed;background-color:var(--warna-background);bottom:20px;left:20px;width:55px;height:55px;border-radius:50px;box-shadow:0 2px 5px 0 rgba(0,0,0,.1);z-index:20;overflow:hidden;}
    .sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
    .sticky-button a svg, .sticky-button label svg{margin:auto;fill:var(--warna-icon)}
    .sticky-button label svg.svg-2{display:none}
    .sticky-chat{position:fixed;bottom:70px;left:20px;width:var(--lebar-chatbox);-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
    z-index:21;opacity:0;visibility:hidden;line-height:normal}
    .sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
    .sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:var(--warna-background);overflow:hidden}
    .sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.040);border-radius:70px 0 5px 0;}
    .sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}
    .sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}
    .sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
    .sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--warna-text)}
    .sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-bg-chat);border-radius:3px 15px 15px}
    .sticky-chat .chat-text span:after{content:'Just now';display:inline-block;margin-left:15px;font-size:9px;color:var(--warna-text-alt)}
    .sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
    .sticky-chat .chat-text span.typing:after, .chat-menu{display:none}
    .sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}
    .sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}
    .sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}
    .chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
    .chat-menu:checked + .sticky-button label svg.svg-1{display:none}
    .chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
    .chat-menu:checked + .sticky-button + .sticky-chat{bottom:90px;opacity:1;visibility:visible}
    
    Keterangan:
    Pada bagian :root{ } Anda bisa mengubah warna header, icon dan lebar widget sesuai keinginan Anda. Ganti juga tulisan left yang sudah ditandai marking menjadi right untuk mengubah posisi widget agar berada di posisi kanan. Dan anda juga dapat berexperiment CSS di atas yang saya tandai dengan Marking.

Step 2 : HTML

Ada dua pilihan yang dapat anda pilih untuk penempatan kode HTML ini, pertama yang paling mudah pada menu Tata Letak Blogger tambahkan widget HTML baru dibagian sidebar dan pastekan semua kode HTML dibawah ini.
Kedua adalah dengan menempel semua kode HTML dibawah ini sebelum tag </body>, kedua nya sama saja terserah anda ingin pilih cara yang mana.


<input class='chat-menu hidden' id='offchat-menu' type='checkbox' />
<div class='sticky-button' id='sticky-button'>
  <label for='offchat-menu'>
    <svg class='svg-1' viewBox='0 0 32 32'><path d='M16,3A13,13,0,0,0,4.53,22.13L3,27.74a1,1,0,0,0,.27,1A1,1,0,0,0,4,29a.84.84,0,0,0,.27,0l5.91-1.65a1,1,0,0,0-.53-1.93L5.42,26.56l1.15-4.3a1,1,0,0,0-.1-.76A11,11,0,1,1,16,27a11.23,11.23,0,0,1-1.84-.15,1,1,0,0,0-1.15.82,1,1,0,0,0,.82,1.15A13,13,0,1,0,16,3Z'></path><path d='M15,11.21l-1.16-1.6a2.06,2.06,0,0,0-1.5-.84,2.08,2.08,0,0,0-1.62.6l-1.2,1.2a2.81,2.81,0,0,0-.8,2.08c0,1.77,1.36,4,4,6.6,3.09,3,5.23,4,6.69,4a2.7,2.7,0,0,0,2-.81l1.2-1.2a2,2,0,0,0-.24-3.11L20.8,17a2.09,2.09,0,0,0-1.83-.3l-1.49.47a.53.53,0,0,1-.26-.09,11.42,11.42,0,0,1-2.35-2.26.31.31,0,0,1,0-.11c.13-.44.35-1.15.5-1.64A2,2,0,0,0,15,11.21Zm1.29,7.63a2.33,2.33,0,0,0,1.75.2l1.54-.46,1.61,1.25L20,21c-.48.47-2.25.33-5.86-3.21-3-2.91-3.41-4.5-3.41-5.18A.89.89,0,0,1,11,12l1.28-1.19,1.18,1.65c-.16.49-.39,1.22-.51,1.65A2.12,2.12,0,0,0,13,15.51,11.24,11.24,0,0,0,16.33,18.84Z'></path></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'></path>
    </svg>
  </label>
</div>
<div class='sticky-chat'>
  <div class='chat-content'>
    <div class='chat-header'>
      <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'></path><rect height='2' width='2' x='19' y='9'></rect><rect height='2' width='2' x='14' y='9'></rect><rect height='2' width='2' x='24' y='9'></rect><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'></path></svg>
      <div class='title'>Silahkan chat dengan tim kami <span>Admin akan membalas dalam beberapa menit</span></div>
    </div>
    <div class='chat-text'>
      <span>Halo, Ada yang bisa kami bantu?</span>
      <span class='typing'><svg viewbox='0 0 512 512'><circle cx='256' cy='256' r='48'></circle><circle cx='416' cy='256' r='48'></circle><circle cx='96' cy='256' r='48'></circle></svg></span>
    </div>
  </div>
  <a class='chat-button' href='https://api.whatsapp.com/send?phone=6285200000000&text=Assalamualaikum,%20Saya%20ingin%20bertanya' rel='nofollow noreferrer' target='_blank'>
    <span>Mulai chat...</span>
    <svg viewBox='0 0 32 32'><path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'></path></svg>    
  </a>
</div>

Keterangan:
Silakan Ubah bagian yang saya tandai marking dengan nomor Whatsapp Anda, Dan juga ubah teks pesan pada WA sesuai keinginan Anda.

Demo

Untuk melihat secara langsung bagaimana tampilan widget ini Anda bisa langsung melihatnya pada link dibawah ini:

Demikian tutorial Cara Membuat Tombol Widget Chat Whatsapp di Blogger. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya.

Referensi : https://blog.jagodesain.com/2020/05/tutorial-widget-chat-wa.html

Post a Comment

Tinggalkan komentar sesuai topik artikel. Komentar di luar topik tidak disarankan (terutama disertai link aktif).
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code code

© ‧ Tomy Tech ~ All rights reserved.