Group Chat Screen with Reactions

Group chat screen for mobile apps with member avatars, sender names, emoji reactions by long press or button, reply preview with quoted messages and a composer.

Also known as: group messaging app ui, chat app with emoji reactions, message reactions ui, reply to message chat ui, mobile chat screen html

Pure CSS Mobile Chat & Messaging Responsive #app #chat #messaging #mobile #reactions

Group Chat Screen with Reactions live demo

Open in new tab

Pure CSS code (HTML, CSS, JS)

Beautify

A group chat screen with emoji reactions, built with pure CSS and vanilla JavaScript: a header with stacked member avatars, messages with coloured sender names, reaction pills, a long-press reaction picker, quoted replies and a composer with a reply preview. It is an HTML mobile template for mobile sites and PWAs and can be packaged with Capacitor. Use it as the group messaging UI of a community, team or social app.

How it works

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

Each message is a [data-gc-msg] element with data-gc-sender. Incoming messages show an avatar and a .gc-name whose colour comes from data-gc-color (1 to 5); your own messages use .gc-msg--out and the teal bubble. A .gc-quote inside a bubble shows the message it replies to.

Reactions are .gc-react buttons with data-gc-emoji, data-gc-count and aria-pressed. Tapping a pill adds or removes your reaction. To react with a new emoji, press and hold a bubble for LONG_PRESS_MS (450 ms), right-click it, or use the smiley .gc-add button next to it. This opens the [data-gc-sheet="actions"] bottom sheet with six emojis, Reply and Copy text.

Reply fills the [data-gc-replying] bar above the composer; sending adds the message with its quote. The people icon opens the member list.

Customization

--gc-accent, --gc-accent-dark and --gc-accent-soft on .gc-app: the teal of your bubbles, send button, selected reactions and reply bar.
--gc-name-1 to --gc-name-5: sender name colours, chosen per message with data-gc-color.
LONG_PRESS_MS in script.js: how long a bubble must be held before the picker opens.
The [data-gc-pick] buttons in the actions sheet: swap the six emojis for your own set.
data-gc-count and aria-pressed on a .gc-react: preset counts and your own reactions in the markup.
The composer submit handler: send the text and replyTo to your messaging backend before it is added to the log.

Use cases

Community and club apps: plan events with a group and react instead of replying.
Team chat in workplace PWAs: quote a message to keep threads clear.
Family and friends messengers: quick emoji reactions on shared updates.
Course and classroom apps: group discussions with sender names and replies.

Accessibility

The log is announced politely as new messages arrive. Every message has a visible .gc-add button, so reactions and replies never depend on long press. Reaction pills are toggle buttons with aria-pressed and labels such as "2 reactions, including yours". Both sheets are modal <dialog> elements: Escape or a tap on the backdrop closes them and focus returns to the button that opened them. The sheet slide-in and press effect are disabled with prefers-reduced-motion.

Usage notes

Avatars are Unsplash portraits; replace them with your own images. Copy uses the Clipboard API, which sandboxed previews may block.

Group Chat Screen with Reactions 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 Group Chat Screen with Reactions 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=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">