Cara Membuat Widget Whatsapp Chat di Blog
Hiirotaku - Pada artikel ini kita akan membuat widget Whatsapp Chat di Blogger. Kegunaan widget ini yaitu salah satunya jika kalian ingin membuat template toko di blogger pasti sangat membutuhkan fitur seperti ini karena sangat efektif untuk saling berkomunikasi antara penjual dan pembeli yang ingin bertanya, adapun juga manfa'at lain seperti jika blog kalian ingin memiliki fitur hubungi cs pasti gak asing jugakan.
Cara Memasang Widget Whatsapp Chat di Blogger
Untuk memasang widget ini pastinya tentu kalian harus punya akun blogger dulu dong, jika sudah langsung ikuti langkah - langkah berikut.
1. Buka Halaman Blogger
2. Pilih Tema > Edit HTML
3. Masukkan Kode HTML dibawah ini tepat di bawahnya kode <body> sob
<div class="ewChat">
<div id="ewChatBox" class="ewChatBox ewc_hidden" style="display: none" aria-hidden="true">
<button id="ewChatClose" class="ewChatClose ewc_close">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24">
<path fill="currentColor" d="M13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42z" />
</svg>
</button>
<div class="ewChatCloseMobile ewc_close">Ketuk disini untuk menutu </div>
<div class="ewChatAvatar">
<!-- Ganti URL src dengan URL avatar yang ingin kamu gunakan -->
<img alt="" src="https://res.cloudinary.com/xviidev/image/upload/v1642074620/Webp.net-resizeimage_elgrei.jpg" />
<!-- Teks Header -->
</div>
<div class="ewChatHeader">
<h3>Butuh bantuan? Chat sekarang!</h3>
<p>Ketik pesan kamu dan mulai terhubung</p>
<p>dengan kami di WhatsApp</p>
</div>
<div>
<!-- Isi teks chat -->
<div id="ewChatBubble" class="ewChatBubble">
<p> Halo, perkenalkan saya Jihan dari Evetry, ada yang bisa saya bantu? </p>
<span>Sekarang</span>
</div>
</div>
</div>
<div id="ewChatInput" class="ewChatInput ewc_hidden" style="display: none" aria-hidden="true">
<input id="ewc_message" name="ewc_message" type="text" placeholder="Ketik sesuatu. . . ." />
<button id="ewc_send">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 16 16">
<g fill="none">
<path d="M1.724 1.053a.5.5 0 0 0-.714.545l1.403 4.85a.5.5 0 0 0 .397.354l5.69.953c.268.053.268.437 0 .49l-5.69.953a.5.5 0 0 0-.397.354l-1.403 4.85a.5.5 0 0 0 .714.545l13-6.5a.5.5 0 0 0 0-.894l-13-6.5z" fill="currentColor" />
</g>
</svg>
</button>
</div>
<div id="ewc_desktop_button" class="ewChatDesktop ewc_open">
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 24 24">
<g fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.415 14.382c-.298-.149-1.759-.867-2.031-.967c-.272-.099-.47-.148-.669.15c-.198.296-.767.966-.94 1.164c-.174.199-.347.223-.644.075c-.297-.15-1.255-.463-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.019-.458.13-.606c.134-.133.297-.347.446-.52c.149-.174.198-.298.297-.497c.1-.198.05-.371-.025-.52c-.074-.149-.668-1.612-.916-2.207c-.241-.579-.486-.5-.668-.51c-.174-.008-.372-.01-.57-.01c-.198 0-.52.074-.792.372c-.273.297-1.04 1.016-1.04 2.479c0 1.462 1.064 2.875 1.213 3.074c.149.198 2.095 3.2 5.076 4.487c.71.306 1.263.489 1.694.625c.712.227 1.36.195 1.872.118c.57-.085 1.758-.719 2.006-1.413c.247-.694.247-1.289.173-1.413c-.074-.124-.272-.198-.57-.347zm-5.422 7.403h-.004a9.87 9.87 0 0 1-5.032-1.378l-.36-.214l-3.742.982l.999-3.648l-.235-.374a9.861 9.861 0 0 1-1.511-5.26c.002-5.45 4.436-9.884 9.889-9.884c2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.892 6.993c-.002 5.45-4.436 9.885-9.884 9.885zm8.412-18.297A11.815 11.815 0 0 0 11.992 0C5.438 0 .102 5.335.1 11.892c-.001 2.096.546 4.142 1.587 5.945L0 24l6.304-1.654a11.881 11.881 0 0 0 5.684 1.448h.005c6.554 0 11.89-5.335 11.892-11.893a11.821 11.821 0 0 0-3.48-8.413" fill="currentColor" />
</g>
</svg>
</div>
<div>Halo, ada yang bisa dibantu?</div>
</div>
<div id="ewc_mobile_button" class="ewChatMobile ewc_open">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 24 24">
<g fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.415 14.382c-.298-.149-1.759-.867-2.031-.967c-.272-.099-.47-.148-.669.15c-.198.296-.767.966-.94 1.164c-.174.199-.347.223-.644.075c-.297-.15-1.255-.463-2.39-1.475c-.883-.788-1.48-1.761-1.653-2.059c-.173-.297-.019-.458.13-.606c.134-.133.297-.347.446-.52c.149-.174.198-.298.297-.497c.1-.198.05-.371-.025-.52c-.074-.149-.668-1.612-.916-2.207c-.241-.579-.486-.5-.668-.51c-.174-.008-.372-.01-.57-.01c-.198 0-.52.074-.792.372c-.273.297-1.04 1.016-1.04 2.479c0 1.462 1.064 2.875 1.213 3.074c.149.198 2.095 3.2 5.076 4.487c.71.306 1.263.489 1.694.625c.712.227 1.36.195 1.872.118c.57-.085 1.758-.719 2.006-1.413c.247-.694.247-1.289.173-1.413c-.074-.124-.272-.198-.57-.347zm-5.422 7.403h-.004a9.87 9.87 0 0 1-5.032-1.378l-.36-.214l-3.742.982l.999-3.648l-.235-.374a9.861 9.861 0 0 1-1.511-5.26c.002-5.45 4.436-9.884 9.889-9.884c2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.892 6.993c-.002 5.45-4.436 9.885-9.884 9.885zm8.412-18.297A11.815 11.815 0 0 0 11.992 0C5.438 0 .102 5.335.1 11.892c-.001 2.096.546 4.142 1.587 5.945L0 24l6.304-1.654a11.881 11.881 0 0 0 5.684 1.448h.005c6.554 0 11.89-5.335 11.892-11.893a11.821 11.821 0 0 0-3.48-8.413" fill="currentColor" />
</g>
</svg>
</div>
</div>
<div class="ewChatBackdrop ewc_hidden" style="display: none"></div> 4. Lalu Masukkan juga kode CSS berikut tepat di atas kode ]]></b:skin>
/* Silahkan edit kode berikut untuk mengubah warna */
:root {
--ewc-color-1: #ffffff;
--ewc-color-2: #eae1da;
--ewc-color-3: #25d366;
--ewc-color-3-dark: #0bac46;
--ewc-color-4: #00796a;
}
.ewChat {
position: fixed;
bottom: 15px;
right: 30px;
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
width: 320px;
max-width: calc(100% - 60px);
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 999;
}
.ewChatBox {
width: 100%;
background-color: var(--ewc-color-2);
border-radius: 15px;
display: none;
opacity: 0;
transition: opacity 1000ms;
flex-direction: column;
}
.ewChatClose {
color: var(--ewc-color-1);
display: none;
position: absolute;
top: -35px;
right: 0;
border: none;
padding: 4px;
border-radius: 100%;
background-color: var(--ewc-color-4);
}
.ewChatClose:hover {
background-color: var(--ewc-color-3);
}
.ewChatCloseMobile {
width: 100%;
position: absolute;
text-align: center;
color: var(--ewc-color-1);
top: -300px;
padding: 100px 0;
cursor: pointer;
}
.ewChatAvatar {
position: absolute;
left: calc(50% - 32px);
top: -80px;
width: 59px;
height: 59px;
padding: 3px;
border: solid 2px var(--ewc-color-3);
border-radius: 100%;
background-color: var(--ewc-color-1);
display: flex;
}
.ewChatAvatar img {
border-radius: 100%;
}
.ewChatHeader {
background-color: var(--ewc-color-4);
color: var(--ewc-color-1);
border-radius: 15px 15px 0 0;
padding: 12px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.ewChatHeader h3 {
color: var(--ewc-color-1);
font-size: 18px;
margin: 3px;
}
.ewChatHeader p {
font-size: 12px;
margin: 0;
}
.ewChatBubble {
background-color: var(--ewc-color-1);
margin: 10px 18px 10px 30px;
padding: 9px 9px 25px 9px;
text-align: left;
border-radius: 0 10px 10px 10px;
position: relative;
opacity: 0;
transition: opacity 1000ms;
}
.ewChatBubble:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border: 15px solid transparent;
border-right-color: var(--ewc-color-1);
border-left: 0;
border-top: 0;
margin-top: 0;
margin-left: -15px;
}
.ewChatBubble p {
margin: 0;
font-size: 14px;
}
.ewChatBubble span {
position: absolute;
bottom: 5px;
right: 9px;
opacity: 0.5;
font-size: 11px;
}
.ewChatInput {
display: none;
opacity: 0;
transition: opacity 1000ms;
width: 100%;
margin-top: 10px;
background-color: var(--ewc-color-1);
height: 48px;
border-radius: 24px;
}
.ewChatInput input {
font-family: "Roboto", sans-serif;
font-size: 16px;
background-color: var(--ewc-color-1);
height: 32px;
margin: auto 20px;
width: 100%;
border: none;
}
.ewChatInput input:focus {
outline: none;
}
.ewChatInput button {
border: none;
background-color: var(--ewc-color-4);
border-radius: 20px;
margin: 4px;
color: var(--ewc-color-1);
padding: 8px;
}
.ewChatInput button:hover {
background-color: var(--ewc-color-3);
}
.ewChatDesktop {
cursor: pointer;
display: none;
align-items: center;
height: 36px;
border-radius: 25px;
background-color: var(--ewc-color-3);
width: 68%;
padding: 4px 20px;
font-size: 14px;
color: var(--ewc-color-1);
margin-top: 20px;
}
.ewChatDesktop svg {
margin-right: 10px;
}
.ewChatMobile {
cursor: pointer;
padding: 10px;
background-color: var(--ewc-color-3);
display: flex;
border-radius: 100%;
color: var(--ewc-color-1);
border: solid 2px var(--ewc-color-1);
margin-top: 20px;
}
.ewChatMobile:hover,
.ewChatDesktop:hover {
background-color: var(--ewc-color-3-dark);
}
.ewChatBackdrop {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
@media screen and (min-width: 450px) {
.ewChatAvatar {
left: -80px;
top: 80px;
}
.ewChatClose,
.ewChatDesktop {
display: flex;
}
.ewChatMobile,
.ewChatCloseMobile {
display: none;
}
} 5. Langkah terakhir masukkan kode JavaScript dibawah ini tepat di atas kode </body>
<script type='text/javascript'>
// Ganti nomor WhatsApp berikut dengan nomor kamu
const NOMOR_WHATSAPP = "628525963668"; //Pastikan nomor diawali dengan kode negara tanpa tanda "+" (cth. 085-XXX-XXX-XXX diubah mendaji 6285-XXX-XXX-XXX)
const ewc_hidden = document.querySelectorAll(".ewc_hidden");
const ewc_button = document.querySelectorAll(".ewc_button");
const ewc_audio = new Audio("https://res.cloudinary.com/xviidev/video/upload/v1642074623/whatsapp-web_tqjtgm.mp3");
const ewcShow = () => {
ewc_hidden.forEach((el) => {
el.style.display = "flex";
el.ariaHidden = "false";
});
ewc_audio.play();
setTimeout(() => {
ewc_hidden.forEach((el) => {
el.style.opacity = "1";
});
}, 0);
setTimeout(() => {
document.getElementById("ewChatBubble").style.opacity = "1";
}, 300);
};
const ewcHide = () => {
ewc_hidden.forEach((el) => {
el.style.opacity = "0";
document.getElementById("ewChatBubble").style.opacity = "0";
el.ariaHidden = "true";
});
setTimeout(() => {
ewc_hidden.forEach((el) => {
el.style.display = "none";
});
}, 1000);
};
function ewcOpen() {
if (ewChatBox.style.display == "none") {
ewcShow();
} else {
ewcHide();
}
}
document.querySelectorAll(".ewc_close").forEach((el) => {
el.addEventListener("click", ewcHide);
});
document.querySelectorAll(".ewc_open").forEach((el) => {
el.addEventListener("click", ewcOpen);
});
document.getElementById("ewc_send").addEventListener("click", () => {
window.open(`https://wa.me/${NOMOR_WHATSAPP}?text=${encodeURI( document.getElementById("ewc_message").value )}`);
});
</script> Ganti Nomer Whatsapp yang ada di kode javascript dengan nomer kalian ya sob, setelah itu Simpan
Catatan : ganti bentuk tampilan dan warna tampilan bisa kalian edit di bagian cssnya ya sob
Oke Semoga Sukses Mencoba, Sampai Jumpa..
sc : evetry
Posting Komentar untuk "Cara Membuat Widget Whatsapp Chat di Blog"