Skip to main content

​
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.
  • 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.