Support Channels Grid

Getting hold of us

Four ways in, and a person at the end of all of them

No ticket deflection and no chatbot standing in the doorway. Pick whichever suits the size of the problem.

In-product chat

Fastest for anything happening right now. Opens against the record you are looking at, so nobody asks you to describe it twice.

Median 11 minutes

Mon to Fri, 07:30 – 18:30 UK

Email

Best for anything with attachments, exports, or a question your finance team needs in writing.

Within one working day

Answered every weekday

Phone

For when a clinic is opening in twenty minutes and something is wrong. It rings an engineer, not a queue.

Answered in under 3 rings

Mon to Fri, 07:00 – 19:00 UK

Status page

Check before you write. Incidents appear here before anyone asks, with the write-up attached afterwards.

Updated within 5 minutes

Always on

Whoever answers, you get an engineer

Support shifts are taken by the people who wrote the code, founders included. The person who replies can also fix it.

Deep green gradient backdrop
Portrait of Tom Ashby

Tom Ashby

On support today

Replying now

Shift07:30 – 15:30 UK
Also writesScheduling and rota
Open threads3
About this block

Support Channels GridPRO

A support section listing four linked contact channels as a hairline matrix, each with an icon tile, its response time, and its hours, beside a soft panel floating a live card for whoever is on shift.

Chat24: Support Channels Grid

A support section listing four linked contact channels as a hairline matrix, each with an icon tile, its response time and its hours, beside a soft panel floating a live card for whoever is on shift.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

bash
npx shadcn add "https://ui.beste.co/r/chat24?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

bash
npx shadcn add "https://ui.beste.co/r-base/chat24?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/chat24.tsx, the card31 person piece it floats in the panel (installed to components/beste/piece/card31.tsx), and the badge23 component it uses for the eyebrow.

Quick start

The installed file exports chat24Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

tsx
import { Chat24, chat24Demo } from "@/components/beste/block/chat24";

export default function SupportPage() {
  return <Chat24 {...chat24Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsx
import { Card31 } from "@/components/beste/piece/card31";
import { Chat24 } from "@/components/beste/block/chat24";
import { Mail, MessageSquare } from "lucide-react";

export default function SupportPage() {
  return (
    <Chat24
      badge={{ label: "Getting hold of us" }}
      heading="Four ways in, and a person at the end of all of them"
      description="No ticket deflection and no chatbot standing in the doorway."
      channels={[
        {
          icon: MessageSquare,
          title: "In-product chat",
          description: "Opens against the record you are looking at.",
          response: "Median 11 minutes",
          hours: "Mon to Fri, 07:30 to 18:30 UK",
          href: "/support/chat",
        },
        {
          icon: Mail,
          title: "Email",
          description: "Best for anything with attachments or exports.",
          response: "Within one working day",
          hours: "Answered every weekday",
          href: "mailto:support@example.com",
        },
      ]}
      mediaTitle="Whoever answers, you get an engineer"
      mediaBody="Support shifts are taken by the people who wrote the code."
      media={
        <Card31
          avatar={{ src: "/people/tom.jpg", alt: "Portrait of Tom Ashby" }}
          name="Tom Ashby"
          role="On support today"
          status="Replying now"
          availability="free"
          rows={[{ label: "Shift", value: "07:30 to 15:30 UK" }]}
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
    />
  );
}

Props

PropTypeDefaultDescription
badge{ label: string }–Eyebrow above the hairline rule, rendered through Badge23
headingstring–Section heading in the left column of the header
descriptionstring–Supporting paragraph, right-aligned from md up
channelsChannel[][]Linked contact channels, two-up from sm
mediaTitlestring–Heading in the soft panel
mediaBodystring–Paragraph in the soft panel
mediaReactNode–Live asset in the panel, card31 in the demo
image{ src: string; alt: string }–Backdrop behind the media tile
classNamestring–Extra classes for the outer section
ts
import type { LucideIcon } from "lucide-react";

type Channel = {
  icon: LucideIcon;
  title: string;
  description: string;
  response: string;
  hours: string;
  href: string;
};

Behavior notes

  • Each channel is a whole Link with a hover fill, so the entire cell is one target. Cells are flex flex-col with the description marked flex-1, so the response line and hours align along the bottom across all four.
  • The matrix lines are the gap, not borders: gap-px over a bg-border container with bg-card cells, and the container's overflow-hidden clips the corners so it reads as one panel.
  • response carries its own border-t, so the hairline belongs to the timing pair rather than sitting as a divider in the cell.
  • Both response and hours are required on every channel. A channel that names no response time is the thing this block exists to avoid.
  • Icons are passed as components, not names. Import the lucide-react icon and hand it over; the block renders it at size-5 in a size-10 tinted tile marked aria-hidden.
  • The panel is flex flex-col with the tile marked flex-1 and min-h-72, so the tile grows to match the channel matrix beside it rather than leaving a gap under the copy.
  • The layout is a 1.5fr to 1fr split from lg, giving the four channels the wider track, and stacks below that with the panel landing last.

More Chat blocks

View all Chat
PRO

chat27

Inverted Out Of Hours Panel

A support section built as one dark panel, with a light heading, three hairline promises about who answers, two actions, and a bordered column floating a live on-call conversation.

PRO

chat31

Two Sides Of One Conversation

A messaging section splitting a hairline matrix between the staff view and the member view, each half floating its own live asset above a title and a list of what that side gets.

PRO

chat23

Messaging Overview Split

A messaging section pairing a light heading, a hairline table of response figures, and two actions with an image tile that floats a live conversation thread.

PRO

chat29

Saved Reply Library

A messaging section where a hairline list of saved replies, each with what it is for and how often it is used, swaps a bordered preview card showing the message and the fields it fills in from the record.

PRO

chat21

AI Capabilities Feature Grid

Feature grid section showcasing AI capabilities. Each card includes an icon, title, description, and a mini chat bubble preview demonstrating the capability.

PRO

chat28

Conversation Handover Trail

One member conversation walked through as timestamped hairline rows inside a bordered panel, each naming what happened and either the person who picked it up or the step that ran on its own.