Get started with bootstrap-chat CDN

MIT licensed

Bootstrap-chat is a library for creating interactive chat interfaces using Bootstrap components.

Tags:
  • bootstrap
  • chat
  • bootstrap5
  • responsive
  • mobile-app
  • desktop-application

Stable version

Copied!

How to start using bootstrap-chat CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with bootstrap-chat CDN - cdnhub.io</title>
  <link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-chat/1.0.2/bootstrap-chat.min.css">
  <style>
    #chat-container {
      height: 400px;
      border: 1px solid #ccc;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
  <div id="chat-container">
    <div class="chat-message chat-message-recieved">
      <div class="chat-message-avatar">
        <img src="https://via.placeholder.com/150x150.png?text=User+Profile+Picture" alt="User Profile Picture">
      </div>
      <div class="chat-message-content">
        <p>Hello, how are you?</p>
      </div>
    </div>
  </div>
  <form id="chat-form">
    <div class="input-group">
      <input type="text" class="form-control" id="chat-input" placeholder="Type your message here...">
      <button type="submit" class="btn btn-primary">Send</button>
    </div>
  </form>
  <script src="https://cdn.cdnhub.io/bootstrap-chat/1.0.2/bootstrap-chat.min.js"></script>
  <script>
    new Chat('chat-container', {
      onMessage: function(message) {
        console.log('New message:', message);
      }
    });

    document.getElementById('chat-form').addEventListener('submit', function(event) {
      event.preventDefault();
      const input = document.getElementById('chat-input');
      new Chat('chat-container').sendMessage(input.value);
      input.value = '';
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions