Skip to content

Instantly share code, notes, and snippets.

@saprinaea

saprinaea/whatsappWidget.html

Forked from mksddn/whatsappWidget.html
Created May 3, 2021 23:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save saprinaea/c3d19e68d89c8d53cc13a6bcba23d834 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save saprinaea/c3d19e68d89c8d53cc13a6bcba23d834 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mksddn mksddn created this gist Jul 7, 2020.
    80 changes: 80 additions & 0 deletions whatsappWidget.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    <style>
    #whatsappWidget {
    padding: 15px;
    position: fixed;
    bottom: 30px;
    right: 35px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #25d366;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 5;
    -webkit-box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
    box-shadow: 0 0 0 rgba(37, 211, 102, 0.4);
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
    }

    @-webkit-keyframes pulse {
    0% {
    -webkit-box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    70% {
    -webkit-box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    }
    100% {
    -webkit-box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
    }

    @keyframes pulse {
    0% {
    -webkit-box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    70% {
    -webkit-box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
    }
    100% {
    -webkit-box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
    }

    #whatsappWidget:hover {
    text-decoration: none;
    }
    </style>
    <a id="whatsappWidget" href="https://wa.me/79897600204" target="_blank" class="ww_pulse whatsapp-link"><img src="data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='90px' height='90px' viewBox='0 0 90 90' style='enable-background:new 0 0 90 90;' xml:space='preserve'%3E%3Cpath id='WhatsApp' d='M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522 c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982 c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537 c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z M68.129,53.938 c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537 c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333 c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882 c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977 c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344 c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223 C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107C68.398,56.537,68.398,54.386,68.129,53.938z' fill='%23ffffff'/%3E%3C/svg%3E%0A" alt="whatsapp"></a>
    <script>
    $('#whatsappWidget').click(function(){
    ga('send', 'event', 'click', 'whatsapp');
    ym(50146906,'reachGoal','whatsapp');
    return true;
    });
    </script>