Chat de Whatsapp: agregue el widget de Whatsapp a su sitio web

Algunas preguntas como:

• ¿Cómo puedo agregar un gadget de WhatsApp a mi sitio web?
• ¿Cómo agregar un widget de WhatsApp a mi sitio web?
• ¿Cómo agregar un widget de WhatsApp a mi blog de Blogger?
• ¿Se puede agregar un widget de WhatsApp a mi sitio web?

En respuesta a todas estas preguntas les respondo que si es posible hacerlo, si utilizas Blogger o una plataforma diferente, puedes agregar de una forma fácil y segura un gadget de WhatsApp a tu sitio web o blog de Blogger con unos sencillos pasos que hará que tus visitante te contacten directamente con este magnifico gadget de WhatsApp incorporado en tu blog.

Nota: Este tutorial va dedicado a todos los usuarios que utilizan blogs de Blogger como una ayuda tecnológica, gracias a ustedes por seguir mi blog.

¡WhatsApp es uno de los mensajeros más utilizados, y muchos de mis clientes lo usan para que el usuario que visita su sitio web se comunique de forma inmediata!

WhatsApp Chat widget para sitio web

Demo Clic aquí

Desktop

Movil

¿Por qué necesito WhatsApp Chat?

Comunicación más rápida con el cliente. Mejor conversión

Sea rápido y sencillo de contactar

Los usuarios pueden ponerse en contacto con usted de manera fácil e inmediata y recibir respuestas

Mejorar la calidad del servicio al cliente.

Responde y resuelve problemas más rápido, deja más clientes satisfechos

Aumentar ventas a través de consultoría

Proporcione información útil sobre sus ofertas y convenza a más personas a comprar

¿Qué hace que WhatsApp Chat sea especial?

La forma más fácil para que tus visitantes se pongan en contacto contigo

El widget WhatsApp de Ayudadeblogger es la forma de comunicación más sencilla y nativa para sus visitantes. Le permite incrustar un mensajero popular y bien utilizado en su sitio web o blog y establecer una herramienta de comunicación fácil para sus clientes. Podrá mantenerse en contacto con su audiencia en cualquier momento y en cualquier lugar, respondiendo desde cualquier dispositivo.   

Cómo agregar WhatsApp Chat a su blog de Blogger

Video Tutorial

1 Abrir Blogger.com

2 Un clic en Tema

3 Un clic Editar HTML

4 Busque el siguiente código

</body>

5 Inserte las siguientes lineas de código justo arriba del código que encontró

<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'>Luis Chávez</span>

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

</div>

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

</a>

<div class='mensaje-whatsapp'>Ayudadeblogger.com</div></div>

<div class='caja-chat hide'>

<div class='trix-one'>

<span>

<div class='fr-user'>Luis Chávez</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/AVvXsEifxGMEFHGsk-A8cfb1hBVEGXabCYgFsTt_5_OkL3xYxUw1_fyEo3x2db5Pc8INwR4pq9jrt-y_iO_71n6KoHe697wzNQcqboJwQhElWoNpQGuNM3cirEDa8j7HuCpVIhjL5dSXy2-CrvaQ/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>  

Realice los siguientes cambios:

- Cambiar el color: Busque la siguiente linea de código

<div class='adb-header green'> 

Elimine el código que esta marcado de color negro green y remplacelo por cualquiera de los siguientes nombres:

• red
• pink
• purple
• deep-purple
• indigo
• blue
• light-blue
• cyan
• teal
• green
• light-green
• lime
• yellow
• amber
• orange
• deep-orange
• brown
• grey
• grey-darken-4
• black
• blue-grey

- Cambiar la imagen: Elimine las dos URLs que estan marcados color negro, por una URL de una imagen de perfil

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

- Cambiar el nombre y el numero de teléfono celular: Busque las siguientes lineas de código

<span class='adb-base-b'>Luis Chávez</span>

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

</div>

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

Elimine las palabras que están marcadas de color negro, ademas elimine el número de teléfono que esta marcado de color negro y remplacelo por su número teléfono el mismo debe tener su código de área sin el símbolo +

Por ejemplo: en Ecuador el código de área es 593 seguido del numero de teléfono

- Cambiar el nombre y apellido: busque el siguiente código

<div class='fr-user'>Luis Chávez</div>

Elimine el nombre que dice Luis Chávez y agregue su nombre y apellido

6 Un clic en Guardar

Es momento de ver nuestro nuevo gadget de WhatsApp agregado en nuestro blog de Blogger

Cómo agregar WhatsApp Chat a un sitio web

Siga las mismas instrucciones a partir del paso 4

Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no dude en escribir

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Chat de WhatsappComoWidgets para BloggerWidgets y Plugins

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.