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



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



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.

Related post

Comentarios

14 comentarios:

  1. Hola, no me sale el botón de enviar. Ayudaaa!

    ResponderEliminar
  2. Saludos, muy buen aporte. Muchas gracias. Lo intenté en blogger y se ve bien en la versión web pero no se ve en la versión móvil.

    ResponderEliminar
  3. Hola se puede hacer uno pero quedando de lado izquierdo y con la plataforma de telegram?

    ResponderEliminar
    Respuestas
    1. Hola, tomare en cuenta su sugerencia, algún momento lo intentare

      Saludos

      Eliminar
  4. Cómo hago para poner dicho código en la versión amp de algunas de tus plantillas sin que arroje ningún error, ya que este mismo esta en un script personalizado que no lo permite en amp.

    ResponderEliminar
  5. Una pregunta si se quiere cambiar de posición es decir por defecto esta abajo de lado derecho, pero si se desea mover de lado inferior izquierdo que cambios se deben hacer?

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, con respecto a su pregunta debe realizar lo siguiente:

      Busque el siguiente código:

      a.adb-whatsapp

      notara que existe el siguiente codigo:

      right: 89px;

      Elimine right y cámbielo por left

      Ahora debe también buscar el siguiente código:

      #css-whatsapp

      notara que existe un código así: right: 30px;

      elimine right y remplácelo por left

      Eso es todo

      Saludos

      Eliminar
  6. todos los post sobre este tema abarcan lo mismo pero ninguno explica como hacer que se vea donde mas importa, en la version para moviles , de nada sirve mucho tener el boton de whatsaa en una pc si donde todos tenemos whatsapp es en los telefonos y ahi nunca aparece el boton de whtsapp,saluos

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su comentario, le comento que el boton de WhatsApp funciona perfectamente en el modo movil, tal vez no se le muestra el botón de WhatsApp en su plantilla movil por que no tiene habilitado la plantilla movil en su plantilla, le sugiero habilitar en Tema --> Configuración para dispositivos moviles.
      Saludos

      Eliminar
  7. Saludos amigo, no se enuentra habilitado para formato amp.

    ResponderEliminar
  8. Respuestas
    1. Hola, gracias por escribir, que es lo que le muestra en su blog

      Eliminar