> ## Documentation Index
> Fetch the complete documentation index at: https://docs.custral.com/llms.txt
> Use this file to discover all available pages before exploring further.

# On Phones and From the Keyboard

> How the chat widget behaves on a phone, and how visitors use it with a keyboard or a screen reader.

## Overview

The chat widget works the same everywhere, and adjusts to the screen it's on. On a phone
it fills the screen. With a keyboard, visitors can open, use and close it without a mouse.
There is nothing to set up.

## On a phone

On a screen narrower than 640px, or a phone held sideways, the chat fills the screen, the
way Intercom's and Crisp's do.

* The page behind the chat stops scrolling until the visitor closes it.
* The chat button steps aside while the chat is open, and the **✕** in the header closes it.
* When the visitor taps the message box, the chat shrinks to the space above the phone's
  keyboard, so the header and the message box stay in view.
* Opening the chat doesn't raise the keyboard by itself, so visitors see your greeting and
  the suggested questions first.
* Buttons are sized for thumbs: 44px in the header, at least 40px for the suggested
  questions and the [buttons after an answer](/comms/chat/answer-buttons).
* On iPhones there is room at the bottom for the home bar.

On any touch screen, including tablets, every text box uses 16px text, so iPhones and iPads
don't zoom into the page when a visitor taps one.

To see it before it goes live, pick **Phone** above the live preview in **Settings → Chat
Widget → Settings**.

## From the keyboard

* Opening the chat puts the cursor in the message box.
* **Tab** moves through the chat in order, and back out to your page.
* **Esc** closes the chat and puts focus back on the chat button.
* Past conversations are buttons: **Tab** to one and press **Enter** to open it.
* The widget draws its own focus ring, so visitors can see where they are even if your
  site turns focus outlines off.
* If the chat is closed before a message is sent, the text is still there when it's
  opened again.

## Screen readers

The chat is labelled as a dialog ("Chat with" and your workspace name), and screen readers
read out each new message as it arrives.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.