Whatsapp Chat Button On Website
ဒါက တော့ Whatsapp Messenger ကိုမိမိ Website မှာအလွယ်တကူ Chatting ပြုလုပ်နိုင်ရန် Pop Up ပုံစံအနေနဲ့ပြုလုပ်ထားတဲ့ Widget လေးဖြစ်ပါတယ်။အောက်မှာပြုလုပ်ပုံအဆင့်ဆင့်ကိုဖော်ပြပေးထားပါတယ်။
- မိမိ blogsite ကို account အရင်ဝင်ပါ
- dashboard ထဲက Theme ကိုနှိပ်
- Customize ဘေးက 🔻 ကိုနှိပ်
- Edit HTML ကိုနှိပ်
]]></b:skin> ကိုရှာ တွေ့ပြီဆိုရင်အောက်က CSS code တွေကိုအဲဒီ ]]></b:skin> အပေါ်ကနေကပ်လျှက်ထည့်ပေးပါ။
(or)အဲလိုမှမထည့်ချင်ဘူးဆိုရင်လဲအဲဒီ ]]></b:skin> အောက်က နေ <style> - အောက်က CSS Code ကိုထည့် -</style> ထည့်လဲရပါတယ်
/* --- www.khinmaungwin.xyz WhatsApp Button CSS --- */ :root {--warna-background: #4dc247;--warna-bg-chat: #f0f5fb;--warna-icon: #fff;--warna-text: #505050;--warna-text-alt: #989b9f;--lebar-chatbox: 320px;} .sticky-button{display: flex;align-items: center;justify-content: center;position: fixed;right: 20px;bottom: 76px;width: 45px;height: 45px;background-color: #fefefe;border-radius: 20px;box-shadow: 0 10px 20px 0 rgba(30,30,30,.1);} .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:#4dc247} .sticky-button label svg.svg-2{display:none} .sticky-chat{position:fixed;bottom:70px;right: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 a{color:#fff} .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: 77px;right: 81px;opacity: 1;visibility: visible;}</body> ရှာပါ။တွေ့ ရင် အောက်က code တွေကိုအဲဒီ </body> အပေါ်ကနေထည့်။အောက်ကအဲဒီနေရာတွေမှာပြင်ရေးပေးပါ။
1။ phone=0123456789 ဆိုတဲ့နေရာမှာမိမိ Whatsapp account ဖွင့်ထားတဲ့ phone number ထည့်ပေးပါ။phone number ရှေ့ မှာ country (နိုင်ငံ) code ထည့်ပေးပါ။
<!--[ www.khinmaungwin.xyz WhatsApp Button ]--> <input class='chat-menu hidden' id='offchat-menu' type='checkbox'/> <div class='sticky-button' id='sticky-button'> <label for='offchat-menu'> <svg viewbox='0 0 512 512'><path d='M414.73 97.1A222.14 222.14 0 0 0 256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0 0 29.78 111L32 480l118.25-30.87a223.63 223.63 0 0 0 106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 0 0 414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 0 1-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0 1 71.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 0 1 185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 0 0-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0 0 31.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z'></path></svg></label> </div> <div class='sticky-chat'> <div class='chat-content'> <div class='chat-header'><a href='https://www.khinmaungwin.xyz/search'><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></a> <div class='title'><a href='https://www.khinmaungwin.xyz' target='_new'>You Like Name</a> <span>Welcome to WhatsApp chat</span> </div> </div> <div class='chat-text'> <span>Howdy! How can we help you today?</span> <span class='typing'><svg viewbox='0 0 512 512'><circle cx='256' cy='256' r='48'/><circle cx='416' cy='256' r='48'/><circle cx='96' cy='256' r='48'/></svg></span> </div> </div> <a class='chat-button' href='https://api.whatsapp.com/send/?phone=0123456789' rel='nofollow noreferrer' target='_blank'><span>Type here...</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'/></svg></a> </div>
