Botão Flutuante (Popup) de Atendimento Chat + WhatsApp + E-mail

<div id="chat_modal_div">
   <div class="chat_modal_input_open float-whatsapp float-on">
      <div>
         <a href="#">
            <span>
               <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="whatsapp" style="fill: #fff">
                  <path d="M16.7,3.3c-1.8-1.8-4.1-2.8-6.7-2.8c-5.2,0-9.4,4.2-9.4,9.4c0,1.7,0.4,3.3,1.3,4.7l-1.3,4.9l5-1.3c1.4,0.8,2.9,1.2,4.5,1.2 l0,0l0,0c5.2,0,9.4-4.2,9.4-9.4C19.5,7.4,18.5,5,16.7,3.3 M10.1,17.7L10.1,17.7c-1.4,0-2.8-0.4-4-1.1l-0.3-0.2l-3,0.8l0.8-2.9 l-0.2-0.3c-0.8-1.2-1.2-2.7-1.2-4.2c0-4.3,3.5-7.8,7.8-7.8c2.1,0,4.1,0.8,5.5,2.3c1.5,1.5,2.3,3.4,2.3,5.5 C17.9,14.2,14.4,17.7,10.1,17.7 M14.4,11.9c-0.2-0.1-1.4-0.7-1.6-0.8c-0.2-0.1-0.4-0.1-0.5,0.1c-0.2,0.2-0.6,0.8-0.8,0.9 c-0.1,0.2-0.3,0.2-0.5,0.1c-0.2-0.1-1-0.4-1.9-1.2c-0.7-0.6-1.2-1.4-1.3-1.6c-0.1-0.2,0-0.4,0.1-0.5C8,8.8,8.1,8.7,8.2,8.5 c0.1-0.1,0.2-0.2,0.2-0.4c0.1-0.2,0-0.3,0-0.4C8.4,7.6,7.9,6.5,7.7,6C7.5,5.5,7.3,5.6,7.2,5.6c-0.1,0-0.3,0-0.4,0 c-0.2,0-0.4,0.1-0.6,0.3c-0.2,0.2-0.8,0.8-0.8,2c0,1.2,0.8,2.3,1,2.4c0.1,0.2,1.7,2.5,4,3.5c0.6,0.2,1,0.4,1.3,0.5 c0.6,0.2,1.1,0.2,1.5,0.1c0.5-0.1,1.4-0.6,1.6-1.1c0.2-0.5,0.2-1,0.1-1.1C14.8,12.1,14.6,12,14.4,11.9"></path>
               </svg>
            </span>
            <span class="float-whatsapp-text"> Falar pelo WhatsApp </span> 
         </a>
      </div>
   </div>
   <div class="chat_modal_input_open chat_modal_input_open widget-floating-button-v1 pulse no-print">
      <svg class="feather feather-message-square" stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="currentColor" fill="none" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
         <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
      </svg>
   </div>
   <div id="chat_modal_popup" class="">
      <div class="chat_modal_head">
         <div class="chat_modal_titulo">Canais de atendimento</div>
         <p class="chat_modal_content_mensagem">Escolha uma opção abaixo</p>
      </div>
      <div class="chat_modal_content">
         <ul class="chat_modal_list">
            <li class="via_whatsapp">
               <a href="https://wa.me/5511999009900" target="_blank">
                  <div class="chat_modal_icone">
                     <svg id="Camada_1" style="enable-background:new 0 0 500 500" version="1.1" viewBox="0 0 500 500" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
                        <g>
                           <path class="st3-whatsapp" d="M403.16,495H96.84C46.12,495,5,453.88,5,403.16V96.84C5,46.12,46.12,5,96.84,5h306.33
                              C453.88,5,495,46.12,495,96.84v306.33C495,453.88,453.88,495,403.16,495z"></path>
                           <path class="st4-whatsapp" d="M390.79,244.54c0.27,70.36-51.98,129.46-120.22,137.47c-26.04,3.06-50.94-0.77-74.7-11.86
                              c-2.04-0.95-3.87-1.18-6.16-0.63c-21.33,5.15-42.71,10.13-64.07,15.15c-6.64,1.56-9.34-1.25-7.89-8.25
                              c4.41-21.36,8.82-42.72,13.31-64.06c0.56-2.65,0.36-4.96-0.82-7.45C90.81,221.66,142.87,124.35,234,110.84
                              c74.17-10.99,143.68,40.11,155.12,114.06C390.2,231.87,390.67,238.9,390.79,244.54z"></path>
                           <path class="st3-whatsapp" d="M154.18,347.3c2.34-11.56,4.09-22.48,6.88-33.13c1.83-7,0.74-12.69-2.49-19.1
                              c-29.19-58.08-2.22-127.12,58.09-149.47c64.66-23.96,134.87,18.71,143.46,87.21c7.34,58.52-33.67,111.84-92.06,119.59
                              c-23.4,3.1-45.44-1.4-66.17-12.48c-3.6-1.93-6.89-2.43-10.98-1.35C179.01,341.7,166.97,344.3,154.18,347.3z"></path>
                           <path class="st4-whatsapp" d="M289.58,312.83c-15.22-0.37-28.99-5.41-41.64-13.52c-23.05-14.79-42.86-32.89-55.88-57.41
                              c-5.83-10.97-9.02-22.83-6.43-35.33c2.28-11.01,9.69-18.77,18.5-25.04c4.49-3.19,10.76-1.23,13.22,3.88
                              c4.16,8.66,7.94,17.5,11.74,26.32c1.41,3.27,0.79,6.5-1.3,9.37c-1.61,2.21-3.33,4.33-4.96,6.52c-3.72,4.99-3.82,8.59-0.32,13.79
                              c2.82,4.19,6.22,7.9,9.78,11.46c8.96,8.96,18.37,17.4,29.25,24c8.68,5.27,11.95,5.09,18.71-2.46c5.29-5.91,10.76-7.68,18.32-4.82
                              c6.68,2.53,13.77,3.96,20.63,6.05c7.92,2.42,10.51,9.33,5.91,16.19c-6,8.93-12.75,17.15-23.98,19.75
                              C297.35,312.44,293.5,312.96,289.58,312.83z"></path>
                        </g>
                     </svg>
                  </div>
                  <div class="chat_modal_text">
                     <div class="chat_modal_name">Chat via WhatsApp</div>
                     <div class="chat_modal_texto_descricao phone">(11) 99900-9900</div>
                  </div>
               </a>
            </li>
            <li class="via_telefone">
               <a href="tel:1120002000">
                  <div class="chat_modal_icone">
                     <svg id="Camada_1" style="enable-background:new 0 0 500 500" version="1.1" viewBox="0 0 500 500" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
                        <g>
                           <path class="st2-telefone" d="M403.16,495H96.84C46.12,495,5,453.88,5,403.16V96.84C5,46.12,46.12,5,96.84,5h306.33
                              C453.88,5,495,46.12,495,96.84v306.33C495,453.88,453.88,495,403.16,495z"></path>
                           <path class="st1-telefone" d="M282.11,166.79c25.72,5.02,45.83,25.13,50.85,50.85 M282.11,115.3c53.8,5.98,96.29,48.41,102.34,102.21
                              M371.57,320.23v38.62c0.06,14.22-11.42,25.79-25.64,25.85c-0.81,0-1.62-0.03-2.42-0.1c-39.61-4.3-77.66-17.84-111.09-39.52
                              c-31.1-19.76-57.47-46.13-77.24-77.24c-21.75-33.58-35.29-71.82-39.52-111.6c-1.28-14.16,9.16-26.68,23.32-27.96
                              c0.76-0.07,1.53-0.1,2.29-0.1h38.62c12.92-0.13,23.94,9.35,25.75,22.14c1.63,12.36,4.65,24.49,9.01,36.17
                              c3.54,9.41,1.27,20.01-5.79,27.16L192.51,230c18.32,32.23,45.01,58.91,77.24,77.24l16.35-16.35c7.15-7.07,17.75-9.33,27.16-5.79
                              c11.68,4.36,23.81,7.38,36.17,9.01C362.37,295.93,371.89,307.16,371.57,320.23z"></path>
                        </g>
                     </svg>
                  </div>
                  <div class="chat_modal_text">
                     <div class="chat_modal_name">Contato por ligação</div>
                     <div class="chat_modal_texto_descricao phone">(11) 2000-2000</div>
                  </div>
               </a>
            </li>
            <li class="via_formulario">
               <a href="#">
                  <div class="chat_modal_icone">
                     <svg id="Camada_1" style="enable-background:new 0 0 500 500" version="1.1" viewBox="0 0 500 500" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
                        <g>
                           <path d="M403.16,495H96.84C46.12,495,5,453.88,5,403.16V96.84C5,46.12,46.12,5,96.84,5h306.33C453.88,5,495,46.12,495,96.84v306.33
                              C495,453.88,453.88,495,403.16,495z"></path>
                           <path d="M372.2,290.73c0,15-12.16,27.16-27.16,27.16H182.11L127.8,372.2V154.95c0-15,12.16-27.16,27.16-27.16h190.09
                              c15,0,27.16,12.16,27.16,27.16V290.73z" class="st0-formulario"></path>
                        </g>
                     </svg>
                  </div>
                  <div class="chat_modal_text">
                     <div class="chat_modal_name">Contato por e-mail</div>
                     <div class="chat_modal_texto_descricao">Formulário online</div>
                  </div>
               </a>
            </li>
            <li class="via_email">
               <a href="mailto:#">
                  <div class="chat_modal_icone">
                     <svg id="Camada_1" style="enable-background:new 0 0 500 500" version="1.1" viewBox="0 0 500 500" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px">
                        <g>
                           <path class="st0-email" d="M403.16,495H96.84C46.12,495,5,453.88,5,403.16V96.84C5,46.12,46.12,5,96.84,5h306.33
                              C453.88,5,495,46.12,495,96.84v306.33C495,453.88,453.88,495,403.16,495z"></path>
                           <g>
                              <circle class="st1-email" cx="250" cy="250" r="51.4"></circle>
                              <path class="st1-email" d="M301.4,198.59v64.25c0,21.29,17.26,38.55,38.55,38.55s38.55-17.26,38.55-38.55v-12.85
                                 c0-70.97-57.54-128.49-128.5-128.49c-70.97,0-128.49,57.54-128.49,128.5s57.54,128.49,128.5,128.49c28.24,0,55.7-9.31,78.12-26.48
                                 "></path>
                           </g>
                        </g>
                     </svg>
                  </div>
                  <div class="chat_modal_text">
                     <div class="chat_modal_name">E-mail direto</div>
                     <div class="chat_modal_texto_descricao">Vendas</div>
                  </div>
               </a>
            </li>
             <li class="via_duvidas">
               <a href="#" >
                  <div class="chat_modal_icone">
                    <svg id=Camada_1 style="enable-background:new 0 0 500 500"version=1.1 viewBox="0 0 500 500"x=0px xml:space=preserve xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink y=0px><g><path class=st0-duvidas d="M403.16,495H96.84C46.12,495,5,453.88,5,403.16V96.84C5,46.12,46.12,5,96.84,5h306.33
                        C453.88,5,495,46.12,495,96.84v306.33C495,453.88,453.88,495,403.16,495z"/><g><circle class=st1-duvidas cx=250 cy=250 r=113.56 /><path class=st1-duvidas d="M216.95,215.93c6.24-17.75,25.69-27.08,43.44-20.83c13.66,4.8,22.78,17.71,22.76,32.19
                          c0,22.71-34.07,34.07-34.07,34.07"/><line class=st1-duvidas x1=250 x2=250.11 y1=306.78 y2=306.78 /></g></g></svg>
                  </div>
                  <div class="chat_modal_text">
                     <div class="chat_modal_name">Perguntas e respostas</div>
                     <div class="chat_modal_texto_descricao">FAQ</div>
                  </div>
               </a>
            </li>
         </ul>
      </div>
   </div>
