Add WhatsApp Contact Gadget on Your Blogger or Website
- February 09, 2019
- By Pawan Blogs
- 0 Comments
Create WhatsApp contact gadget HTML for blogger or website.
Enter your WhatsApp mobile number with country code where you want to receive your whatsapp messages.
Enter Mobile Number With Country Code
<link href="//fonts.googleapis.com/css?family=Kenia" rel="stylesheet" type="text/css" />
<center>
<div class="inner" style="aling:center;background: #fff; border-color: #d5dee0; border-radius: 30px; border: 2px; box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); height: 400px; position: relative; top:1px; bottom:15px; width:280px;"><lable style="color: black; font-size: 20px;">Contact us <br />-------------------</lable><br/><lable style="color: green; font-size: 30px; font: 20px kenia; margin-top: -5px;">
WhatsApp </lable><br/><label style="background: #fff; font: 15px kenia; margin-left: -40px; top:8px; position: relative;">Enter Your Message</label><br /><input id="message" style=" outline: none; border-radius: 20px; border: 2px solid #303030; box-shadow: 0 0 10px rgba(0,0,0,.4); box-sizing: border-box; display: inline-block; height: 70px; padding: 0px 10px; width: 200px;" type="text" /><br/><lable style="color: darkgrey; top:6px; position:relative; font: 12px serif;">Message Sent To </lable><br /><input onclick="javascript: window.open('https://api.whatsapp.com/send?phone=&text=' + document.getElementById('message').value);" style=" outline: none; margin-top:60px; background: #4CAF50; border-radius: 20px; border: 2px solid #fff; box-shadow: 0 0 10px green; color: white; font: 20px serif; padding: 6px 15px;" target="_blank" type="submit" value="Send" /><br/><a href="https://www.viraltrands.com" title="Created By Pawan Negi" rel="dofollow" style=" margin-top:40px;display: inline-block!important; font-size: 45px!important; color: #fff!important; visibility: visible!important; opacity: .5!important;">PawanBlogs</a>
</div>
</center>
<center>
<div class="inner" style="aling:center;background: #fff; border-color: #d5dee0; border-radius: 30px; border: 2px; box-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); height: 400px; position: relative; top:1px; bottom:15px; width:280px;"><lable style="color: black; font-size: 20px;">Contact us <br />-------------------</lable><br/><lable style="color: green; font-size: 30px; font: 20px kenia; margin-top: -5px;">
WhatsApp </lable><br/><label style="background: #fff; font: 15px kenia; margin-left: -40px; top:8px; position: relative;">Enter Your Message</label><br /><input id="message" style=" outline: none; border-radius: 20px; border: 2px solid #303030; box-shadow: 0 0 10px rgba(0,0,0,.4); box-sizing: border-box; display: inline-block; height: 70px; padding: 0px 10px; width: 200px;" type="text" /><br/><lable style="color: darkgrey; top:6px; position:relative; font: 12px serif;">Message Sent To </lable><br /><input onclick="javascript: window.open('https://api.whatsapp.com/send?phone=&text=' + document.getElementById('message').value);" style=" outline: none; margin-top:60px; background: #4CAF50; border-radius: 20px; border: 2px solid #fff; box-shadow: 0 0 10px green; color: white; font: 20px serif; padding: 6px 15px;" target="_blank" type="submit" value="Send" /><br/><a href="https://www.viraltrands.com" title="Created By Pawan Negi" rel="dofollow" style=" margin-top:40px;display: inline-block!important; font-size: 45px!important; color: #fff!important; visibility: visible!important; opacity: .5!important;">PawanBlogs</a>
</div>
</center>
Put it on your website or blogger sidebar or contact us page.
- Copy the generated HTML,
- Back to your blogger,
- Clicks on the layout,
- Add the HTML/Javascript gadget and paste generated HTML,
Now the gadget in your website sidebar.
That makes your website or blogger more responsive and helps the viewer to contact you, its SEO friendly Design, its created by Pawan Negi.
![[Solution] Youtube Monetization Disabled Due to Community Guidelines Strike](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxqxz5Df0yQQ2l9jAUg5wvjWyfvTVY39Gw-kR9kQK2zO-TKeIgwZGnq7V80VmKGLd7BcztlRHiNy4dlfPi4mIm7uN22xPQgMx_sh9gh5j3R2WLe9iRR_XfnrSq0PgZA2A4hjeUGsR8Qxcl/s72-c/account.PNG)