Como incluir WhatsApp en mi blog

WhatsApp es una de las mayoras formas de comunicación que usamos para comunicarnos con nuestros familiares y amigos.

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

.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>

<h3>Genial</h3>

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

</div>

</div>

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

</div>

</a>

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

<span>

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

Hola 👋

<br/>

Cómo puedo ayudarte?

<br/>

</span></div>

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

</div>

<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: "";

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: "";

left: 0px;

top: 0px;

height: 100%;

width: 100%;

z-index: 0;

opacity: 0.08;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtNxoKxyrBPLBcqz5PH-rQ3aWujbKFrJ0JWAt5HdROP7CXv-QRyvF2eS2Hy2CFzDW_e0sBoMRHPGgRqaKneoWd0JobaTfWOS1Nk8lHw3DE6pyTc3Bw5EvgUnV6X5fj73cFrCqpaEBxiX7z/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: "";

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>

//<![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>

Whatsapp'>https://milyunacosasutiles.blogspot.com/</div></div>

Modificamos los siguientes parámetros:

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

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

Para cambiar la url de nuestro blog

Para cambiar la url de nuestro blog buscamos:

Whatsapp'>https://milyunacosasutiles.blogspot.com/</div></div>

Modificamos lo marcado en naranja por las url de nuestro blog

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 identificador de nuestro país delante, pero sin el +

Enlace<jjjjj