Support Chat Widget Settings Block for React

Only the drawn bubble. The slider has 336 steps, one for every half hour from Monday 00:00, and it is not part of the saved settings. Wherever it rests, the bubble applies the rows above: inside a day's opening and closing times it shows the greeting and the typical reply time, outside them it shows the offline message and the next half hour the desk is in. Edit a row and the bubble follows without moving the slider.

In minutes from midnight, in steps of 30, so 09:00 is 540. Opening times run from 00:00 to 23:30 and closing times from 00:30 to 24:00. If you pick an opening at or after the closing time the closing moves to the next half hour, and if you pick a closing at or before the opening the opening moves to the half hour before it; the status line says which one moved. A Closed switch greys the times out and keeps them, so turning it off brings the old hours back.

The hours are shown as plain clock times with no zone, because the block does not know the visitor's. In your app store the hours with the desk's zone, convert to the visitor's when you show whether someone is in, and decide what a holiday does. The typical reply time is a typed constant, not something measured.

Everything. Nobody is answering, Save keeps the hours in this page's state and says so, and the bubble is a drawing. To make it real, save the hours, greeting and offline message with the site, have your chat loader read them to decide which text to show, and compute whether someone is in on the server so every visitor sees the same answer.

Every control is named for its day, for example Closed all day on Monday, and the slider reads its value as words such as Wednesday 14:00 and moves with the arrow keys and Home and End. The status line is a polite live region. On a phone each day takes two lines, the bubble sits under the slider and the action foot is pinned to the bottom of the screen. The day names under the track are decoration and hidden from assistive technology.