CARA MEMBUAT WIDGET TOMBOL CHAT WHATSAPP KEREN UNTUK BLOG !!! GRATIS DAN SEMUA PASTI BISA

 

CARA MEMBUAT WIDGET TOMBOL CHAT WHATSAPP KEREN UNTUK BLOG !!!  

GRATIS DAN SEMUA PASTI BISA

Hi bloger...buat kamu yang ingin tampilan Blog mu terlihat menarik dan keren pasti tertarik nih membuat widget ini untuk melengkapi tampilan dan fungsi blog kalian. 

dengan adanya widget ini tentunya akan mempermudah kalian untuk berkomunukasi atau berinteraksi dengan pengunjung dan pastinya apabila blog atau website kalian di peruntukkan untuk bisnis online pastinya ini akan membuat kamu lebih fast responsif terhadap layanan kepada pelanggan.

untuk itu pada Article ini saya akan share kepada bloger semua cara mendapatkan Scriptnya sekaligus pemasangannya pada halaman HTML gampang kok gak perlu pusing asal ikutin aja step by stepnya pada artikel ini.

berikut caranya : 

1. Kunjungi situs web Delight chat dengan mengklik link ini :

https://www.delightchat.io/whatsapp-chat-button-widget

2. Pada halaman ini silahkan kamu masukan nomer handphone, atur bentuk, warna untuk icon whatsapp yang akan tampil, serta masukan kata sambutan. lalu klik tombol Generate Whatsapp Button, lalu klik copy to clipboard jika inging menggunakannya

simpanlah scrip widget anda di wordpad atau di ms word terserah anda agar jika anda suatu saat ingin merubah kata sambutan atau no wa bisa di gunakan lagi. 

Di bawah ini adalah script dari widget yang akan kita tempel di Blog, selanjutnya jika ingin di gunakan untuk nama, foto, greeting, no hp silahkan ganti text yang saya beri warna merah

<script async src='https://d2mpatx37cqexb.cloudfront.net/delightchat-whatsapp-widget/embeds/embed.min.js'></script>
<script>
var wa_btnSetting = {"btnColor":"#9316c0","ctaText":"Silahkan Hubungi Kami","cornerRadius":"30","marginBottom":20,"marginLeft":20,"marginRight":20,"btnPosition":"right","whatsAppNumber":"6282174048866","welcomeMessage":"Hi, terima kasih sudah menghubungi kami, ada yang bisa kami bantu?","zIndex":999999,"btnColorScheme":"light"};
window.onload = () => {
_waEmbed(wa_btnSetting);
};
</script>


3. Lalu scroll lagi ke bawah anda akan mendapatkan lagi halaman Generate Whats App Widget

 2. pada halaman ini silahkan masukan nama dan atur wana serta pesan pada widget terlebih dahulu (lihat tanda panah pada gambar di bawah) dan settingannya akan dapat anda lihat pada chat widget preview di atasnya.

3. anda juga dapat menambahkan foto atau logo menggunakan link agar widget anda terkesan lebih menarik

untuk mendapatkan link foto atau logo langkah langkahnya sebagai berikut :

3a. Silahkan anda masuk ke Dashboar blog anda lalu klik Posts ----> New post

3b. pada halaman new post klik pada icon Insert Image

3c. pada bagian add image uload klik Choose File

3d. Silahkan pilih foto atau logo dari drive komputer anda lalu klik open

3e. kita kembali ke tampilan add image disini silahkan di klik foto atau akan di gunakan lalu click select

3f. pada halaman silahkan klik dan drag foto untuk di kecilkan.

3g. setelah gambar mengecil silahkan klik pada icon pencil di sudut kiri atas untu mengubah tampilan halaman 

3h. Pilihlah  HTML view untuk mendapatkan script HTML foto

3i. salinlah script HTML mulai dari https:// sampai ke nama file foto. 

