Customer Support Chat Screen

Customer support chat screen for mobile apps with agent header, order card message, quick reply chips, star rating request, typing indicator and a message composer.

Also known as: live chat ui, support chat app screen, chatbot ui with quick replies, help desk chat interface, mobile chat screen html

Pure CSS Mobile Chat & Messaging Responsive #app #chat #mobile #rating #support

Customer Support Chat Screen live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

Beautify

A customer support chat screen built with pure CSS and vanilla JavaScript: an agent header with online status, bot and agent messages, an order card inside the conversation, quick reply chips, a star rating request and a message composer with an attachment sheet. It is an HTML mobile template for mobile sites and PWAs and can be packaged with Capacitor. Use it as the live chat UI, help desk chat or chatbot interface of a shop or service app.

How it works

The root .sc-app is a full-height column (max 430px, centred on wide screens): the .sc-top agent header, the scrollable .sc-log (role="log", scrolled to the newest message on load) and the .sc-foot with quick replies and the composer.

Messages are .sc-msg--in (bot or agent, with avatar and .sc-sender name) and .sc-msg--out (the customer, in purple). The .sc-order card shows the product, an "Out for delivery" .sc-pill and a four-step .sc-track progress bar.

Each .sc-chip sends its label as a message. The composer form [data-sc-composer] keeps the send button disabled until text is typed, then appends the message with the current time, shows the [data-sc-typing] indicator and posts an answer from REPLIES (or FALLBACK).

The rating request [data-sc-rate] is a group of five radio buttons drawn as stars; choosing one lights up all stars up to it, and Send without a choice shows an error. The attachment button opens dialog.sc-sheet, a bottom sheet with Photo, Receipt and Document options that add a file message.

Customization

--sc-accent, --sc-accent-dark and --sc-accent-soft on .sc-app: the purple of outgoing bubbles, buttons, chips and the order progress.
--sc-in: the background of incoming bubbles; --sc-star: the colour of lit stars.
REPLIES and FALLBACK in script.js: the demo answers; replace reply() with a call to your chat backend or WebSocket.
.sc-chip buttons in index.html: change the quick reply labels and add matching keys to REPLIES.
data-sc-file and data-sc-share on the .sc-sheet-item buttons: the file name and label used for the attachment message.
The rating submit handler: add fetch() where the comment says, to store the score.

Use cases

Online stores: answer order and delivery questions next to the order details.
Banking and insurance apps: chatbot to human handover.
Telecom and utility apps: quick replies for common requests such as plan changes.
SaaS help centers: collect a satisfaction rating at the end of each chat.

Accessibility

The log has role="log" with aria-live="polite", so new messages are announced. Icon buttons carry aria-labels, the stars are real radio buttons in a fieldset with a hidden legend, so arrow keys change the rating, and the error message is linked with aria-describedby. The sheet is a modal <dialog>: Escape and a tap on the backdrop close it and focus returns to the attachment button. The typing dots and the sheet animation stop with prefers-reduced-motion.

Usage notes

The agent portrait and product photo come from Unsplash; replace them with your own images.

Customer Support Chat Screen at a glance

Framework: Pure CSS
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: fonts.googleapis.com, Bootstrap Icons
Layout: Mobile-first app screen, centred on wider screens
Category: Mobile Chat & Messaging
License: Free for personal and commercial use

Questions about this template

Can I use the Customer Support Chat Screen code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load fonts.googleapis.com and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">