Messages for Business helps customers connect with businesses through the Messages app in iOS, iPadOS, macOS, visionOS, and watchOS.
Using the Messages app, people can contact your company to ask questions, get support, schedule appointments, make payments with Apple Pay, and more.
People can use apps, features, and services like Maps and Spotlight to discover businesses and seamlessly initiate conversations with them. The familiar Messages app interface on iPhone, iPad, Mac, and Apple Watch ensures that customer interaction is intuitive and efficient, and the informality of messaging produces a customer service experience that feels personal and meaningful.
Although Messages for Business conversations occur within the experience of the Messages app, you can still leverage your logo and color scheme to call attention to your brand and build a memorable conversation experience.
Strive for uniqueness. It’s critical to avoid building an experience that might cause people to confuse your brand with other brands. In particular, your logo design and use of color must never cause people to think they’re conversing with Apple.
Customers use Messages for Business buttons to start a conversation with your company. You can also support system features like Maps and Spotlight, so that customers can use them to locate your business and start a conversation. Other ways to help customers contact you are to:
•
•
•
Add Messages for Business buttons to your app or your company’s website (see Design your website and app for the Messages buttons)
Let people start conversations anytime. Don’t dim or turn off buttons or links that initiate conversations outside of your business hours. Even if you only respond to customer service inquiries during certain hours, people need to be able to start a conversation anytime. If a customer starts a conversation after hours when live agents aren’t available, an automated agent needs to send a reply letting them know when a live agent is able to respond.
The following guidelines help you use Messages for Business buttons correctly and refer appropriately to the feature in all your customer-facing communications. To learn how to create screenshots that show customers how Messages for Business interactions work with your company, see Screenshots.
Use Messages for Business buttons in places where customers might want to contact your business. For example, use the buttons in your app, on your website, or in an email to make it easy for people to start a new conversation.
App
Website
Email
Let the default button title encourage customers to contact you. System-provided button titles like “Message Us,” “Get Help,” “Ask a Question,” or “Contact an Agent” help people understand what the button does. If you use the logo-only button, consider displaying the text “Apple Messages” near the button to help people recognize the service.
Show the buttons on supported devices. If a customer is using an unsupported device, don’t encourage a conversation by displaying a button — on websites, the button hides automatically when it isn’t supported. If the button is hidden, update the layout accordingly and remove the call to action or other related text.
Make sure Messages for Business buttons are discoverable. People generally expect to find the button on contact information, support, order confirmation, product, and order history pages.
Display the button prominently. Make Messages for Business buttons the same size or larger than similar contact initiation buttons, such as an email button.
Use only approved button styles. For guidance, see Design your website and app to include the Messages buttons.
Maintain minimum and maximum button sizes and inner side margins. Use the following values for guidance.
Max width | Min height | Max height | Min side margins |
1000 pt (2000 px @2x) | 40 pt (80 px @2x) | 150 pt (300 px @2x) | 5% of height |
Don’t make any other visual or functional modifications to buttons. For example, don’t change transparency values or add drop shadows.
Maintain minimum clear space. The minimum amount of clear space required around the buttons is 10% of the button’s height. Don’t let other elements infringe on this space or occlude the button in any way.
Maintain the minimum button size and margin values when manually placing buttons on a webpage. You’re responsible for sizing and placing the buttons correctly.
Use the following margin values for guidance.
Margin | Minimum value |
Top and bottom | 15 pt (15 px @1x, 30 px @2x) |
Left and right | 20 pt (20 px @1x, 40 px @2x) |
Between buttons | 15 pt (15 px @1x, 30 px @2x) |
For developer guidance, see Starting a message from a URL and Adding a Messages button to your website.
In general, use the terms Apple Messages for Business or Apple Messages in customer-facing communications. Avoid using the term Messages by itself, especially when paired with a logo-only button.
Use proper capitalization when mentioning Apple Messages for Business in headlines and copy. Specifically, use four words with an uppercase A, an uppercase M, and an uppercase B, and lowercase for all other letters.
Avoid using other terms to refer to Messages for Business in customer-facing content. For example, avoid using the terms chat or text to refer to a Messages for Business button or flow.
Never use the Apple logo to represent the name Apple in text. Apple Messages for Business is a service mark of Apple Inc.
Example text | |
| Apple Messages for Business |
| Apple Messages |
| Apple messages for business |
| iMessage |
| APPLE MESSAGES FOR BUSINESS |
| Messages for Business |
Adhere to Guidelines for Using Apple Trademarks. Apple trademarks must not appear in your app name or images. In text, use Apple product names exactly as shown in Apple Trademark List— never make them plural or possessive.
When configuring your Messages for Business experience, you can customize the colors of the conversation navigation bar and its back and Info buttons in iOS. These same colors appear in the message header in watchOS, brand name in watchOS, and recipient bubble in macOS.
Use sufficient color contrast ratios. Insufficient contrast makes content hard to see and can cause logos and buttons to blend in with the background. An online color contrast calculator can help you accurately analyze color contrast. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards. For guidance, see Color and effects.
On iPhone, your customers can use the system-wide appearance called Dark Mode. Because Dark Mode uses a darker color palette, you might need to redesign your logo and picker icons so that they look good in both light and dark appearances.
Wide logo
Messages list or square logo
List picker
Time picker
Use colors that contrast well with both light and dark color palettes. For example, dark transparencies and colors aren’t visible in Dark Mode.
Your logo visually identifies your business in Messages and other contexts throughout the system.
Test your logo’s appearance in all contexts. View your logo in the message list, conversation navigation bar, and notifications, and make sure it’s clear and distinct.
Provide your logo in both square and wide variations. Make sure your logo looks great everywhere by creating a separate version for each variation.
Use adequate padding in your logo. Unless your logo has full-bleed elements, it’s best to inset key elements from the edges by 10% of the image’s width and height.
Avoid using colors that make it hard for people to perceive your logo. For example, colorblind people might not be able to distinguish some color combinations, and insufficient contrast can cause icons and text to blend with the background and make content hard to read. For guidance, see Color and effects.
Your square logo appears on the contact card for your business, in search results, in the message list view, and in the navigation bar of a conversation if you don’t provide a wide logo.
Attribute | Value |
Background | Full color |
Color space | sRGB or P3 |
Format | PNG or JPEG |
Layers | Flattened |
Maximum file size | 2 MB |
Minimum dimensions | 1024x1024 px |
Padding | 10% of the image’s width and height |
Resolution | @3x |
Shape | Square canvas |
Transparency | No |
Your wide logo appears in the navigation bar of a conversation.
Attribute | Value |
Background | Transparent |
Color space | sRGB or P3 |
Format | PNG |
Layers | Flattened with transparency as appropriate |
Maximum file size | 2 MB |
Maximum width | 1706 px |
Minimum height | 256 px |
Resolution | @3x |
Shape | Rectangular canvas. Allow transparency to define the logo shape. |
Transparency | Yes |
Message bubbles for standard interactive messages like Apple Pay payment requests, rich links, and pickers include a title, and can optionally include additional text and an image (which can be a video thumbnail). Optional text includes a primary, secondary, and tertiary subtitle, and an image title and subtitle.
Message bubbles for standard interactive messages support the following layout styles.
Style | Description | Size |
Icon | Horizontal bubble with an icon | 280x65 pt |
Small | Horizontal bubble with a small image | 280x85 pt |
Large | Horizontal bubble with a large image | 280x210 pt |
Scale images based on the layout style. When using the same image for multiple layout styles, provide a scaled image variation for each layout style. See Image sizes for sizing guidance.
In a conversation, you can add an image to an interactive message bubble to provide greater context. When asking the customer to choose a product, for example, you could show product photos in a list picker to help people visually distinguish the items. Or, when requesting payment, you could show the item being purchased in the Apple Pay message bubble.
When you include a rich link to a video in a message bubble, you supply a thumbnail image that represents the video. The following size and resolution guidelines apply equally to images and video thumbnails.
Provide images at the following sizes, based on where the images are used. When displaying the same image at multiple sizes, provide a separate image for each size.
Usage | Image Size |
Interactive message message bubble (icon) | 40x40 pt (120x120 px @3x) |
Interactive message message bubble (small) | 60x60 pt (180x180 px @3x) |
Interactive message message bubble (large) | 263x150 pt (789x450 px @3x) |
List picker image | 60x60 pt (180x180 px @3x) |
A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels.
1x (10x10 px)
2x (20x20 px)
3x (30x30 px)
For example, suppose you have a standard resolution (@1x) image that’s 100x100 px. The @2x version of this image would be 200x200 px, and the @3x version would be 300x300 px.
Always provide high-resolution images with a scale factor of @3x. The @3x images you provide automatically scale down to @2x or @1x for display at lower resolutions.
Produce artwork in the appropriate format. Use de-interlaced PNG files for bitmap/raster artwork. Use JPEG for photos.
Use the 8-bit color palette for PNG graphics that don’t require full 24-bit color. Using an 8-bit color palette reduces file size without reducing image quality.
Optimize JPEG files to find a balance between size and quality. Most JPEG files can be compressed without noticeable degradation of the resulting image. Even a small amount of compression can save significant disk space. Experiment with compression settings on each image to find the optimal value that yields an acceptable result.
By creating screenshots to display on your website or in emails, you can show customers the benefits of using Messages for Business to communicate with your company.
Although you can create custom screenshots from scratch, the easiest method is to download the Messages for Business 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 help make screenshots look realistic, use SF Pro Regular for conversation text (you can download the San Francisco family of fonts here).
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.
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 Messages for Business 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. For example, your navigation bar and Messages header might look something like this:
Message bubbles appear in the conversation area of the Messages app screen. All conversation content, including text, links, and images, must appear within message bubbles.
To help people understand the flow of the conversation in your screenshot, it’s important to be consistent about how you use message 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 | #E6E5EB | Left | Black |
If you show only two message bubbles, use 4 points of vertical space to separate them. If you need to show more message bubbles, or more than one Send action, use 1 pixel to separate bubbles.
For a message bubble that contains only text, use the following values to determine its height.
Rows of text | Message bubble height (pixels) |
1 | 36 |
2 | 57 |
3 | 76 |
4 | 96 |
5 | 118 |
You might also want your screenshot to show message bubbles that include icons or rich links that display images or videos. When a message bubble includes a rich link, the title and the website URL appear below the image or video. An icon appears by itself in a message bubble. If you want to include images or icons in your message bubbles, use the following values to determine the bubble’s size.
Content | Maximum content size (pixels) | Message bubble size (pixels) |
Image (with tail) | Large (265x160) | 270x210 |
Image (without tail) | Large (265x160) | 265x210 |
Image (with tail) | Extra large (276x160) | 280x210 |
Icon | Medium (280x85) | 280x85 |
Icon | Small (60x33) | 280x65 |
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.
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.
No additional considerations for iOS, iPadOS, macOS, visionOS, or watchOS. Not supported in tvOS.