Tombol Live Chat Menggunakan Animasi Interaktif Burung Terbang

---

Bagi anda yang memiliki blog, website pribadi ataupun website komersil tidak lengkap rasanya jika belum memasang widget live chat. Live chat adalah cara membangun komunikasi dua arah dengan pelanggan di website. Kita bisa membuat sesi live chat sendiri, berinteraksi dengan pengunjung dan juga merupakan salah satu cara efektif untuk meningkatkan jumlah pengunjung.

Widget live chat mampu membuat tampilan blog atau website terlihat profesional, modern dan user freindly. Jika anda menggunakan blog atau website sebagai bisnis, maka penggunaan live chat dapat meningkatkan penjualan online anda. Anda bisa memanjakan pelanggan anda dengan memberikan fasilitas live chat, misalkan dengan fasilitas chatting pada website ada. Kegunaan dari aplikasi live chat untuk blog atau website sebagai toko online supaya pengunjung atau pelanggan anda dapat lebih mudah menghubungi anda untuk menanyakan secara langsung berkaitan dengan produk yang ditawarkan.

Fitur aplikasi live chat yang digunakan untuk website dan toko online anda selain bisa mempermudah para pelanggan berinteraksi langsung dengan anda sebagai pemilik blog atau website toko online. Anda juga bisa melakukan secara langsung merespon komentar atau pertanyaan perihal produk atau jasa kepada para konsumen anda.

Pada artikel ini admin hanya memberikan tutorial tentang Tombol Chat Menggunakan Burung Terbang yang unik dan menarik sedangkan untuk aplikasi live chat itu sendiri silakan anda yang tentukan. Sejatinya ada banyak aplikasi live chat yang disediakan untuk website dan toko online, silakan anda pilih sendiri aplikasi live chat yang baik dan berkualitas. Pada tutorial ini admin menggunakan aplikasi live chat dari https://www.tawk.to sebagai contoh dalam penerapan tutorial Tombol Chat Menggunakan Burung Terbang.

Tombol Live Chat Menggunakan Burung Terbang merupakan salah satu trik unik yang dapat membuat tampilan blog terlihat segar dan dinamis. Tombol chat ini menggunakan animasi Javascript sehingga tidak memberatkan randering browser pada PC, Laptop dan Mobile Phone pengunjung blog atau website anda. Sebenarnya Tombol Chat Menggunakan Burung Terbang hampir mirip dengan widget Tombol Share Twitter Bird namun dengan beberapa modifikasi tambahan sehingga tampilan dari animasi tersebut dapat dijadikan sebagai Tombol Live Chat yang unik dan menarik.

Sebagai contoh seperti yang terlihat pada halaman artikel ini, pada layar terlihat animasi burung terbang yang berada dihalaman. Pergerakan burung mengikuti viewport halaman, jika viewport berubah maka animasi burung akan mengikuti viewport halaman dengan posisi random. Jika burung terbang tersebut diklik maka akan terlihat kotak chat box yang bisa digunakan sebagai fitur live chat.

Informasi Singkat

---

LiveChat adalah perangkat lunak layanan pelanggan online dengan obrolan online, perangkat lunak meja bantuan, dan kemampuan analisis web.

Ini pertama kali diluncurkan pada tahun 2002 dan saat ini dikembangkan dan ditawarkan dalam model bisnis SaaS (perangkat lunak sebagai layanan) oleh LiveChat Software S.A ..

Perusahaan menggunakan LiveChat sebagai satu titik kontak untuk mengelola dari satu perangkat lunak semua layanan pelanggan dan aktivitas penjualan online yang biasanya disediakan menggunakan saluran yang berbeda (obrolan, email dan media sosial) dan berbagai alat. LiveChat digunakan oleh lebih dari 27.000 pelanggan berbayar dari lebih dari 150 negara.

Secara teknis, LiveChat adalah perangkat lunak berpemilik yang dibangun dengan menggunakan berbagai teknologi, termasuk JavaScript, Node.js, MySQL, ElasticSearch, C ++ dan Erlang. Seluruh platform terdiri dari dua elemen utama:

• Widget obrolan situs web - disematkan di situs web pelanggan dan dilihat oleh pengguna akhir (pengunjung situs web) sebagai kotak obrolan kecil, biasanya ditampilkan di sudut kanan bawah browser web. Widget obrolan terlihat di desktop dan perangkat seluler, baik di browser atau sebagai bagian dari aplikasi seluler.


