Cara Membuat Live Chat Messenger di Blog

Oleh Majid Abana Segaf November 21, 2017 Posting Komentar

Fairus Majid akan membagikan tips Cara Membuat Live Chat Messenger di Blog. Tips ini adalah menaruh tombol melayang seperti Customer Support pada sisi kanan atau kiri blog.

Seperti contoh pada gambar diatas letak posisi Live Chat Messenger yang Fairus Majid kutip dalam Messenger Floating Button milik dari Sem Schilder di Codepen.io.
Bagi yang ingin mencobanya bisa langsung kita ikuti dibawah ini:

Cara Membuat Live Chat Whatsapp di Blog

Pertama buka Blogger > Tema > Klik tombol Edit HTML > dan tambahkan kode script di bawah ini tepat diatas kode </head> . Apabila sudah ada di template sobat, silahkan di lewati.

 <script>document.addEventListener('DOMContentLoaded', function(){ 
     document.getElementById('fb-chat-btn').addEventListener("click", function(){
   toggleClass(document.getElementById('fb-chat'), 'fb-chat__opend');
   toggleClass(document.getElementById('fb-chat-btn'), 'fb-chat-btn__opend');
  });
  document.getElementById('close-header').addEventListener("click", function(){
   toggleClass(document.getElementById('fb-chat'), 'fb-chat__opend');
   toggleClass(document.getElementById('fb-chat-btn'), 'fb-chat-btn__opend');
  });
 }, false);
 
 function toggleClass(element, className){
     if (!element || !className){
         return;
     }
 
     var classString = element.className, nameIndex = classString.indexOf(className);
     if (nameIndex == -1) {
         classString += ' ' + className;
     }
     else {
         classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
     }
     element.className = classString;
 }</script>

Lalu tambahkan kode di bawah ini tepat di atas ]]></b:skin> atau </style> dalam template sobat.

<style type="text/css">

/*FB Live Chat*/

.fb--chat {
  &__icon {
    z-index: 9999;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
    background: #1182FC;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-50deg);
    transition: all 160ms ease-in-out;
    cursor: pointer;
    & svg {
      transition: opacity 160ms ease-in-out;
    }
    & svg#close-icon {
      width: 19px;
      height: 19px;
      top: 21px;
      left: 21px;
      opacity: 0;
      position: absolute;
    }
    & svg#fb-msng-icon {
      width: 30px;
      height: 30px;
      transform: rotate(50deg);
      transition: opacity 160ms ease-in-out;
      opacity: 1;
    }
    &.fb-chat-btn__opend svg#close-icon {
      opacity: 1;
    }
    &.fb-chat-btn__opend svg#fb-msng-icon {
      opacity: 0;
    }
  }
}

.fb-chat-btn {
  &__opend {
    transform: rotate(0deg);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .16), 0 2px 32px rgba(0, 0, 0, .26);
  }
}

.fb-chat {
  max-width: 300px;
  height: 350px;
  border-radius: 10px;
  position: fixed;
  bottom: 100px;
  right: 20px;
  transform: translateY(50px);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
  transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16);
  &--close {
    width: 12px;
    height: 12px;
    position: absolute;
    right: 16px;
    top: 15px;
    cursor: pointer;
  }
  &__opend {
    pointer-events: all;
    transform: translateY(0px);
    opacity: 1;
  }
  &--header {
    height: 50px;
    background: #1182FC;
    padding: 0px 0px 0px 40px;
    display: flex;
    border-radius: 10px 10px 0px 0px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: white;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 25px;
    position: relative;
  }
  & iframe {
    border: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden
  }
  &--text svg {
    height: 20px;
    width: 20px;
    left: 10px;
    top: 14px;
    position: absolute;
  }
}

</style>

Kemudian tambahkan kode HTML ini di dalam Template atau Tata Letak dalam blog.

<div id="fb-chat" class="fb-chat">
 <header class="fb-chat--header">
  <p class="fb-chat--text"><svg id="fb-msng-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.47 30.66"><path d="M29.56,14.34c-8.41,0-15.23,6.35-15.23,14.19A13.83,13.83,0,0,0,20,39.59V45l5.19-2.86a16.27,16.27,0,0,0,4.37.59c8.41,0,15.23-6.35,15.23-14.19S38,14.34,29.56,14.34Zm1.51,19.11-3.88-4.16-7.57,4.16,8.33-8.89,4,4.16,7.48-4.16Z" transform="translate(-14.32 -14.34)" style="fill:#fff"/></svg> Facebook Messenger</p>
  <span id="close-header" class="fb-chat--close"><svg id="close-icon" data-name="close icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.98 39.99"><path d="M48.88,11.14a3.87,3.87,0,0,0-5.44,0L30,24.58,16.58,11.14a3.84,3.84,0,1,0-5.44,5.44L24.58,30,11.14,43.45a3.87,3.87,0,0,0,0,5.44,3.84,3.84,0,0,0,5.44,0L30,35.45,43.45,48.88a3.84,3.84,0,0,0,5.44,0,3.87,3.87,0,0,0,0-5.44L35.45,30,48.88,16.58A3.87,3.87,0,0,0,48.88,11.14Z" transform="translate(-10.02 -10.02)" style="fill:#fff"/></svg></span>
 </header>
 <iframe width="100%" height="300" scrolling="no" frameborder="0" allowtransparency="true" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F241156432749649&amp;tabs=messages&amp;width=302&amp;height=300&amp;small_header=true&amp;adapt_container_width=true&amp;hide_cover=true&amp;show_facepile=false&amp;appId"></iframe>
</div>
<div id="fb-chat-btn" class="fb--chat__icon">
 <svg id="fb-msng-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.47 30.66"><path d="M29.56,14.34c-8.41,0-15.23,6.35-15.23,14.19A13.83,13.83,0,0,0,20,39.59V45l5.19-2.86a16.27,16.27,0,0,0,4.37.59c8.41,0,15.23-6.35,15.23-14.19S38,14.34,29.56,14.34Zm1.51,19.11-3.88-4.16-7.57,4.16,8.33-8.89,4,4.16,7.48-4.16Z" transform="translate(-14.32 -14.34)" style="fill:#fff"/></svg>
 <svg id="close-icon" data-name="close icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.98 39.99"><path d="M48.88,11.14a3.87,3.87,0,0,0-5.44,0L30,24.58,16.58,11.14a3.84,3.84,0,1,0-5.44,5.44L24.58,30,11.14,43.45a3.87,3.87,0,0,0,0,5.44,3.84,3.84,0,0,0,5.44,0L30,35.45,43.45,48.88a3.84,3.84,0,0,0,5.44,0,3.87,3.87,0,0,0,0-5.44L35.45,30,48.88,16.58A3.87,3.87,0,0,0,48.88,11.14Z" transform="translate(-10.02 -10.02)" style="fill:#fff"/></svg>
</div>

Ganti :
https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F241156432749649&

241156432749649 = Ganti dengan ID Page / Profile FB kamu