contoh yang harus di salin lihat script di bawah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzfBZ_DNm3gHpZTaXNMS-JI9mvHGXJrIaa2feChyphenhyphena7NSxOMyFSD8uhdV9AmnstMjjMT0dOOsWMjZgKqK6pHfJm0Bzhdeh0CZSLchkVaghgJb2HW9EkQR89qCKoBkqlg7kxpOZmPEO4YLKjT0YLrJWU20uIACBzPYZoaE9P4SKIeac_1pDBDGQrJAzB0U/s2080/gunawan%20jas.png"

3j. Tempelkan Cript yang sudah kita copy pada kolom Brand logo URL

3k. Silahkan atur Greeting text dan lainnya sesuai selesa anda :

Sampai disini kita sudah dapat melihat tampilan Chat widget yang menampilkan foto pribadi

3l. Silahkan klik generate untuk mendapatkan script yang akan kita gunakan di blog lalu klik copy to clipboard

simpanlah scrip widget anda di wordpad atau di ms word terserah anda agar jika anda suatu saat ingin merubah kata sambutan atau no wa bisa di gunakan lagi. 

Di bawah ini adalah script dari widget yang akan kita tempel di Blog, selanjutnya jika ingin di gunakan untuk nama, foto, greeting, no hp silahkan ganti text yang saya beri warna merah

Copy this code and paste before the </body> tag on every page of your website.

<script async src='https://d2mpatx37cqexb.cloudfront.net/delightchat-whatsapp-widget/embeds/embed.min.js'></script>
<script>
var wa_btnSetting = {"btnColor":"#9316c0","ctaText":"Silahkan Hubungi Kami","cornerRadius":"30","marginBottom":20,"marginLeft":20,"marginRight":20,"btnPosition":"right","whatsAppNumber":"6282174048866","welcomeMessage":"Hi, terima kasih sudah menghubungi kami, ada yang bisa kami bantu?","zIndex":999999,"btnColorScheme":"light"};
var wa_widgetSetting = {"title":"Togu Freelace","subTitle":"Typically replies in a day","headerBackgroundColor":"#12a30f","headerColorScheme":"light","greetingText":"Hi there! \nHow can I help you?","ctaText":"Start Chat","btnColor":"#1A1A1A","cornerRadius":40,"welcomeMessage":"Hello","btnColorScheme":"light","brandImage":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzfBZ_DNm3gHpZTaXNMS-JI9mvHGXJrIaa2feChyphenhyphena7NSxOMyFSD8uhdV9AmnstMjjMT0dOOsWMjZgKqK6pHfJm0Bzhdeh0CZSLchkVaghgJb2HW9EkQR89qCKoBkqlg7kxpOZmPEO4YLKjT0YLrJWU20uIACBzPYZoaE9P4SKIeac_1pDBDGQrJAzB0U/s2080/gunawan%20jas.png\"","darkHeaderColorScheme":{"title":"#333333","subTitle":"#4F4F4F"}};
window.onload = () => {
_waEmbed(wa_btnSetting, wa_widgetSetting);
};
</script>


Copied!

4. Cara Menempelkan script pada tema blog :

4a. Masuklah ke dashboard blog kamu lalu klik Theme / Tema

4b. klik segitiga kecil pada My Theme (contoh : Lihat gambar)

4c. klik pada edit HTML

4d. klik sembarang di halaman html lalu tekan CTRL + F pada kyboard

4e. Pada Search ketikan </body> lalu enter

4f. tempelkan script whatsapp widget yang sudah kita dapat di atas body :

contoh posisi script seperti gambar di bawah ini :

      

4g. klik icon disket pada pojok kanan atas untuk menyimpan diamkan sesaat untuk proses penyimpanan dan setelah itu silahkan keluar dengan mengklik tanda panah pada pojok kiri atas.

4h. setelah kembali ke halaman dashboard silahkan klik view blog untuk melihat hasilnya

nah widget ini akat terus berada di bawah layar walau pun pengunjung terus menggeser halaman .

---------- Selamat mencoba------------