Cómo insertar un botón de WhatsApp en tu sitio web

Html - Css - Javascript

10/06/2023

Descripción

Tener un botón de WhatsApp en tu sitio web puede ser una excelente manera de facilitar la comunicación con tus visitantes y clientes. A través de este botón, los usuarios podrán enviar mensajes directamente a tu número de WhatsApp con solo hacer clic en él. A continuación, te mostraré cómo insertar este botón en tu sitio web de manera sencilla.

1. Lo primero que necesitas es obtener el código HTML del botón de WhatsApp. Puedes obtenerlo visitando la página oficial de WhatsApp Business API o utilizando servicios de terceros que generan el código automáticamente.

2. Una vez que tengas el código HTML del botón, deberás copiarlo y pegarlo en el lugar donde deseas que aparezca en tu sitio web. Esto puede ser en una barra de navegación, en el pie de página o en cualquier otra sección que consideres adecuada.

3. Asegúrate de incluir el código dentro de las etiquetas HTML correspondientes. Si no estás familiarizado con el código HTML, puedes buscar en línea cómo insertar código HTML en tu plataforma específica, ya sea WordPress, Joomla u otra.

4. Una vez que hayas pegado el código, guarda los cambios y actualiza tu sitio web. Ahora, si todo se ha realizado correctamente, deberías ver el botón de WhatsApp en tu página web.

Recuerda que es importante proporcionar un número de teléfono válido para que los usuarios puedan comunicarse contigo a través de WhatsApp. Además, ten en cuenta que este botón solo funcionará en dispositivos móviles, ya que WhatsApp es una aplicación móvil.

¡Y eso es todo! Ahora tendrás un botón de WhatsApp en tu sitio web para que los visitantes puedan comunicarse contigo de manera rápida y sencilla. Asegúrate de revisar regularmente tus mensajes de WhatsApp y responder a las consultas de manera oportuna para brindar un excelente servicio al cliente."

