Skip to content

BRD-007 Persistent Close Button

BRD – Persistent & Predictable Chatbot Close Button

Product: MachineAvatars
Feature: Fixed Close Button Position Across Chat States

1. Background & Problem Statement

  • The chatbot opens in a modal with an avatar at the top and chat window below.
  • On first interaction, the modal expands and repositions elements, shifting the avatar and chat layout.
  • During this transition, the close (“X”) button moves away from the expected top-right position.
  • Users instinctively look for close actions at the top-right, leading to confusion and poor usability.

2. Objective

Ensure the chatbot close button remains in a consistent, predictable position regardless of modal state or layout changes.

3. Scope

In-Scope

  • Fix close button position across all chatbot UI states.
  • Ensure close button remains easily discoverable at the top-right of the chatbot container.
  • Maintain consistent close behavior before and after chat expansion.

Out-of-Scope

  • Redesign of chatbot avatar or chat layout.
  • Adding secondary close or minimize buttons.
  • Changing close behavior logic.

4. User Personas

  • End User: Needs a clear and predictable way to close the chatbot.
  • Admin (Indirect): Ensures better UX and reduced frustration.

5. High-Level User Flow

  1. User opens the chatbot.
  2. Close button is visible at the top-right.
  3. User sends first message.
  4. Chatbot expands.
  5. Close button remains at the top-right of the modal.
  6. User closes the chatbot at any point.

6. Functional Requirements

  • FR-1: Close button shall remain fixed at the top-right of the chatbot modal.
  • FR-2: Close button position shall not change on chat expansion or layout shifts.
  • FR-3: Close button shall be visible and clickable at all times when chatbot is open.
  • FR-4: Close action shall immediately close the chatbot modal.

7. Constraints & Non-Functional Requirements

  • Close button must not overlap chat content or avatar.
  • Positioning must work across screen sizes and devices.
  • No layout jitter or repositioning during state transitions.

8. Acceptance Criteria

  • Given the chatbot is opened, when viewed initially, then the close button is visible at the top-right.
  • Given the chatbot expands after first message, when layout changes, then the close button does not move.
  • Given the chatbot is open, when the user clicks the close button, then the chatbot closes immediately.
  • Given repeated open–close cycles, when tested, then close button behavior remains consistent.