Membuat Layout Chatbox Melayang dengan Bootstrap

Bagi kalian sebagai pengguna internet jika sedang meilhat sebuah website, terutama website toko online, pasti sangat mengharapkan adanya Chat di website tersebut untuk bertanya-tanya tentang barang yang akan kalian beli. Banyak sekali aplikasi pihak ketiga dalam memberikan layanan live chat yang tersedia di internet untuk website kalian. Namun kali ini kita akan coba membuat sebuah kotak live chat yang akan kita tempatkan layaknya aplikasi pihak ketiga live chat lain.

Pada artikel ini saya akan menggunakan layout live chat yang sudah saya buat pada artikel saya yang berjudul membuat layout chatboox bootstrap. Kalian wajib membuat layout seperti yang ada pada artikel tersebut, jika sudah selajutnya kita akan memberikan css untuk merapikan layout tersebut

Berikut adalah CSS yang akan kita gunakan untuk merapikan isi daric hatbox tersebut

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

.chat li
{
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #B3A9A9;
}

.chat li.left .chat-body
{
    margin-left: 60px;
}

.chat li.right .chat-body
{
    margin-right: 60px;
}

.chat li .chat-body p
{
    margin: 0;
    color: #777777;
}

.panel .slidedown .glyphicon, .chat .glyphicon
{
    margin-right: 5px;
}

.panel-body
{
    overflow-y: scroll;
    height: 250px;
}

::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

Selanjutnya kita akan membuat chat box tersebut menjadi berada di sebelah kanan bawah seperti pada umumnya dengan CSS seperti berikut

.chatbox{
    width:300px;
    position:fixed;
    right:50px;
    bottom:0px;
}

Nah teman teman hasil akhirnya nanti akan berada pada sebelah kanan bawah.

Baiklah teman teman layout chatbox sudah siap digunakan, selanjutnya kalian bisa berikan fungsi masing masing dengan berbagai Bahasa program seperti node js atapun juga php dengan bantuan ajax, demikian artikel kali ini yang membahas tentang membuat chatbox melayang pada webste, semoga bermanfaat