Estilo CSS

    .cbh-phone{display:block;position:fixed; left: -50px;
  bottom: -55px; visibility:hidden;background-color:transparent;width:200px;height:200px;cursor:pointer;z-index:999;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transition:visibility .5s;-moz-transition:visibility .5s;-o-transition:visibility .5s;transition:visibility .5s}
  .cbh-phone.cbh-show{visibility:visible}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}
  .cbh-phone.cbh-static1{opacity:.6}
  .cbh-phone.cbh-hover1{opacity:1}
  .cbh-ph-circle{width:110px;height:110px;top:40px;left:40px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,.4);opacity:.1;-webkit-animation:cbh-circle-anim 1.2s infinite ease-in-out;-moz-animation:cbh-circle-anim 1.2s infinite ease-in-out;-ms-animation:cbh-circle-anim 1.2s infinite ease-in-out;-o-animation:cbh-circle-anim 1.2s infinite ease-in-out;animation:cbh-circle-anim 1.2s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s}
  .cbh-phone.cbh-active .cbh-ph-circle1{-webkit-animation:cbh-circle-anim 1.1s infinite ease-in-out!important;-moz-animation:cbh-circle-anim 1.1s infinite ease-in-out!important;-ms-animation:cbh-circle-anim 1.1s infinite ease-in-out!important;-o-animation:cbh-circle-anim 1.1s infinite ease-in-out!important;animation:cbh-circle-anim 1.1s infinite ease-in-out!important}
  .cbh-phone.cbh-static .cbh-ph-circle{-webkit-animation:cbh-circle-anim 2.2s infinite ease-in-out!important;-moz-animation:cbh-circle-anim 2.2s infinite ease-in-out!important;-ms-animation:cbh-circle-anim 2.2s infinite ease-in-out!important;-o-animation:cbh-circle-anim 2.2s infinite ease-in-out!important;animation:cbh-circle-anim 2.2s infinite ease-in-out!important}
  .cbh-phone.cbh-hover .cbh-ph-circle{border-color:rgba(0,175,242,1);opacity:.5}
  .cbh-phone.cbh-green.cbh-hover .cbh-ph-circle{border-color:rgba(117,235,80,1);opacity:.5}
  .cbh-phone.cbh-green .cbh-ph-circle{border-color:rgba(0,175,242,1);opacity:.5}
  .cbh-phone.cbh-gray.cbh-hover .cbh-ph-circle{border-color:rgba(204,204,204,1);opacity:.5}
  .cbh-phone.cbh-gray .cbh-ph-circle{border-color:rgba(117,235,80,1);opacity:.5}
  .cbh-ph-circle-fill{width:74px;height:74px;top:58px;left:58px;position:absolute;background-color:#000;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.1;-webkit-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;-o-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;animation:cbh-circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s}
  .cbh-phone.cbh-active .cbh-ph-circle-fill{-webkit-animation:cbh-circle-fill-anim 1.7s infinite ease-in-out!important;-moz-animation:cbh-circle-fill-anim 1.7s infinite ease-in-out!important;-ms-animation:cbh-circle-fill-anim 1.7s infinite ease-in-out!important;-o-animation:cbh-circle-fill-anim 1.7s infinite ease-in-out!important;animation:cbh-circle-fill-anim 1.7s infinite ease-in-out!important}
  .cbh-phone.cbh-static .cbh-ph-circle-fill{-webkit-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out!important;-moz-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out!important;-ms-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out!important;-o-animation:cbh-circle-fill-anim 2.3s infinite ease-in-out!important;animation:cbh-circle-fill-anim 2.3s infinite ease-in-out!important;opacity:0!important}         .cbh-phone.cbh-hover .cbh-ph-circle-fill{background-color:rgba(0,175,242,.5);opacity:.75!important}
  .cbh-phone.cbh-green.cbh-hover .cbh-ph-circle-fill{background-color:rgba(117,235,80,.5);opacity:.75!important}
  .cbh-phone.cbh-green .cbh-ph-circle-fill{background-color:rgba(0,175,242,.5);opacity:.75!important}
  .cbh-phone.cbh-gray.cbh-hover .cbh-ph-circle-fill{background-color:rgba(204,204,204,.5);opacity:.75!important}
  .cbh-phone.cbh-gray .cbh-ph-circle-fill{background-color:rgba(117,235,80,.5);opacity:1!important}
  .cbh-ph-img-circle1{width:50px;height:50px;top:70px;left:70px;position:absolute;background-image:url(https://programaciononline.es/images/wpp-icon.png);background-size: 40px 40px;background-color:rgba(30,30,30,.1);background-position:center center;background-repeat:no-repeat;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:1;-webkit-animation:cbh-circle-img-anim 1s infinite ease-in-out;-moz-animation:cbh-circle-img-anim 1s infinite ease-in-out;-ms-animation:cbh-circle-img-anim 1s infinite ease-in-out;-o-animation:cbh-circle-img-anim 1s infinite ease-in-out;animation:cbh-circle-img-anim 1s infinite ease-in-out}
  .cbh-phone.cbh-active .cbh-ph-img-circle1{-webkit-animation:cbh-circle-img-anim 1s infinite ease-in-out!important;-moz-animation:cbh-circle-img-anim 1s infinite ease-in-out!important;-ms-animation:cbh-circle-img-anim 1s infinite ease-in-out!important;-o-animation:cbh-circle-img-anim 1s infinite ease-in-out!important;animation:cbh-circle-img-anim 1s infinite ease-in-out!important}
  .cbh-phone.cbh-static .cbh-ph-img-circle1{-webkit-animation:cbh-circle-img-anim 0s infinite ease-in-out!important;-moz-animation:cbh-circle-img-anim 0s infinite ease-in-out!important;-ms-animation:cbh-circle-img-anim 0s infinite ease-in-out!important;-o-animation:cbh-circle-img-anim 0s infinite ease-in-out!important;animation:cbh-circle-img-anim 0s infinite ease-in-out!important}
  .cbh-phone.cbh-hover .cbh-ph-img-circle1{background-color:rgba(0,175,242,1)}
  .cbh-phone.cbh-green.cbh-hover .cbh-ph-img-circle1:hover{background-color:rgba(117,235,80,1)}
  .cbh-phone.cbh-green .cbh-ph-img-circle1{background-color:rgba(0,175,242,1)}
  .cbh-phone.cbh-green .cbh-ph-img-circle1{background-color:rgba(0,175,242,1)}
  .cbh-phone.cbh-gray.cbh-hover .cbh-ph-img-circle1{background-color:rgba(204,204,204,1)}
  .cbh-phone.cbh-gray .cbh-ph-img-circle1{background-color:rgba(117,235,80,1)}@-moz-keyframes cbh-circle-anim{0%{-moz-transform:rotate(0deg) scale(0.5) skew(1deg);opacity:.1;-moz-opacity:.1;-webkit-opacity:.1;-o-opacity:.1}30%{-moz-transform:rotate(0deg) scale(.7) skew(1deg);opacity:.5;-moz-opacity:.5;-webkit-opacity:.5;-o-opacity:.5}100%{-moz-transform:rotate(0deg) scale(1) skew(1deg);opacity:.6;-moz-opacity:.6;-webkit-opacity:.6;-o-opacity:.1}}@-webkit-keyframes cbh-circle-anim{0%{-webkit-transform:rotate(0deg) scale(0.5) skew(1deg);-webkit-opacity:.1}30%{-webkit-transform:rotate(0deg) scale(.7) skew(1deg);-webkit-opacity:.5}100%{-webkit-transform:rotate(0deg) scale(1) skew(1deg);-webkit-opacity:.1}}@-o-keyframes cbh-circle-anim{0%{-o-transform:rotate(0deg) kscale(0.5) skew(1deg);-o-opacity:.1}30%{-o-transform:rotate(0deg) scale(.7) skew(1deg);-o-opacity:.5}100%{-o-transform:rotate(0deg) scale(1) skew(1deg);-o-opacity:.1}}@keyframes cbh-circle-anim{0%{transform:rotate(0deg) scale(0.5) skew(1deg);opacity:.1}30%{transform:rotate(0deg) scale(.7) skew(1deg);opacity:.5}100%{transform:rotate(0deg) scale(1) skew(1deg);opacity:.1}}@-moz-keyframes cbh-circle-fill-anim{0%{-moz-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:.2}50%{-moz-transform:rotate(0deg) -moz-scale(1) skew(1deg);opacity:.2}100%{-moz-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:.2}}@-webkit-keyframes cbh-circle-fill-anim{0%{-webkit-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:.2}50%{-webkit-transform:rotate(0deg) scale(1) skew(1deg);opacity:.2}100%{-webkit-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:.2}}@-o-keyframes cbh-circle-fill-anim{0%{-o-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:.2}50%{-o-transform:rotate(0deg) scale(1) skew(1deg);opacity:.2}100%{-o-transform:rotate(0deg) scale(0.7) skew(1deg);opacity:.2}}@keyframes cbh-circle-fill-anim{0%{transform:rotate(0deg) scale(0.7) skew(1deg);opacity:.2}50%{transform:rotate(0deg) scale(1) skew(1deg);opacity:.2}100%{transform:rotate(0deg) scale(0.7) skew(1deg);opacity:.2}}@keyframes cbh-circle-img-anim{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}100%,50%{transform:rotate(0deg) scale(1) skew(1deg)}}@-moz-keyframes cbh-circle-img-anim{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}100%,50%{-moz-transform:rotate(0deg) scale(1) skew(1deg)}}@-webkit-keyframes cbh-circle-img-anim{0%{-webkit-transform:rotate(0deg) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}100%,50%{-webkit-transform:rotate(0deg) scale(1) skew(1deg)}}@-o-keyframes cbh-circle-img-anim{0%{-o-transform:rotate(0deg) scale(1) skew(1deg)}10%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-o-transform:rotate(25deg) scale(1) skew(1deg)}30%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-o-transform:rotate(25deg) scale(1) skew(1deg)}100%,50%{-o-transform:rotate(0deg) scale(1) skew(1deg)}}
  .cbh-ph-img-circle1 {}
  .cbh-phone.cbh-green .cbh-ph-circle {border-color: rgb(0, 242, 164)}
  .cbh-phone.cbh-green .cbh-ph-circle-fill {background-color: rgb(0, 242, 164);}
  .cbh-phone.cbh-green .cbh-ph-img-circle1 {background-color:rgb(46, 203, 113);}
  .kmacb__manager-border {    position: absolute;    width: 75px;    height: 75px;    top: 50%;    left: 50%;    margin-top: -39.5px;    margin-left: -39.5px;    border-radius: 100%;    border: 2px solid #ffe787;    -webkit-animation: kmacb__manager-border-anim 1.5s ease-in-out .5s infinite;    -moz-animation: kmacb__manager-border-anim 1.5s ease-in-out .5s infinite;    -ms-animation: kmacb__manager-border-anim 1.5s ease-in-out .5s infinite;    -o-animation: kmacb__manager-border-anim 1.5s ease-in-out .5s infinite;    animation: kmacb__manager-border-anim 1.5s ease-in-out .5s infinite;    opacity: .8;    transform-origin: center;  }
  .kmacb__manager-fill {    background: #52aff7 center bottom no-repeat;    position: absolute;    width: 75px;    height: 75px;    top: 50%;    left: 50%;    margin-top: -37.5px;    margin-left: -37.5px;    border-radius: 100%;    opacity: .5;    -webkit-animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite;    -moz-animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite;    -ms-animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite;    -o-animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite;    animation: kmacb__manager-fill-anim 1.5s ease-in-out infinite;    transform-origin: center;}
  .kmacb__manager-circle {    background: #52aff7;    position: absolute;    width: 120px;    height: 120px;    top: 50%;    left: 50%;    margin-top: -60px;    margin-left: -60px;    border-radius: 100%;  }

y simplemente crearemos este contenido

<div class="phone-call cbh-phone cbh-green cbh-show  cbh-static" id="clbh_phone_div" >
    <a id="WhatsApp-button" href="https://chat.whatsapp.com/IxwXRhq..." target="_blank" class="phoneJs" title="WhatsApp 360imagem">
        <div class="cbh-ph-circle"></div>
        <div class="cbh-ph-circle-fill"></div>
        <div class="cbh-ph-img-circle1"></div>
    </a>
</div>

En nuestro HREF solo tendremos que introducir nuestro enlace de invitación el cual encontraremos en el apartado de configuración del grupo

******************************************
******************************************

En este tutorial paso a paso, aprenderás cómo mejorar la comunicación con los visitantes de tu sitio web al insertar un botón de WhatsApp. El botón de WhatsApp es una excelente herramienta que te permite interactuar de forma directa con tus usuarios y clientes.

Para insertar el botón de WhatsApp en tu sitio web, necesitarás utilizar código HTML. Puedes obtener el código necesario visitando la página oficial de WhatsApp Business API o utilizando servicios de terceros especializados en generar el código de forma automática.

Una vez que obtengas el código HTML del botón de WhatsApp, deberás pegarlo en el lugar de tu sitio web donde desees que aparezca. Puedes elegir la barra de navegación, el pie de página o cualquier otra sección que consideres adecuada.

Recuerda incluir el código dentro de las etiquetas HTML correspondientes para garantizar un funcionamiento adecuado. Si no estás familiarizado con el código HTML, puedes buscar en línea cómo insertar código HTML en tu plataforma específica, ya sea WordPress, Joomla u otra.

Una vez que hayas pegado el código del botón de WhatsApp, guarda los cambios y actualiza tu sitio web. Ahora podrás disfrutar del botón de WhatsApp visible en tu página web, lo que facilitará la comunicación directa con tus visitantes.

Es importante tener en cuenta que el botón de WhatsApp solo funcionará en dispositivos móviles, ya que WhatsApp es una aplicación móvil. Por lo tanto, asegúrate de proporcionar un número de teléfono válido para que los usuarios puedan comunicarse contigo a través de WhatsApp.

No olvides revisar regularmente los mensajes de WhatsApp y responder a las consultas de manera oportuna. Esto te permitirá brindar un excelente servicio al cliente y fortalecer las relaciones con tus visitantes y potenciales clientes.

Ahora que conoces cómo insertar un botón de WhatsApp en tu sitio web, podrás mejorar la comunicación con tus visitantes y facilitar la interacción directa. ¡Aprovecha esta herramienta para ofrecer un servicio de calidad y fortalecer tu presencia en línea!