</div>


<script>
  const chatModalInputOpenElements = document.querySelectorAll(".chat_modal_input_open");

  chatModalInputOpenElements.forEach(function(element) {
    element.addEventListener("click", function(e) {
      e.preventDefault();
      const chatModalPopup = document.querySelector("#chat_modal_popup");
      chatModalPopup.classList.toggle("chat_moda_open");
    });
  });
</script>


<style>
  :root {
    --cor-primaria: #000;
  }
  
  #chat_modal_div * {
    font-family: Arial;
  }
  
  .widget-floating-button-v1 {
      position: fixed;
      right: 20px;
      bottom: 72px;
      z-index: 999;
      background: #fff;
      cursor: pointer;
      padding: 20px;
      border-radius: 100px;
      box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.21);
      background: var(--cor-primaria);
  }

  .widget-floating-button-v1 svg {
      fill: #fff;
      color: #fff;
      color: transparent;
  }

  .float-whatsapp a {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    gap: 8px;
    background: #29a61a;
    padding: 10px 20px 10px 15px;
    border-radius: 100px;
    color: #fff;
    text-decoration: none;
  }

  .float-whatsapp {
      bottom: 82px;
      right: 92px;
      z-index: 999;
      font-size: 14px
  }

  .float-whatsapp.float-on {
      position: fixed
  }
  
  .float-whatsapp svg {
      height: 16px;
  }

  @media (max-width: 767px) {
      .chat_modal_input_open .float-whatsapp-text {
          display:none
      }

      .float-whatsapp a {
          padding: 10px
      }

      .float-whatsapp {
          bottom: 164px;
          right: 32px
      }
  }
  
  .float-formulario-de-contato {
      bottom: 80px;
      right: 20px;
      z-index: 999;
      font-size: 14px;
  }

  .float-formulario-de-contato.float-on {
      position: fixed;
  }

  .float-formulario-de-contato a {
      background: var(--cor-primaria);
      padding: 10px 20px 10px 15px;
      border-radius: 100px;
      color: #fff;
      text-decoration: none;
  }

  .float-formulario-de-contato svg {
      height: 16px;
      margin-bottom: -3px;
  }

  #chat_modal_popup {
      position: fixed;
      z-index: 100000;
      bottom: 130px;
      right: 20px;
      max-width: 320px;
      margin-bottom: 1rem;
      background: #fff;
      border-radius: 5px;
      text-align: left;
      font-size: .9em;
      overflow: hidden;
      visibility: hidden;
      opacity: 0;
      transform: translateY(1.5rem);
      transition: all 1s cubic-bezier(1, -0.12, 0.06, 0.84);
      box-shadow: 0px 9px 14px 0px rgb(0 0 0 / 25%);
      width: 320px;
  }

  .chat_moda_open {
      visibility: visible !important;
      opacity: 1 !important;
      transform: translateX(0) !important;
  }

  .chat_modal_head {
      padding: 20px;
      background-color: var(--cor-primaria);
      color: #fff;
  }

  .chat_modal_titulo {
      font-size: 26px;
      font-family: inherit !important;
      font-weight: 700;
      line-height: 28px;
      margin-bottom: 10px;
      text-align: center;
  }

  .chat_modal_descricao {
      font-size: 1.0em;
      font-family: inherit !important;
      font-weight: 400
  }

  .chat_modal_content {
      padding: 20px 15px 5px;
      height: 200px;
      overflow-y: scroll;
  }

  .chat_modal_list {
      margin: 0;
      padding: 0;
      list-style: none;
  }

  .chat_modal_list li {
      margin: 10px 0 !important;
  }

  .chat_modal_list li a {
      text-decoration: none
  }

  .chat_modal_icone {
      width: 35px;
      height: 35px;
      padding: 5px;
      margin-right: 10px;
  }

  .chat_modal_text div {
      line-height: 20px;
  }

  .chat_modal_name {
      font-size: 1.0em;
      color: #333;
      font-family: inherit !important;
      font-weight: 400
  }

  .chat_modal_texto_descricao {
      font-size: 1.2em;
      color: #333;
      font-family: inherit !important;
      font-weight: 700
  }

  .chat_modal_hidden {
      display: none !important
  }

  .chat_modal_content_email a {
      display: flex;
      align-items: center;
  }

  .chat_modal_content_email img {
      padding: 10px;
      background: #f8f8f8;
      border-radius: 50%;
  }



  .chat_modal_list li {
    position: relative;
    margin: 5px 0;
  }

  .chat_modal_list li a {
    display: flex;
    align-items: center;
    padding: 7px;
    border-radius: 5px;
    color: #000;
    overflow: hidden;
    border-left: 5px solid;
  }

  .chat_modal_list li a:after {
      content: '';
      position: absolute;
      top: 0;
      right: -25px;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center / 50%;
  }

  .chat_modal_list li a:hover:after {
      right: 0;
      width: 25px;
  }

  .chat_modal_list li img {
      display: block;
      width: 100%;
      height: auto;
  }

  .chat_modal_list li a:hover {
    border-right: 25px solid;
  }

  .via_whatsapp a {
      background: #f8f8f8;
      border-color: rgb(88,186,99) !important;
  }

  .via_whatsapp a:hover {
      background-color: rgba(88,186,99,.25);
      border-color: rgb(88,186,99);
  }

  .via_email a {
      background: #f8f8f8;
      border-color: #3300ff !important;
  }

  .via_email a:hover {
      background-color: rgba(0,153,204,.25);
      border-color: #3300ff;
  }

  .via_duvidas a {
      background: #f8f8f8;
      border-color: #ff0066 !important;
  }

  .via_duvidas a:hover {
      background-color: rgba(255,0,102,.25);
      border-color: #ff0066;
  }

  .via_formulario a {
      background: #f8f8f8;
      border-color: #000 !important;
  }

  .via_formulario a:hover {
      background-color: rgba(0,0,0,.25);
      border-color: #000;
  }

  .via_telefone a {
      background: #f8f8f8;
      border-color: rgb(255,122,34) !important;
  }

  .via_telefone a:hover {
      background-color: rgba(255,122,34,.25);
      border-color: rgb(255,122,34);
  }

  .st0-formulario {
      fill:#fff
  }

  .st0-email{
    fill:#30f
  }

  .st1-email{
    fill:none;
    stroke:#fff;
    stroke-width:22;
    stroke-linecap:round;
    stroke-linejoin:round
  }

  .st1-telefone{
      fill:none;
      stroke:#fff;
      stroke-width:22;
      stroke-linecap:round;
      stroke-linejoin:round
  }

  .st2-telefone{
      fill:#ff8c00
  }

  .st3-whatsapp{
      fill:#29a61a
  }

  .st4-whatsapp{
      fill:#fefefe
  }

  .st0-duvidas{
      fill:#f06
  }

  .st1-duvidas{
      fill:none;
      stroke:#fff;
      stroke-width:22.7124;
      stroke-linecap:round;
      stroke-linejoin:round
  }

  .chat_modal_content_mensagem {
      margin: 0;
      background: #222222;
      padding: 8px 20px;
      border-radius: 100px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      margin-bottom: -35px;
      position: relative;
      z-index: 1;
  }
</style>