WhatsApp chat

In this page you can see an example of a simple WhatsApp chat box using the “text widget” with simple HTML, CSS and JavaScript. This example is to demonstrate how the Ultimate floating widgets can elevate the power of any WordPress widget to actionable floating widgets.

Note: This is just an example and WhatsApp chat does not come along with the widget. In case you need to try the same on your site, you can use the code below in the text widget. Also note that support does not cover enhancements with this code or any code or widget added to Ultimate floating widgets.

<h3>Hello</h3><br/>

<p>For any issues or queries, please contact me on WhatsApp.</p>
<p>I'm available from 10 AM to 6 PM during weekdays.</p>


<a id="WA_profileLink" href="https://web.whatsapp.com/send?phone=+919652126360" target="_blank">
<img src="https://www.aakashweb.com/resources/images/profile/aakash-chakravarthy-2018-thumb.jpg">
<p id="WA_userName">Aakash Chakravarthy</p>
<p>Support</p></a>

<div id="WA_chatWrap">
<input type="text" id="WA_input" style="width:100%" placeholder="Type something ..."/><a href="https://web.whatsapp.com/send?phone=+919652126360&text=Hi%2C+I+would+like+to+discuss+on+this+plugin" id="WA_sendBtn" target="_blank"><i class="fa fa-paper-plane"></i></a>
</div>

<style>
#WA_profileLink{
    background: honeydew;
    display: block;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 2px -2px #00000085;
    color: #009688;
}
#WA_profileLink img{
    float: left;
    border-radius: 50%;
    margin: 0 15px 0 0;
    width: 64px;
}
#WA_profileLink p{
    margin: 0;
}
#WA_userName{
    font-size: 20px;
}
#WA_chatWrap{
    display: flex;
    margin-top: 20px;
}
#WA_sendBtn{
    background: #00e676;
    color: #fff;
    width: 45px;
    height: 45px;
    display: inline-block;
    text-align: center;
    line-height: 45px;
}
</style>

<script>
(function($) {
  $(document).ready(function(){
    $sendBtn = $('#WA_sendBtn');
    $('#WA_input').on('keyup', function(){
        var newLink = 'https://web.whatsapp.com/send?phone=+919652126360&text=' + $(this).val();
        $sendBtn.attr('href', newLink);
    });
  });
})(jQuery);
</script>