MoreLesson 267Free preview

Popup Chat Window

This lesson is part of How To · All levels

Summary

A popup chat window is a small conversation panel that appears from the corner of a page when a chat button is clicked. The panel is usually fixed at the bottom right, then displayed or hidden with JavaScript. Make sure the button has a clear status and the user's focus is not lost when the panel is opened.

Key points

Position: fixed to attach the buttons and panels to the viewport as the page rolls.
ClassList.toggle or hidden attribute can open and close the panel.
The expanded air tells the screen reader if the panel is open.
Manage focus and provide a shutter button so keyboard users don't get stuck.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.