• Aplikasi agen - digunakan oleh karyawan perusahaan untuk menjawab pertanyaan yang diajukan oleh pelanggan. Biasanya agen menggunakan aplikasi berbasis web, yang memungkinkan karyawan untuk login dan melakukan chat dengan pengunjung website menggunakan browser apapun. Namun, ada aplikasi desktop yang tersedia untuk Windows dan Mac OS X dan aplikasi seluler untuk Android dan iOS. Aplikasi seluler BlackBerry dan Windows Phone dulunya ada di masa lalu, tetapi tidak lagi dikembangkan. Aplikasi agen ditingkatkan dengan alat antarmuka pengguna yang membuat komunikasi satu-ke-banyak lebih cepat dan lebih efisien. Contoh alat tersebut meliputi: tanggapan terekam, pintasan keyboard, indikator pengetikan dengan intip pesan pelanggan, geolokasi, sistem tag untuk kategorisasi, dll.

Ada dua cara untuk melakukan sesi obrolan online antara agen dan pengunjung situs web:

• Komunikasi pasif, dimulai ketika pengunjung situs web mengklik tombol obrolan atau widget yang ditampilkan di halaman.
• Komunikasi aktif, dimulai secara manual oleh agen atau secara otomatis oleh sistem LiveChat segera setelah pengunjung memenuhi kriteria yang telah ditentukan (yaitu kata kunci yang dicari, waktu di situs web, mengalami kesalahan, dll.). Setelah kriteria terpenuhi, LiveChat menampilkan undangan obrolan dengan pesan yang disesuaikan. Selama sesi obrolan, agen menutup penjualan, yang menghasilkan peningkatan tingkat konversi secara keseluruhan.

Di area yang tidak terkait langsung dengan produk, LiveChat mengandalkan layanan pihak ketiga. Ini termasuk Cap Pos untuk pengiriman email transaksional, Berulang untuk penagihan langganan, Pingdom untuk pemantauan kinerja dan pelacakan uptime dan Upscope untuk berbagi layar instan dengan pelanggan.

---

Sumber : Wikipedia

Cara Pemasangan Widget Pada Blogger

