Home » How To » Cara Membuat Popup Chat Pada Sebuah Website

Cara Membuat Popup Chat Pada Sebuah Website

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat popup chat pada sebuah website dengan CSS dan JavaScript. Popup chat merupakan sebuah tampilan kotak chat biasanya ada untuk beberapa website, biasanya pada website penjualan ataupun layanan. Tampilan kotak chat akan ada di pojok kanan bawah website, lalu kita bisa klik kemudian bisa langsung melakukan chat di sana, biasanya kita akan chat dengan admin dari websitenya. Kali ini kita akan coba membuat secara sederhana popup chat nya menggunakan CSS untuk tampilannya, HTML isi tampilannya dan Javascript untuk logika berjalannya chat popup tersebut. Contohnya seprti ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
{box-sizing: border-box;}

/* Tombol yang digunakan untuk membuka formulir obrolan - tetap di bagian bawah halaman */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* Chat popup - disembunyikan secara default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Tambahkan style ke container form */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Textarea full-width */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* Saat textarea menjadi fokus, lakukan sesuatu */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Tetapkan gaya untuk tombol kirim / masuk */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Tambahkan warna background merah ke tombol batal */
.form-container .cancel {
  background-color: red;
}

/* Tambahkan beberapa efek hover ke tombol */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}
</style>
</head>
<body>

<h2> Contoh Chat Popoup Pada Website </h2>
<p> Klik tombol "Chat" di bagian bawah halaman ini untuk membuka formulir chat. </p>
<p> Perhatikan pada tombol dan formulir yang sudah diperbaiki - mereka akan selalu diposisikan di bagian bawah jendela browser. </p>

<button class="open-button" onclick="openForm()">Chat</button>

<div class="chat-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Chat</h1>

    <label for="msg"><b>Message</b></label>
    <textarea placeholder="Type message.." name="msg" required></textarea>

    <button type="submit" class="btn">Kirim</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Tutup</button>
  </form>
</div>

<script>
function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
</script>

</body>
</html>

Cara Membuat Popup Chat

Langkah 1) Tambahkan HTML
Gunakan elemen <form> untuk memproses masukan.
Contoh

<div class="chat-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Chat</h1>

    <label for="msg"><b>Message</b></label>
    <textarea placeholder="Type message.." name="msg" required></textarea>

    <button type="submit" class="btn">Kirim</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Tutup</button>
  </form>
</div>

Langkah 2) Tambahkan CSS:
Contoh

{box-sizing: border-box;}

/* Tombol yang digunakan untuk membuka formulir obrolan - tetap di bagian bawah halaman */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* Chat popup - disembunyikan secara default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Tambahkan style ke container form */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}

/* Textarea full-width */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}

/* Saat textarea menjadi fokus, lakukan sesuatu */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}

/* Tetapkan gaya untuk tombol kirim / masuk */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Tambahkan warna background merah ke tombol batal */
.form-container .cancel {
  background-color: red;
}

/* Tambahkan beberapa efek hover ke tombol */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

Langkah 3) Tambahkan JavaScript:
Contoh

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

You may also like