chat-popup-drawer

Summary

Right-anchored chat-style drawer triggered by a fixed circular icon in the bottom-right of the page. Slides in from off-canvas with a CSS transition, dismissible via the close button, backdrop click, or the Escape key.

HTML structure (minimal)

<div class="chat-icon">
  <button type="button" class="chat-toggler"><i class="far fa-comment"></i></button>
</div>

<div id="chat-popup" class="chat-popup">
  <div class="popup-inner">
    <div class="close-chat"><i class="icon-31"></i></div>
    <div class="chat-form">
      <p>Please fill out the form below and we will get back to you as soon as possible.</p>
      <form method="post" action="index.html">
        <div class="form-group">
          <input type="text" name="name" placeholder="Your Name" required>
        </div>
        <div class="form-group">
          <input type="email" name="email" placeholder="Your Email" required>
        </div>
        <div class="form-group">
          <textarea name="message" placeholder="Your Text"></textarea>
        </div>
        <div class="form-group message-btn">
          <button type="submit" class="theme-btn btn-one"><span class="text">Submit Now</span></button>
        </div>
      </form>
    </div>
  </div>
</div>

Key SCSS tokens

.chat-popup {
  position: fixed;
  right: -100%; /* parked off-canvas */
  bottom: 0;
  width: 350px;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  background: #fff;
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  transition: all 0.5s ease-in-out 0.1s;
}
.chat-popup.popup-visible {
  right: 0;
  visibility: visible;
  opacity: 1;
}

.chat-popup .close-chat {
  position: absolute; left: 0; top: -65px;
  width: 50px; height: 50px;
  background: var(--theme-color);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}

Animation logic

if ($('#chat-popup').length) {
  $('.chat-toggler').on('click', function() {
    $('#chat-popup').addClass('popup-visible');
  });
  $(document).keydown(function(e) {
    if (e.keyCode === 27) $('#chat-popup').removeClass('popup-visible');
  });
  $('.close-chat,.chat-popup .overlay-layer').on('click', function() {
    $('#chat-popup').removeClass('popup-visible');
  });
}

Notable details

• The drawer is parked at right: -100% rather than translated, so the transition implicitly handles a right: 0 slide-in.
• Escape key handling and the close button + backdrop click all use the same removeClass so dismissal is consistent.
• The close button hangs above the drawer (top: -65px) — a common chat-app design where the X overlaps the page above.
• Uses the same .theme-btn button as everywhere else — visually consistent with the rest of the site.

Use when

• Marketing pages that want a feedback / contact widget that doesn't navigate away.
• Designs that already have a real chat platform (Intercom, Crisp) but need a placeholder to demo or fall back to.

Caveats

• The form posts to index.html — non-functional placeholder. Wire to a real endpoint.
• No focus trap inside the drawer; tabbing escapes back to the page.
• The toggler icon uses Font Awesome (far fa-comment); requires the FA stylesheet.