Tombol Live Chat Menggunakan Animasi Interaktif Burung Terbang dibuat menggunakan kode HTML dan Javascript sedangkan untuk dekorasi tampilan menggunakan kode CSS, pemasangan widget ini cukup mudah tinggal copy-paste kode widget pada kode template atau pada kotak gadget blog. Berikut langkah-langkah cara pemasangan widget tombol interaktif ini.

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <div id='TwitterHead'> <div id='topbarTwitter'><span class='topBarBoxTitle'>Chat Box</span><span class='topBarBoxClose' title='Close' onclick='hitclickBird("off");'><i class='fa fa-times' aria-hidden='true'></i></span></div> <div id='adstwitter'>
  
  <!-- Put the code here -->
  <iframe src='' width='350px' height='400px'></iframe>
  <!-- Put the code here -->
  
  </div></div>
  
  <script>
  var tweetThisText = "Chat with me !";
  var birdSprite = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY_dJJ-xRyS-P0TPNuFHTAqtJYjrvvvp2l1O-03pU6ss0nmbBgYKdDcK3LFqTeIxj-qfa8YCU6wWrEl_n4u9VCyhNtN7vS1_RdUtp8wi-Ca2dalAgYrb8eBNSGCVlx-Rb4XgZJvX78zgI/s1600/twitterbirdsprite.png";
  var birdSpeed = 12;
  var birdSpaceVertical = 16;
  var birdSetUp = 2;
  var spriteWidth = 64;
  var spriteHeight = 64;
  var spriteAniSpeed = 72;
  var spriteAniSpeedSlow = Math.round(spriteAniSpeed * 1.75);
  var targetElems = new Array("img", "hr", "input", "textarea", "button", "select", "table", "td", "div", "ul", "ol", "li", "h1", "h2", "h3", "h4", "p", "code", "object", "a", "b", "strong", "span");
  
  var neededElems4random = 10; var minElemWidth = Math.round(spriteWidth / 3); var scareTheBirdMouseOverTimes = 1; var scareTheBirdTime = 10000; var scareTheBirdLastTime = 0; var scareTheBirdCount = 0; var showOnMobile = true; var birdIsFlying = false; var scrollPos = 0; var windowHeight = getWindowHeight(); var windowWidth = getWindowWidth(); if (windowHeight <= spriteHeight + 2 * birdSpaceVertical){windowHeight=spriteHeight + 2 * birdSpaceVertical + 1;} if (windowWidth<=spriteWidth){windowWidth=spriteWidth+1;} var birdPosX = Math.round(Math.random() * (windowWidth - spriteWidth + 200) - 200); var birdPosY = -2 * spriteHeight; var timeoutAnimation = false; var timeoutFlight = false; var showButtonsTimeout = null; var hideButtonsTimeout = null; var clTwit; if (typeof (twitterAccount) != "string") {var twitterAccount = "";} if (typeof (tweetThisText) != "string" || tweetThisText == "") {var tweetThisText = document.title + " " + document.URL;} if (typeof (showTweet) != "boolean") { var showTweet = false } var tweetthislink = null; if (typeof (otherPageOrFeed) != "string" || otherPageOrFeed == "") { var otherPageOrFeed = false } function tripleflapInit(a) { if (typeof (a) == "undefined") { window.setTimeout("tripleflapInit(1)", 250); return } if (!showOnMobile && typeof (navigator.userAgent) == "string" && is_mobile(navigator.userAgent)) { return } if (!is_utf8(tweetThisText)) { tweetThisText = utf8_encode(tweetThisText) } var j = "http://twitter.com/home?status=" + escape(tweetThisText); if (twitterAccount == "") { showTweet = false } var o = "javascript:hitclickBird('on');"; var k = document.createElement("a"); k.setAttribute("id", "tBird"); k.setAttribute("title", tweetThisText); k.setAttribute("href", o); k.style.backgroundPosition = "-0px -0px"; k.style.left = birdPosX + "px"; k.style.top = birdPosY + "px"; k.style.width = spriteWidth + "px"; k.style.height = spriteHeight + "px"; k.style.background = "url('" + birdSprite + "') no-repeat transparent"; k.onmouseover = function () { hitBird(); scareTheBird(); showButtonsTimeout = window.setTimeout("showButtons(0," + windowWidth + "," + windowHeight + ")", 400); window.clearTimeout(hideButtonsTimeout) }; k.onmouseout = function () { leaveBird(); hideButtonsTimeout = window.setTimeout("hideButtons()", 50) }; document.body.appendChild(k); var p = document.createElement("a"); p.setAttribute("id", "tBirdLtweet"); p.setAttribute("href", j); p.setAttribute("target", "_blank"); p.setAttribute("title", "tweet this"); p.style.display = "none"; p.style.position = "absolute"; p.style.left = "0px"; p.style.top = "-100px"; p.style.background = "url('" + birdSprite + "') no-repeat transparent"; p.style.opacity = "0"; p.style.filter = "alpha(opacity=0)"; p.style.backgroundPosition = "-64px -0px"; p.style.width = "58px"; p.style.height = "30px"; p.style.zIndex = "951"; p.onmouseover = function () { window.clearTimeout(hideButtonsTimeout) }; p.onmouseout = function () { hideButtonsTimeout = window.setTimeout("hideButtons()", 50) }; document.body.appendChild(p); var g = p.cloneNode(false); g.setAttribute("id", "tBirdLfollow"); g.setAttribute("href", o); g.setAttribute("title", "follow " + (twitterAccount ? "@" + twitterAccount : "me")); g.style.backgroundPosition = "-64px -30px"; g.style.width = "58px"; g.style.height = "20px"; g.style.zIndex = "952"; g.onmouseover = function () { window.clearTimeout(hideButtonsTimeout) }; g.onmouseout = function () { hideButtonsTimeout = window.setTimeout("hideButtons()", 50) }; document.body.appendChild(g); if (showTweet == true) { var l = document.createElement("div"); l.setAttribute("id", "tBirdStatxLow"); l.style.display = "none"; l.style.position = "absolute"; l.style.left = "0px"; l.style.top = "-100px"; l.style.background = "transparent"; l.style.opacity = "0"; l.style.filter = "alpha(opacity=0)"; l.style.width = "192px"; l.style.zIndex = "955"; l.onmouseover = function () { window.clearTimeout(hideButtonsTimeout) }; l.onmouseout = function () { hideButtonsTimeout = window.setTimeout("hideButtons()", 50) }; var f = l.cloneNode(false); f.setAttribute("id", "tBirdStatxUpr"); f.onmouseover = function () { window.clearTimeout(hideButtonsTimeout) }; f.onmouseout = function () { hideButtonsTimeout = window.setTimeout("hideButtons()", 50) }; var e = document.createElement("div"); e.setAttribute("id", "tBirdStatxArrLow"); e.style.background = "url('" + birdSprite + "') no-repeat transparent"; e.style.backgroundPosition = "-64px -50px"; e.style.width = "32px"; e.style.height = "9px"; e.style.margin = "0 0 -1px 56px"; e.style.position = "relative"; e.style.zIndex = "957"; var b = e.cloneNode(false); b.setAttribute("id", "tBirdStatxArrUpr"); b.style.backgroundPosition = "-96px -50px"; b.style.margin = "-1px 0 0 60px"; var h = document.createElement("div"); h.setAttribute("id", "tBirdStatxInLow"); h.style.background = "#fbfcfc"; h.style.border = "1px solid #555"; h.style.MozBorderRadius = "6px"; h.style.borderRadius = "6px"; h.style.padding = "3px 5px"; h.style.fontSize = "11px"; h.style.fontFamily = "Arial"; h.style.textAlign = "left"; h.style.position = "relative"; h.style.zIndex = "956"; h.innerHTML = "loading..."; var d = h.cloneNode(false); d.setAttribute("id", "tBirdStatxInUpr"); d.innerHTML = "loading..."; l.appendChild(e); l.appendChild(h); f.appendChild(d); f.appendChild(b); document.body.appendChild(l); document.body.appendChild(f) } var m = window.setTimeout("animateSprite(0,0,0,0,null,true)", spriteAniSpeed); window.onscroll = recheckposition; if (showTweet == true) { loadStatusText() } recheckposition() } function animateSprite(e, g, f, b, d, a) { if (typeof (b) != "number" || b > f - g) { b = 0 } document.getElementById("tBird").style.backgroundPosition = "-" + Math.round((g + b) * spriteWidth) + "px -" + (spriteHeight * e) + "px"; if (a == true) { return } if (typeof (d) != "number") { d = spriteAniSpeed } timeoutAnimation = window.setTimeout("animateSprite(" + e + "," + g + "," + f + "," + (b + 1) + "," + d + ")", d) } function animateSpriteAbort() { window.clearTimeout(timeoutAnimation) } function recheckposition(a) { if (a != true) { a = false } if (birdIsFlying) { return false } windowHeight = getWindowHeight(); windowWidth = getWindowWidth(); if (windowHeight <= spriteHeight + 2 * birdSpaceVertical) { windowHeight = spriteHeight + 2 * birdSpaceVertical + 1 } if (windowWidth <= spriteWidth) { windowWidth = spriteWidth + 1 } if (typeof (window.pageYOffset) == "number") { scrollPos = window.pageYOffset } else { if (document.body && document.body.scrollTop) { scrollPos = document.body.scrollTop } else { if (document.documentElement && document.documentElement.scrollTop) { scrollPos = document.documentElement.scrollTop } } } birdPosY = parseInt(document.getElementById("tBird").style.top); birdPosX = parseInt(document.getElementById("tBird").style.left); if (scrollPos + birdSpaceVertical >= birdPosY || scrollPos + windowHeight - spriteHeight < birdPosY || a) { hideButtons(); elemPosis = chooseNewTarget(); if (elemPosis.length < 1) { elemType = null; elemNr = null; elemTop = scrollPos + Math.round(Math.random() * (windowHeight - spriteHeight)); elemLeft = Math.round(Math.random() * (windowWidth - spriteWidth)); elemWidth = 0 } else { newTarget = elemPosis[Math.round(Math.random() * (elemPosis.length - 1))]; elemType = newTarget[0]; elemNr = newTarget[1]; elemTop = newTarget[2]; elemLeft = newTarget[3]; elemWidth = newTarget[4] } targetTop = elemTop - spriteHeight; targetLeft = Math.round(elemLeft - spriteWidth / 2 + Math.random() * elemWidth); if (targetLeft > windowWidth - spriteWidth - 24) { targetLeft = windowWidth - spriteWidth - 24 } else { if (targetLeft < 0) { targetLeft = 0 } } birdIsFlying = true; flyFromTo(birdPosX, birdPosY, targetLeft, targetTop, 0) } }
  function chooseNewTarget() { var l = new Array(); var a = scrollPos + spriteHeight + birdSpaceVertical; var j = scrollPos + windowHeight - birdSpaceVertical; for (var d = 0; d < targetElems.length; d++) { var k = targetElems[d]; var g = document.getElementsByTagName(k).length; for (var f = 0; f < g; f++) { var h = document.getElementsByTagName(k)[f].offsetTop; var e = document.getElementsByTagName(k)[f].offsetLeft; var b = document.getElementsByTagName(k)[f].offsetWidth; if (h <= a || h >= j || b < minElemWidth || e < 0) { continue } l[l.length] = new Array(k, f, h, e, b); if (l.length >= neededElems4random) { return l } } } return l }
  function flyFromTo(d, a, f, e, b, g) { justStarted = (b == 0); b += (b > birdSpeed / 2) ? birdSpeed : Math.round((b == 0) ? birdSpeed / 4 : birdSpeed / 2); solvedFuture = b + ((b > birdSpeed / 2) ? birdSpeed : Math.round(birdSpeed / 2)); distanceX = f - d; distanceY = e - a; distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY); solvPerc = Math.abs(1 / distance * b); solvDistX = Math.round(distanceX * solvPerc); solvDistY = Math.round(distanceY * solvPerc); solvPercFuture = Math.abs(1 / distance * solvedFuture); solvDistXFuture = Math.round(distanceX * solvPercFuture); solvDistYFuture = Math.round(distanceY * solvPercFuture); if (typeof (g) != "string") { g = null; angle = ((distanceX != 0) ? Math.atan((-distanceY) / distanceX) / Math.PI * 180 : 90) + ((distanceX < 0) ? 180 : 0); if (angle < 0) { angle += 360 } if (angle < 45) { g = "o" } else { if (angle < 135) { g = "n" } else { if (angle < 202.5) { g = "w" } else { if (angle < 247.5) { g = "sw" } else { if (angle < 292.5) { g = "s" } else { if (angle < 337.5) { g = "so" } else { g = "o" } } } } } } } if (Math.abs(solvDistXFuture) >= Math.abs(distanceX) && Math.abs(solvDistYFuture) >= Math.abs(distanceY)) { animateSpriteAbort(); switch (g) { case "so": animateSprite(1, 0, 0, 0, null, true); break; case "sw": animateSprite(1, 2, 2, 0, null, true); break; case "s": animateSprite(0, 2, 2, 0, null, true); break; case "n": animateSprite(4, 0, 0, 0, null, true); break; case "o": animateSprite(1, 0, 0, 0, null, true); break; case "w": animateSprite(1, 2, 2, 0, null, true); break; default: animateSprite(0, 0, 0, 0, null, true) } timeoutAnimation = window.setTimeout("animateSprite(0,0,0,0,null,true)", spriteAniSpeed) } if (Math.abs(solvDistX) >= Math.abs(distanceX) && Math.abs(solvDistY) >= Math.abs(distanceY)) { solvDistX = distanceX; solvDistY = distanceY; birdIsFlying = false; window.setTimeout("recheckposition()", 500) } else { if (justStarted) { animateSpriteAbort(); switch (g) { case "so": animateSprite(1, 0, 0, 0, null, true); timeoutAnimation = window.setTimeout("animateSprite(1,1,1,0,null,true)", spriteAniSpeed); break; case "sw": animateSprite(1, 2, 2, 0, null, true); timeoutAnimation = window.setTimeout("animateSprite(1,3,3,0,null,true)", spriteAniSpeed); break; case "s": animateSprite(0, 2, 2, 0, null, true); timeoutAnimation = window.setTimeout("animateSprite(0,3,3,0,null,true)", spriteAniSpeed); break; case "n": timeoutAnimation = window.setTimeout("animateSprite(4,0,3,0," + spriteAniSpeedSlow + ")", 1); break; case "o": animateSprite(1, 0, 0, 0, null, true); timeoutAnimation = window.setTimeout("animateSprite(2,0,3,0," + spriteAniSpeedSlow + ")", spriteAniSpeed); break; case "w": animateSprite(1, 2, 2, 0, null, true); timeoutAnimation = window.setTimeout("animateSprite(3,0,3,0," + spriteAniSpeedSlow + ")", spriteAniSpeed); break; default: animateSprite(0, 0, 0, 0, null, true) } } timeoutFlight = window.setTimeout("flyFromTo(" + d + "," + a + "," + f + "," + e + "," + b + ",'" + g + "')", 50) } hideButtons(); document.getElementById("tBird").style.left = (d + solvDistX) + "px"; document.getElementById("tBird").style.top = (a + solvDistY + birdSetUp) + "px" }
  function scareTheBird(a) { newTS = new Date().getTime(); if (scareTheBirdLastTime < newTS - scareTheBirdTime) { scareTheBirdCount = 1; scareTheBirdLastTime = newTS } else { scareTheBirdCount++; if (scareTheBirdCount >= scareTheBirdMouseOverTimes) { scareTheBirdCount = 0; scareTheBirdLastTime = 0; recheckposition(true) } } }
  function showButtons(d, b, a) { birdPosY = parseInt(document.getElementById("tBird").style.top); birdPosX = parseInt(document.getElementById("tBird").style.left); if (d == 0 && document.getElementById("tBirdLtweet").style.display == "block") { d = 100 } if (birdIsFlying) { d = 0 } opacity = Math.round(d * 15); if (opacity < 0) { opacity = 0 } if (opacity > 100) { opacity = 100 } if (birdPosX < b - 300 || birdPosX < b / 2) { buttonPosX1 = birdPosX + spriteWidth - 15; buttonPosX2 = birdPosX + spriteWidth - 10 } else { buttonPosX1 = birdPosX + 16 - parseInt(document.getElementById("tBirdLtweet").style.width); buttonPosX2 = birdPosX + 11 - parseInt(document.getElementById("tBirdLfollow").style.width) } buttonPosY1 = birdPosY - 0; buttonPosY2 = birdPosY - 0 + parseInt(document.getElementById("tBirdLtweet").style.height); document.getElementById("tBirdLtweet").style.left = buttonPosX1 + "px"; document.getElementById("tBirdLtweet").style.top = buttonPosY1 + "px"; document.getElementById("tBirdLtweet").style.display = "block"; document.getElementById("tBirdLtweet").style.opacity = opacity / 100; document.getElementById("tBirdLtweet").style.filter = "alpha(opacity=" + opacity + ")"; document.getElementById("tBirdLfollow").style.left = buttonPosX2 + "px"; document.getElementById("tBirdLfollow").style.top = buttonPosY2 + "px"; document.getElementById("tBirdLfollow").style.display = "block"; document.getElementById("tBirdLfollow").style.opacity = opacity / 100; document.getElementById("tBirdLfollow").style.filter = "alpha(opacity=" + opacity + ")"; if (showTweet == true) { if (typeof (window.pageYOffset) == "number") { scrollPos = window.pageYOffset } else { if (document.body && document.body.scrollTop) { scrollPos = document.body.scrollTop } else { if (document.documentElement && document.documentElement.scrollTop) { scrollPos = document.documentElement.scrollTop } } } if (birdPosX < 64) { boxMoveX = 64 - birdPosX } else { if (birdPosX > b - 64) { boxMoveX = b - birdPosX - 64 } else { boxMoveX = 0 } } txtBoxPosX = Math.round(birdPosX + spriteWidth / 2 - parseInt(document.getElementById("tBirdStatxLow").style.width) / 2 + boxMoveX); if (birdPosY < a / 2 + scrollPos) { txtBoxPosY = birdPosY + spriteHeight; document.getElementById("tBirdStatxLow").style.left = txtBoxPosX + "px"; document.getElementById("tBirdStatxLow").style.top = txtBoxPosY + "px"; document.getElementById("tBirdStatxLow").style.display = "block"; document.getElementById("tBirdStatxLow").style.opacity = opacity / 100; document.getElementById("tBirdStatxLow").style.filter = "alpha(opacity=" + opacity + ")" } else { txtBoxPosY = birdPosY - document.getElementById("tBirdStatxUpr").offsetHeight; document.getElementById("tBirdStatxUpr").style.left = txtBoxPosX + "px"; document.getElementById("tBirdStatxUpr").style.top = txtBoxPosY + "px"; document.getElementById("tBirdStatxUpr").style.display = "block"; document.getElementById("tBirdStatxUpr").style.opacity = opacity / 100; document.getElementById("tBirdStatxUpr").style.filter = "alpha(opacity=" + opacity + ")" } } if (opacity >= 100) { return } d++; showButtonsTimeout = window.setTimeout("showButtons(" + d + "," + b + "," + a + ")", 60) }
  function hideButtons() { window.clearTimeout(showButtonsTimeout); document.getElementById("tBirdLtweet").style.display = "none"; document.getElementById("tBirdLtweet").style.opacity = "0"; document.getElementById("tBirdLtweet").style.filter = "alpha(opacity=0)"; document.getElementById("tBirdLfollow").style.display = "none"; document.getElementById("tBirdLfollow").style.opacity = "0"; document.getElementById("tBirdLfollow").style.filter = "alpha(opacity=0)"; if (showTweet == true) { document.getElementById("tBirdStatxLow").style.display = "none"; document.getElementById("tBirdStatxLow").style.opacity = "0"; document.getElementById("tBirdStatxLow").style.filter = "alpha(opacity=0)"; document.getElementById("tBirdStatxUpr").style.display = "none"; document.getElementById("tBirdStatxUpr").style.opacity = "0"; document.getElementById("tBirdStatxUpr").style.filter = "alpha(opacity=0)" } }
  function getWindowWidth() { if (typeof (window.innerWidth) == "number") { ww = window.innerWidth } else { if (document.documentElement && document.documentElement.clientWidth) { ww = document.documentElement.clientWidth } else { if (document.body && document.body.clientWidth) { ww = document.body.clientWidth } else { ww = 800 } } } return ww }
  function getWindowHeight() { if (typeof (window.innerHeight) == "number") { wh = window.innerHeight } else { if (document.documentElement && document.documentElement.clientHeight) { wh = document.documentElement.clientHeight } else { if (document.body && document.body.clientHeight) { wh = document.body.clientHeight } else { wh = 450 } } } return wh }
  function is_mobile(a) { return (a.toLowerCase().search(/(iphone|ipod|opera mini|windows ce|windows phone|palm|blackberry|android|symbian|series60|samsung|nokia|playstation portable|htc[\-_]|up\.browser|profile\/midp|[1-4][0-9]{2}x[1-4][0-9]{2})/) > -1) }
  function utf8_encode(a) { a = a.replace(/\r\n/g, "\n"); utf8str = ""; for (n = 0; n < a.length; n++) { c = a.charCodeAt(n); if (c < 128) { utf8str += String.fromCharCode(c); } else { if (c > 127 && c < 2048) { utf8str += String.fromCharCode((c >> 6) | 192); utf8str += String.fromCharCode((c & 63) | 128) } else { utf8str += String.fromCharCode((c >> 12) | 224); utf8str += String.fromCharCode(((c >> 6) & 63) | 128); utf8str += String.fromCharCode((c & 63) | 128) } } } return utf8str; }
  function is_utf8(a) { strlen = a.length; for (i = 0; i < strlen; i++) { ord = a.charCodeAt(i); if (ord < 128) { continue } else { if ((ord & 224) === 192 && ord > 193) { n = 1 } else { if ((ord & 240) === 224) { n = 2 } else { if ((ord & 248) === 240 && ord < 245) { n = 3 } else { return false } } } } for (c = 0; c < n; c++) { if (++i === strlen || (a.charCodeAt(i) & 192) !== 128) { return false } } } return true }
  function hitBird() { $(document).ready(function () { $("#TwitThis").animate({ right: "+=230" }, 500); $("#TwitGirl").animate({ left: "+=210" }, 500); $("#boxTwitter").animate({ bottom: "+=110" }, 500); }); }
  function leaveBird() { $(document).ready(function () { $("#TwitThis").animate({ right: "-=230" }, 500); $("#TwitGirl").animate({ left: "-=210" }, 500); $("#boxTwitter").animate({ bottom: "-=110" }, 500); }); } var winTwHeight = 810;
  function setObjPosition(container, object) { var containerWidth = $(container).width(); var objectWidth = $(object).width(); var position = (containerWidth / 2) - (objectWidth / 2); $(object).css('left', position); }
  function setPositionOnResize(container, object) { setObjPosition(container, object); $(container).resize(function () { setObjPosition(container, object); }); }
  function hitclickBird(e) { clTwit = e; if (clTwit == "on") { document.getElementById("tBird").style.display = "none"; $(document).ready(function () { if (window.innerWidth < 450) { $("#TwitterHead").css({ top: 5, left: 5 }); $("#TwitterHead").show(); } else { setPositionOnResize(window, "#TwitterHead"); $("#TwitterHead").animate({ top: "+=" + winTwHeight }, 500); } clTwit = "off"; }); } else { document.getElementById("tBird").style.display = "block"; recheckposition(true); $(document).ready(function () { if (window.innerWidth < 450) { $("#TwitterHead").hide(); } else { $("#TwitterHead").animate({ top: "-=" + winTwHeight }, 500); } }); } }
  function setFrameAnimationUnit() { /*Element Frame Decoration Image */ $('body').append("<div id='TwitThis' align='center' style='position:fixed;right:-230px;bottom:-10px;z-index:+9999;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3FAnsDaXbwzFlQVeRqg3I7nkXWi6vfqu_KWWpPmKrB57UA3YXjZPi-EUvEeNS-mS0lrU2AK8eAPy_xTZ5Vn_2SRRUkLbnxSfoiQoIayLVswXKqqUBcHCgZrtKfm6Hv6FdT11cDwyGiEY/s1600/Girls.png' border='0'/><\/div><div id='TwitGirl' align='center' style='position:fixed;left:-210px;bottom:0px;z-index:+9998;'><img src='https:\/\/2.bp.blogspot.com/-iJRjCccEToA/VIBt1-nOcNI/AAAAAAAAErw/s6lYWXxrJ_Y/s1600/TwitGirl.png'\/><\/div><div id='boxTwitter' align='center' style='position:fixed;left:0;bottom:-110px;width:100%;height:100px;z-index:+9997; background:url(https:\/\/2.bp.blogspot.com/-0he6oh-RhM0/VIBtE6wI1bI/AAAAAAAAEqw/AI4YbfIhRyY/s1600/Grass.gif) repeat-x'><\/div>"); /*Style Frame Chat Box */ document.write("<noscript><span style='font-size:11px;'>CodeFlare<a href='https://codeflare.blogspot.com/'></a></span></noscript><style>#tBird{display:block;position:absolute;outline:none;z-index:99999;opacity:1;filter:alpha(opacity=100);transform:scale(0.7);-o-transform:scale(0.7);-moz-transform:scale(0.7);-webkit-transform:scale(0.7);-ms-transform:scale(0.7);}#tBird:hover{transition:0.5s;-o-transition:0.5s;-moz-transition:0.5s;-webkit-transition:0.5s;-ms-transition:0.5s;border:1px solid #666;border-bottom:3px solid #361500;transform:scale(1.2);-o-transform:scale(1.2);-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);opacity:1;filter:alpha(opacity=100);overflow:hidden !important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2zPBaLtGBUDOOahOnIWRCbUDuWvm51BCOsA5NBATx9sv_dQ_PL1AHob6vPKChMkdWev-RYr1gKtSrV1-rOanNhjPuMl8N-NZU3uchoEprf0VAoGinYDUW56ytdStPhsshBKuaJ8_ksOQ/s1600/animated-flying-twitter-bird.gif)center no-repeat !important;background-size:70px auto !important;border-radius:50%;}#topbarTwitter{height:25px;width:auto;background:#005094 url(https:\/\/lh6.googleusercontent.com\/-25yI9RdlTQM\/TkWH5CaAh3I\/AAAAAAAAAd4\/tl00tzlBc80\/s800\/sidebar-h2.jpg);background-repeat:repeat-x;text-align:left;box-shadow:inset 0 0 1px #fff;-moz-box-shadow:inset 0 0 1px #fff;-webkit-box-shadow:inset 0 0 1px #fff;-moz-border-radius:8px 8px 0 0;-webkit-border-radius: 8px 8px 0 0;border-radius:8px 8px 0 0;background-color:#619bb9;background:-moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background:-webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a),to(#5cb0dc));}#adstwitter{height:auto;margin:0 auto;width: auto;background:#fff;border-bottom:2px #619bb9 solid;border-right:2px #619bb9 solid;border-left:2px #619bb9 solid;text-align:Center;padding:2px;}#TwitterHead {opacity:1;height:auto;width:auto;position:fixed;left:40%;top:-800px;border-bottom:1px #619bb9 solid;border-bottom:0px blue solid;color:#333;padding:0px;z-index:9999;font-size:13px;}.topBarBoxClose{background-color:red;color:#fff;font-size:20px;float:right;padding:1px 4px 2px 4px;cursor:pointer;border-radius:0 8px 0 0;transition:all .5s linear;}.topBarBoxClose:hover{background-color:#000;}.topBarBoxTitle{font-size:15px;color:#fff;margin-left:10px;}<\/style>"); }
  setFrameAnimationUnit();tripleflapInit();
  </script>
  script code here...
  
  
  KETERANGAN
  

  • Perlu anda perhatikan pada kode
    
    
    <!-- Put the code here -->
    <iframe src='' width='350px' height='400px'></iframe>
    <!-- Put the code here -->
    
    
    
    Jika anda menggunakan live chat berbasis iFrame maka silakan anda gunakan link src iFrame dari aplikasi live chat yang anda gunakan.
  
  
  • Jika anda menggunakan live chat berbasis javascript silakan anda ganti kode iFrame diatas dengan kode Javascript dari aplikasi live chat yang anda gunakan.
  
  
  • Selain aplikasi live chat anda juga bisa menggunakan aplikasi web based lainnya atau aplikasi web buatan sendiri, karena widget ini fleksible jadi bisa disesuaikan dengan kebutuhan anda.

Demikian artikel blog tentang Tombol Live Chat Menggunakan Animasi Interaktif Burung Terbang terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Chat Box