Chat Widget ©2018

by. Tetangga-Sebelah.com

by Rian .N Herdian

HTML

<div class="contact">
  <div class="info">
    <span class="closeinfo"><img alt="icon" src="https://lh3.googleusercontent.com/-gjX0mTtUCME/WtdCs39V8fI/AAAAAAAAEpM/jQhGX_EkE9owdyB8edB_TxpbX-kYa528ACLcBGAs/s0/close.png" class="icon small" /></span>
    <div class="photo">
      <img alt="icon" src="https://lh3.googleusercontent.com/-7CEj622XKWM/WtdCuNdZRBI/AAAAAAAAEpQ/Zj9TZL594h069_DdwMHX4CAC0cC1kXJVwCLcBGAs/h100/ava.png" />
    </div>
    <div class="text">
      <p>
        Selamat datang..
        <br/>di
        <b>Lapak Tetangga!</b> 😊
        <br/>
        <br/> Silahkan hubungi saya jika ada yang ingin ditanyakan seputar <b>Template</b> dan <b>Jasa</b> yang saya tawarkan.
      </p>
      <span class="iconcontact">
        <img alt="icon" src="https://lh3.googleusercontent.com/-hE31DXyyrRg/WtdCvHEinjI/AAAAAAAAEpc/4Q2LgOx7CPIrrQuH-q_WbkISdOvmewH0wCLcBGAs/s0/messenger.png" class="icon" />
        <img alt="icon" src="https://lh3.googleusercontent.com/-K08HT2u8p-k/WtdCvmi7jtI/AAAAAAAAEpk/6jvMAk4YpWkNiZ4p481otIWWDQcvNK2rACLcBGAs/s0/wa.png" class="icon" />
        <img alt="icon" src="https://lh3.googleusercontent.com/-PrhgutSswaU/WtdCuRHxLAI/AAAAAAAAEpY/mb3JU9vfqA8x7OhEGRHtx34qwaIDtUkKwCLcBGAs/s0/line.png" class="icon" />
        <img alt="icon" src="https://lh3.googleusercontent.com/-xOyX4e1rk6c/WtdCvQXybzI/AAAAAAAAEpg/KA5JiFkTVgwpcxiwS6nZv2PbUEjoPtwfACLcBGAs/s0/phone.png" class="icon" />
        <img alt="icon" src="https://lh3.googleusercontent.com/-dnuIeuvDnUo/WtdCucb2GZI/AAAAAAAAEpU/si4-Edm6FLgsxRsRvcwbYjiKlmEwYb6oQCLcBGAs/s0/gmail.png" class="icon" />
      </span>
    </div>
  </div>
  <div class="toggle">
    <a class="messenger popup" href="https://m.me/kangriaan"><img alt="icon" src="https://lh3.googleusercontent.com/-hE31DXyyrRg/WtdCvHEinjI/AAAAAAAAEpc/4Q2LgOx7CPIrrQuH-q_WbkISdOvmewH0wCLcBGAs/s0/messenger.png" class="icon" /><span>Messenger</span></a>
    <a class="whatsapp popup"...

CSS

/* Chat Widget by. Tetangga-Sebelah.com ©2018 */
*, *:before, *:after {
  box-sizing: border-box;
}
.contact {
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  display: block;
  position: fixed;
  z-index: 10;
  opacity: 0;
  bottom: 0;
  right: 40px;
  transition: all .3s linear;
  font-size:16px;
}
@media(max-width:480px) {
  .contact { font-size:14px; }
}
.contact img {
  display:block;
}
.contact.hi {
  opacity: 1;
  bottom: 40px;
}

.contact a {
  color:#888;
  margin-top:15px;
  text-decoration:none;
  position: relative;
  display: block;
  background: #fff;
  text-align: center;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  transition: all .1s linear;
}

.contact a:hover {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

.contact a:active {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.contact a span {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: -1;
  right: 100%;
  display: inline-block;
  background: #fff;
  top: 10px;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  border-radius: 30px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  transition: all .2s;
  white-space: nowrap;
}

.contact a:hover span {
  opacity: 1;
  visibility: visible;
  right: 150%;
}

.contact .toggle {
  display: none;
}

.contact .info {
  position: absolute;
  background: #fff;
  bottom: 70px;
  right: 0px;
  width: 280px;
  padding: 20px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  line-height: 1.3;
}

.contact .info .photo {
  width: 20%;
  float: left;
}

.contact .info .photo img {
  width:100%;
  border-radius: 100px;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .10)
}

.contact .info .text {
  float: right;
  width: calc(80% - 20px);
  margin-top:-20px;
  margin-left: 5%;
  font-size: 90%;
  color: #555;
  line-height: 1.4;
}

.contact .info .text p {
  display: block;
  border:...

JavaScript

/* Chat Widget by. Tetangga-Sebelah.com ©2018 */
$(".contact").delay(1000).queue(function() {
  $(this).addClass("hi").dequeue();
});
$(".contact a.main, .ask").click(function() {
  $(".contact .toggle").slideToggle(200);
  $("img.open").slideToggle();
  $("img.close").slideToggle();

  $(".contact .info").fadeOut(500);
});
$(".contact .info .iconcontact").click(function() {
  $(".contact .info").fadeOut(500);

  $(".contact .toggle").slideDown(200);
  $("img.open").slideUp();
  $("img.close").slideDown();
});
$(".closeinfo").click(function() {
  $(".contact .info").fadeOut(500);
});
$(".sub").click(function() {
  $(this).find("div.wrap").slideToggle(300);
  $(this).toggleClass("toggle");
});
$('.popup').on('click', function() {
  var w = 1000,
      h = 600,
      left = Number((screen.width / 2) - (w / 2)),
      tops = Number((screen.height / 2) - (h / 2)),
      popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left);
  popupWindow.focus();
  return false;
});
/* Chat Widget by. Tetangga-Sebelah.com ©2018 */