UMD (Script Tag)

The simplest way to use QuikChat — one <script> tag, zero build step. Theme switching, toggle title/input, alternating colors.

Code

<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">
<script src="https://unpkg.com/quikchat/dist/quikchat.umd.min.js"></script>

<div id="chat" style="height: 400px;"></div>

<script>
const chat = new quikchat("#chat",
  (chat, msg) => {
    chat.messageAddNew(msg, "me", "right");
    chat.messageAddNew("Got it!", "bot", "left");
  },
  { theme: "quikchat-theme-light",
    titleArea: { title: "My Chat", align: "left", show: true } }
);
</script>