Como agregar WhatsApp a tu blog o sitio web.

Hoy vamos a mostraros como podemos insertar WhatsApp, en nuestro blog o sitio web.

Todos sabemos que WhatsApp es una de las redes sociales más usadas de todo el mundo.

Esta aplicación está indicada para enviar tanto mensajes de texto como de voz pero además  podemos enviar fotografías y archivos .

Otra de las funciones que dispone es realizar videollamadas con otros usuarios.

Con este Widget que mostramos hoy podemos comunicarnos con nuestros visitantes de forma sencilla.

Instalar WhatsApp en nuestro blog

Los primero que tenemos que hacer es ir a Blogger a Tema > Editar HTML

Con los botones Ctrl + F buscamos </body>

Justo encima pegamos el siguiente código:

Código

<div class='hide' id='css-whatsapp'>

<div class='adb-header green'>

<div class='adb-home-chat'>

<div class='my-info-chat-2'>

<div class='box-6'>

<svg class='WhatsApp' height='20px' style='enable-background:new 0 0 64 64;' version='1.1' viewBox='0 0 64 64' width='20px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><style type='text/css'>

 .st0{fill:#4267B2;}

 .st1{fill:url(#SVGID_1_);}

 .st2{fill:#FFFFFF;}

 .st3{fill:#C2191E;}

 .st4{fill:#1DA1F3;}

 .st5{fill:#FEFE00;}

 .st6{fill:#25D366;stroke:#FFFFFF;stroke-width:5;stroke-miterlimit:10;}

 .st7{fill:#CB2027;}

 .st8{fill:#0077B5;}

 .st9{fill:url(#SVGID_2_);}

 .st10{fill:url(#SVGID_3_);}

 .st11{fill:#FF004F;}

 .st12{fill:#00F7EF;}

 .st13{fill:#5181B8;}

 .st14{fill:#395976;}

 .st15{fill:#F58220;}

 .st16{fill:#E6162D;}

 .st17{fill:#FF9933;}

</style><g id='WA'><g><path class='st6' d='M5,59l12-3.3c4.3,2.7,9.5,4.3,15,4.3c15.5,0,28-12.5,28-28S47.5,4,32,4S4,16.5,4,32c0,5.5,1.6,10.7,4.3,15    L5,59z'/><path class='st2' d='M45.9,39.6c-1.9,4-5.4,4.5-5.4,4.5c-3,0.6-6.8-0.7-9.8-2.1c-4.3-2-8-5.2-10.5-9.3c-1.1-1.9-2.1-4.1-2.2-6.2    c0,0-0.4-3.5,3-6.3c0.3-0.2,0.6-0.3,1-0.3l1.5,0c0.6,0,1.2,0.4,1.4,1l2.3,5.6c0.2,0.6,0.1,1.2-0.3,1.7l-1.5,1.6    c-0.5,0.5-0.5,1.2-0.2,1.8c0.1,0.2,0.3,0.5,0.6,0.8c1.8,2.4,4.2,4.2,6.9,5.4c0.4,0.2,0.7,0.3,1,0.4c0.7,0.2,1.3-0.1,1.7-0.6    l1.2-1.8c0.3-0.5,0.9-0.8,1.5-0.7l6,0.9c0.6,0.1,1.1,0.6,1.3,1.2l0.4,1.5C46,38.9,46,39.3,45.9,39.6z'/></g></g></svg>

</div>

<div class='box-7'>

<h3>Genial</h3>

<span class='adb-base-b-2'>&#161;Estamos aquí para ayudarte! No dudes en preguntar. Haga clic a continuación para iniciar el chat.</span>

</div>

</div>

</div>

<div class='get-new hide'>

<div class='adb-avatar'><img src='https://lh6.googleusercontent.com/-cz0L2jo7OVE/AAAAAAAAAAI/AAAAAAAAH4k/tFG3CU2lyrY/s80-c/photo.jpg'/></div>

     <div id='box-w-r'/>

     <div id='box-label-w'/>

   </div>

</div>

<div class='box-chat'>

<a class='adb-dual' href='javascript:void' title='Chat Whatsapp'>

<div class='my-info-chat'>

<div class='adb-avatar'><img src='https://lh6.googleusercontent.com/-cz0L2jo7OVE/AAAAAAAAAAI/AAAAAAAAH4k/tFG3CU2lyrY/s80-c/photo.jpg'/></div>

<span class='adb-base-b'>Cobi Vaillo</span>

<span class='adb-base'>CEO</span>

</div>

<span class='number-whatsapp'>593999999999</span>

</a>

<div class='mensaje-whatsapp'>https://milyunacosasutiles.blogspot.com/</div></div>

<div class='caja-chat hide'>

<div class='trix-one'>

<span>

<div class='fr-user'>Cobi Vaillo</div>

Hola 👋

<br/>

Cómo puedo ayudarte?

<br/>

</span></div>

<div class='mensaje-whatsapp'><textarea id='chat-input' maxlength='400' placeholder='Escriba su mensaje' row='1'/>

<a href='javascript:void;' id='send-to-whatsapp'>Enviar</a></div></div>

<div id='go-number'/><a class='close-chat' href='javascript:void'>&#215;</a>

</div>

<a class='adb-whatsapp' href='javascript:void' title='Chat Whastapp'><i class='fa fa-whatsapp'/></a>

<style>

/* CSS Whatsapp Chat */

#css-whatsapp{position:fixed;background:#fff;width:350px;border-radius:10px;box-shadow:0 1px 15px rgba(32,33,36,.28);bottom:90px;right:30px;overflow:hidden;z-index:99;animation-name:showchat;animation-duration:0.4s;transform:scale(1)}

a.adb-whatsapp {

    background: #089d4b;

    color: #fff;

    position: fixed;

    z-index: 98;

    bottom: 29px;

    right: 89px;

    font-size: 15px;

    padding: 18px 20px;

    border-radius: 30px;

    box-shadow: 0 1px 15px rgba(32,33,36,.28);

    box-shadow: 0 2px 6px 4px rgba(59, 184, 78, 0.24);

    -webkit-box-shadow: 0 2px 6px 4px rgba(59, 184, 78, 0.24);

    -moz-box-shadow: 0 2px 6px 4px rgba(59, 184, 78, 0.24);

}

a.adb-whatsapp i{transform:scale(1.2);margin:0 0 0 0}

@media (max-width: 768px){

a.adb-whatsapp {

    right: 26px;

}

}

.adb-header {

    color: #fff;

    padding: 20px;

}

.adb-header h3 {

    margin: 0 0 10px;

    font-size: 14px;

}

.adb-header p{font-size:14px;line-height:1.7;margin:0}

.adb-avatar{position:relative}.adb-avatar img{border-radius:100%;width:50px;float:left;margin:0 10px 0 0}

.adb-avatar::before {

    content: &quot;&quot;;

    bottom: 0px;

    right: 0px;

    width: 10px;

    height: 10px;

    box-sizing: border-box;

    background-color: rgb(74, 213, 4);

    display: block;

    position: absolute;

    z-index: 1;

    border-radius: 50%;

    border-width: 2px;

    border-style: solid;

    border-color: rgb(255, 255, 255);

    border-image: initial;

    top: 39px;

    left: 36px;

}

a.adb-dual{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:0.6s}

a.adb-dual:hover{background-color: rgb(230, 221, 212);}

.adb-dual {

    background-color: #fff;

    position: relative;

    max-height: 382px;

    padding: 20px 20px 20px 10px;

    overflow: auto;

}

.my-info-chat-2 span {

    display: block;

}

.my-info-chat span{display:block}

span.adb-base{font-size:12px;color:#333;}

span.adb-base-2{font-size:12px;color:#888;}

#box-label-w{font-size:12px;color:#888}

span.adb-base-b{margin:5px 0 0;font-size:15px;font-weight:700;color: #333;}

span.adb-base-b-2{margin:5px 0 0;font-size:12px;font-weight:200;color:#fff;}

#box-w-r{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}

#box-label-w,#box-w-r{color:#fff;}

span.number-whatsapp{display:none}

.mensaje-whatsapp{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}

textarea#chat-input{border:none;width:80%;height:40px;outline:none;resize:none}

a#send-to-whatsapp{color:#555;margin:3px 0 0 7px;font-weight:700;padding:10px 3px;background:#eee;border-radius:10px}

.trix-one {

    background-color: rgb(230, 221, 212);

    padding: 30px;

    position: relative;

    overflow: auto;

}

.trix-one::before {

    display: block;

    position: absolute;

    content: &quot;&quot;;

    left: 0px;

    top: 0px;

    height: 100%;

    width: 100%;

    z-index: 0;

    opacity: 0.08;

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJ-cBcOU7xeYhJRKbgpFCxfNcjO4iRQHeFs9KDbQ8d6N3B0BynHFm-KjXKeGrz2iTYoThZwB2rePuTuNtkh3uItsZBQRBT50NUK1cnU5_Cb-9vikIP1Iwi4JV3J1w47hTEgdCyaBkXSuJ/s1600/whatsapp.webp);

}

.trix-one span {

    color: #333;

    font-size: 14.2px;

    line-height: 2;

    display: inline-block;

    max-width: calc(100% - 66px);

    padding: 7px 14px 6px;

    box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 24px 0px;

    flex-direction: column;

    background-color: rgb(255, 255, 255);

    transform: translate3d(0px, 0px, 0px);

    opacity: 1;

    pointer-events: all;

    visibility: visible;

    touch-action: auto;

    bottom: 0px;

    right: 0px;

    left: auto;

    margin-right: 20px;

    border-radius: 0px 10px 9px;

    transition: opacity 0.3s ease 0s, margin 0.3s ease 0s, visibility 0.3s ease 0s;

}

.trix-one span::before {

    position: absolute;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAmCAMAAADp2asXAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACQUExURUxpccPDw9ra2m9vbwAAAAAAADExMf///wAAABoaGk9PT7q6uqurqwsLCycnJz4+PtDQ0JycnIyMjPf3915eXvz8/E9PT/39/RMTE4CAgAAAAJqamv////////r6+u/v7yUlJeXl5f///5ycnOXl5XNzc/Hx8f///xUVFf///+zs7P///+bm5gAAAM7Ozv///2fVensAAAAvdFJOUwCow1cBCCnqAhNAnY0WIDW2f2/hSeo99g1lBYT87vDXG8/6d8oL4sgM5szrkgl660OiZwAAAHRJREFUKM/ty7cSggAABNFVUQFzwizmjPz/39k4YuFWtm55bw7eHR6ny63+alnswT3/rIDzUSC7CrAziPYCJCsB+gbVkgDtVIDh+DsE9OTBpCtAbSBAZSEQNgWIygJ0RgJMDWYNAdYbAeKtAHODlkHIv997AkLqIVOXVU84AAAAAElFTkSuQmCC);

    background-size: contain;

    content: &quot;&quot;;

    top: 0px;

    left: -12px;

    width: 12px;

    height: 19px;

    background-position: 50% 50%;

    background-repeat: no-repeat;

}

.caja-chat .mensaje-whatsapp{display:flex}#go-number{display:none}

a.close-chat {

    position: absolute;

    top: 5px;

    right: 15px;

    color: #000;

    font-size: 23px;

}

@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}

@media screen and (max-width:480px){#css-whatsapp{width:auto;left:5%;right:5%;font-size:80%}}

.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

.show{display:block;animation-name:showhide;animation-duration:0.1s;transform:scale(1);opacity:1}

.my-info-chat-2 {

    display: flex;

}

.my-info-chat-2 .box-6 {

    margin-right: 20px;

}

.my-info-chat-2 .box-7 {

    width: 250px;

    line-height: 1.6;

}

.fr-user {

    font-size: 11px;

    color: rgba(0, 0, 0, 0.4);

}

.red {

    background-color: #f44336;

}

.pink {

    background-color: #e91e63;

}

.purple {

    background-color: #9c27b0;

}

.deep-purple {

    background-color: #673ab7;

}

.indigo {

    background-color: #3f51b5;

}

.blue {

    background-color: #2196f3;

}

.light-blue {

    background-color: #03a9f4;

}

.cyan {

    background-color: #00bcd4;

}

.teal {

    background-color: #009688;

}

.green {

    background-color: #4caf50;

}

.light-green {

    background-color: #8bc34a;

}

.lime {

    background-color: #cddc39;

}

.yellow {

    background-color: #ffeb3b;

}

.amber {

    background-color: #ffc107;

}

.orange {

    background-color: #ff9800;

}

.deep-orange {

    background-color: #ff5722;

}

.brown {

    background-color: #795548;

}

.grey {

    background-color: #9e9e9e;

}

.grey-darken-4 {

    background-color: #212121;

}

.black {

    background-color: #000000;

}

.blue-grey {

    background-color: #607d8b;

}  

</style>

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> 

<script type='text/javascript'>

//<![CDATA[

$(document).on("click","#send-to-whatsapp",function(){var a=document.getElementById("chat-input");if(""!=a.value){var b=$("#go-number").text(),c=document.getElementById("chat-input").value,d="https://web.whatsapp.com/send",e=b,f="&text="+c;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))var d="whatsapp://send";var g=d+"?phone="+e+f;window.open(g, '_blank')}}),$(document).on("click",".adb-dual",function(){document.getElementById("go-number").innerHTML=$(this).children(".number-whatsapp").text(),$(".caja-chat,.get-new").addClass("show").removeClass("hide"),$(".box-chat,.adb-home-chat").addClass("hide").removeClass("show"),document.getElementById("box-w-r").innerHTML=$(this).children(".my-info-chat").children(".adb-base-b").text(),document.getElementById("box-label-w").innerHTML=$(this).children(".my-info-chat").children(".adb-base").text()}),$(document).on("click",".close-chat",function(){$("#css-whatsapp").addClass("hide").removeClass("show")}),$(document).on("click",".adb-whatsapp",function(){$("#css-whatsapp").addClass("show").removeClass("hide")});

//]]>

</script>  

Modificamos los siguientes parámetros:

Para cambiar el color de nuestro gadget buscamos el siguiente código marcado en rojo.

<div class='adb-header green'> 

Cambiamos el color green por el color que más nos guste

Para cambiar la imagen

Modificamos la Url  marcados en azul por la Url de nuestra imagen

https://lh6.googleusercontent.com/-cz0L2jo7OVE/AAAAAAAAAAI/AAAAAAAAH4k/tFG3CU2lyrY/s80-c/photo.jpg

Para cambiar el nombre 

Buscamos el siguiente código y modificamos lo marcado en morado por nuestro nombre

<span class='adb-base-b'>Cobi Vaillo</span>

Para cambiar el número de teléfono

Buscamos el siguiente código marcado en verde y ponemos nuestro número de teléfono con el indentificador de nuestro pais delante pero sin el +

<span class='number-whatsapp'>343999999999</span>