Screenshots

By creating screenshots to display on your website or in emails, you can show customers the benefits of using Business Chat to communicate with your company.

Screenshot of a business chat conversation that includes a bubble that provides a rich link. The bubble contains an image of a cabinet, the cabinet's price, and the company's web address. The image functions as a link that opens the website to a page about the cabinet.

Although you can create custom screenshots from scratch, the easiest method is to download the Business Chat templates from Apple Design Resources and edit them as needed. These templates include components — such as a message list, conversation view, time picker, and list picker — and symbols. You can also download an iPhone 11 Pro device frame in which to display the screenshots.

Regardless of how you choose to create your screenshots, ensure that they look good and depict conversations accurately. To produce realistic screenshots:

Status Bar

The system-provided status bar appears at the top edge of the screen and displays information like current time, cellular carrier, network connection status, and battery level. The status bar's background is transparent by default, and the information it displays can be light or dark, depending on the appearance of the content behind it. It's important to include the status bar in the screenshots you create, because people expect to see it in a messaging experience.

For consistency, use the following values in every status bar you create:

  • Time is 9:41. Use SF Pro Regular and don't add a.m. or p.m.
  • Cellular and Wi-Fi icons show maximum connectivity.
  • Battery is full and doesn't include the charging glyph.

Partial screenshot of a status bar that shows a time of 9:41, full cell bars, full battery, and maximum Wi-Fi connection.

The navigation bar — which contains the Messages header — extends to the top of the screen. The system composites the status bar on top of the navigation bar, which lets the navigation bar's background color show through. You can use the same custom colors for the navigation bar background and buttons as you use in the rest of your Business Chat UI. For guidance, see Color.

To make your screenshots look realistic, include these items in your navigation bar and Messages header:

  • A back button at the far left
  • An Info button at the far right
  • Your company logo centered between the back and Info buttons
  • Your company name, followed by a transparent checkmark inside a white or black circle, centered below the logo

Use a maximum height of 27 pixels for your logo and 14 pixels for your company name and checkmark. Your navigation bar and Messages header should look something like this:

Partial screenshot highlighted to show a navigation bar that contains a back button, an Info button, and the header Company Name.

Chat Bubbles

Chat bubbles appear in the conversation area of the Messages app screen. All conversation content, including text, links, and images, must appear within chat bubbles.

To help people understand the flow of the conversation in your screenshot, it's important to be consistent about how you use chat bubbles to represent the participants. Use the following values for the bubble background color, the direction of its tail, and the text color. Use SF Pro Regular for all text.

Participant Background color Tail direction Text color
Customer #848E99 Right White
Agent #E635EB Left Black

If you show only two chat bubbles, use 4 points of vertical space to separate them. If you need to show more chat bubbles, or more than one Send action, use 1 pixel to separate bubbles.

For a chat bubble that contains only text, use the following values to determine its height.

Rows of text Chat bubble height (pixels)
1 36
2 57
3 76
4 96
5 118

For guidance on creating realistic conversations, see Responding to Customers.

You might also want your screenshot to show chat bubbles that include icons or rich links that display images or videos. When a chat bubble includes a rich link, the title and the website URL appear below the image or video. An icon appears by itself in a chat bubble. If you want to include images or icons in your chat bubbles, use the following values to determine the bubble's size.

Content Maximum content size (pixels) Chat bubble size (pixels)
Image (with tail) Large (265 × 160) 270 × 210
Image (without tail) Large (265 × 160) 265 × 210
Image (with tail) Extra large (276 × 160) 280 × 210
Icon Medium (280 × 85) 280 × 85
Icon Small (60 × 33) 280 × 65

The Compose Area

The compose area appears below the conversation area and above the keyboard, if one is present. From the left, the compose area includes a camera button and an apps button, followed by a text input field, which contains placeholder text and the microphone glyph. Use To: MyCompanyName for the placeholder text and use dark gray (#868E99) for the microphone glyph.

Partial screenshot of the compose bar below a message. The bar contains a camera button, an apps button, and an address view that displays a microphone button and the placeholder text 'To: Company Name'."

If you want to include the keyboard in your screenshot, add the blue typing indicator to the text input field, using #007AFF for the color. If you also want to show what the customer is typing, move the typing indicator to the right of the input text and replace the microphone glyph with the Send button.

Partial screenshot of the compose bar below a message. The bar contains a camera button, an apps button, and an address view that displays a microphone button, the placeholder text 'To: Company Name', and the typing indicator to the left of the placeholder text."

References to Apple Business Chat

Always adhere to Guidelines for Using Apple Trademarks. Apple trademarks should not appear in your app name or imagery. In text, use Apple product names exactly as shown in Apple Trademark List — never make them plural or possessive.

To refer to Apple Business Chat in headlines or copy, use three words with an uppercase A, an uppercase B, and an uppercase C, and lowercase for all other letters.

Never use the Apple logo to represent the name Apple in text.

Example text
White check in a green circle to indicate correct usage. Apple Business Chat
White X in a gray circle to indicate incorrect usage. Apple business chat
White X in a gray circle to indicate incorrect usage. APPLE BUSINESS CHAT
White X in a gray circle to indicate incorrect usage.  Business Chat