Chat Form HubSpot

by 25058214

HTML

<div class="ChatFormW">
<div class="ChatForm">
<button class="IconFormChat">
  <div>
    <div class="Close">
      <div width="20" height="20" class="Close_svg">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 19 18" class="conversations-visitor-close-icon">
          <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g fill="#ffffff" transform="translate(-927 -991) translate(900.277 962)">
          <g transform="translate(27 29)"><path d="M10.627 9.013l6.872 6.873.708.707-1.415 1.414-.707-.707-6.872-6.872L2.34 17.3l-.707.707L.22 16.593l.707-.707L7.8 9.013.946 2.161l-.707-.708L1.653.04l.707.707L9.213 7.6 16.066.746l.707-.707 1.414 1.414-.707.708-6.853 6.852z"></path></g></g></g></svg>
      </div>
    </div>
    <div class="Chat">
      <div width="32" height="30" class="Chat_svg">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="30" viewBox="0 0 39 37" class="conversations-visitor-open-icon"><defs><path id="conversations-visitor-open-icon-path-10.8731279206504543" d="M31.4824242 24.6256121L31.4824242 0.501369697 0.476266667 0.501369697 0.476266667 24.6256121z"></path></defs><g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g transform="translate(-1432 -977) translate(1415.723 959.455)"><g transform="translate(17 17)"><g transform="translate(6.333 .075)"><path fill="#ffffff" d="M30.594 4.773c-.314-1.943-1.486-3.113-3.374-3.38C27.174 1.382 22.576.5 15.36.5c-7.214 0-11.812.882-11.843.889-1.477.21-2.507.967-3.042 2.192a83.103 83.103 0 019.312-.503c6.994 0 11.647.804 12.33.93 3.079.462 5.22 2.598 5.738 5.728.224 1.02.932 4.606.932 8.887 0 2.292-.206 4.395-.428 6.002 1.22-.516 1.988-1.55 2.23-3.044.008-.037.893-3.814.893-8.415 0-4.6-.885-8.377-.89-8.394"></path></g><g fill="#ffffff" transform="translate(0 5.832)"><path d="M31.354 4.473c-.314-1.944-1.487-3.114-3.374-3.382-.046-.01-4.644-.89-11.859-.89-7.214...

CSS

.ChatForm{
  position: relative;
    -webkit-box-align: baseline;
    align-items: baseline;
    line-height: 1;
  display: initial;
    z-index: 2147483647;
    position: fixed;
    bottom:20px;
  right:20px;
}
.IconFormChat{
  background-color:#123dc6;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px, rgb(0 0 0 / 20%) 0px 2px 24px;
    border: none;
    transition: box-shadow 150ms ease-in-out 0s;
    position: relative;
    border-radius: 50%;
    height: 60px;
    width: 60px;
  cursor:pointer;
  padding:0;
}
.Chat {
    transition: transform 0.16s linear 0s, opacity 0.06s linear 0s;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.Close{
  transition: transform 0.16s linear 0s, opacity 0.06s linear 0s;
    opacity: 0;
    transform: rotate(25deg) scale(0);
}
.Close .Close_svg{
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 20px;
    height: 20px;
}
.Chat .Chat_svg{
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 32px;
    height: 30px;
}

.Active .Chat{
transition: transform 0.16s linear 0s, opacity 0.06s linear 0s;
    opacity: 0;
    transform: rotate(-25deg) scale(0);
}
.Active .Close{
  transition: transform 0.16s linear 0s, opacity 0.06s linear 0s;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.Active .BotForm{
  bottom:100px;
  opacity:1;
  visibility: visible;
  z-index: 999;
}
.BotForm{
  position: fixed;
  bottom: 80px;
  opacity:0;
  visibility: hidden;
  right: 20px;
  box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px, rgb(0 0 0 / 20%) 0px 2px 24px;
  border-radius:10px;
  max-width: 340px;
  transition: bottom 0.25s ease-in-out 0s;
  background:#fff;
}
.BotForm_Head h3{
  margin:0;
}
.BotForm_Head p{
  font-family: "Source Sans Pro", Sans-serif;
  font-weight:600;
  padding: 0 0 10px;
  margin:0;
  text-align:center;
}
.BotForm_Inner{
  padding:25px;
}
.BotForm_Inner .hs-form-field{
      margin-bottom:...

JavaScript

var chat = document.querySelector('.ChatFormW');
var button = document.querySelector('.IconFormChat');


button.onclick = function() {
    chat.classList.toggle('Active');
}