Como agregar WhatsApp a tu blog o sitio web. ~ Blogueandomiblog

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

.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/AVvXsEgXQzhUE-4I8ZctNekhntPsR88GpUlufHlhM_k6BV2GiWco3da8ZFcK7PDkv2xwfnwG0ez_C1JSH_c3WwpF597P3k0XSIRBtmk5Exc-vcd0p9HhpDB2igNWHWcxG6S0oSh-LZ8OcI31rPFP/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>

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

Recent Posts

Labels

Como agregar WhatsApp a tu blog o sitio web.

No hay comentarios:

Publicar un comentario

Trending

Social Media