Starting a Conversation

Customers use Business Chat buttons to start a conversation with your company. You can also support system features like Maps, Safari, Siri, and Spotlight, so that customers can use them to locate your business and start a conversation. Another way to help customers contact you is to include a URL in an email message or open it in response to a button in your app or on your company’s website.

Screenshot of a Spotlight results screen on iPhone in which the user has searched for a company. The results include chat and phone buttons that contact the company and an App Store listing for the company's app.
Screenshot of a company's contact card.

Allow conversations to be started anytime. Don’t disable buttons or links that initiate conversations outside of normal business hours. Even if you only respond to customer service inquiries during certain hours, people should be able to start a conversation anytime. If a customer starts a conversation after hours when live agents aren’t available, an automated agent should send a reply letting them know when a live agent is able to respond.

Business Chat Buttons

Use Business Chat 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.

Whether on your website, in your app, or through email, the use of Business Chat buttons must also include a powerful call to action and clear contextual information that tells customers what to expect when they contact you. For example:

Partial screenshot of a Business Chat button near the call to action "Message with our team now" and the contextual information that includes "for details about our ingredients, special offers, or pre-orders."

Partial screenshot of a Business Chat button near the call to action "Recipe questions?" and the contextual information "Use the Messages app on your iPhone to get in touch"

Partial screenshot of both Business Chat buttons near the call to action "Want to check your order status?" and the contextual information "Chat with our agents to get quick help"

Partial screenshot of a Business Chat button near the call to action "Message us" and the contextual information that includes "Our team of experts is available every day between 8 AM and 8 PM EST."

Partial screenshot of both Business Chat buttons near the call to action "Questions? We can help." and the contextual information "Talk to one of our pros to get your offer for iPhone Xs"

Partial screenshot of a Business Chat button near the call to action "Design questions? We can help." and the contextual information "Chat with one of our experts to get design ideas."

Include a strong call to action. It's critical to make your call to action compelling and persuasive, so that customers instantly grasp the value of contacting you. Use a clear, succinct phrase that's relevant to the content on the page, such as Style questions? We can help, Book an appointment on Apple Business Chat, or Message with our team now. Place the call to action next to Business Chat buttons to encourage customers to initiate a conversation.

Include contextual information. Help the customer understand the benefits of a conversation with your business by placing a short explanatory message near the call to action. For example, you might use copy like Chat with a financial advisor now, Get quick help with your purchase, or Tap to chat with our styling experts now. It generally works best to display the contextual information in a font that's smaller than the font you used for the call to action.

Show the Business Chat button on supported devices. If a customer’s device doesn’t support Business Chat, don’t encourage a conversation by displaying a button—on websites, the button is automatically hidden when Business Chat isn’t supported. If the button is hidden, update the layout accordingly and remove the call to action or other related text.

Use approved button styles only. The default Business Chat button that Apple provides is a blue and gray SVG asset that is embedded with three different states: default, hover, and press. You can customize the button size as long as you maintain the overall button shape and the ratio of button size to icon size. You can also customize the colors for both the icon and the background circle, but these colors must maintain a sufficient contrast with the background (for more guidance, see Color). Do not make visual or functional modifications to the button assets in any way, including changing transparency or adding drop shadows.

Business Chat call and chat buttons shown side by side.

Make sure the Business Chat button is discoverable. People generally expect to find the button on contact information, support, order confirmation, product, and order history pages.

Display the Business Chat button prominently. Business Chat buttons should be the same size or larger than similar contact initiation buttons, such as an email button.

Maintain minimum clear space. The minimum amount of clear space required around the Business Chat 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. If you're not using the Business Chat JavaScript library to display Business Chat buttons, you're responsible for sizing and placing the buttons correctly.

The minimum button diameter is 45 px (45 pt) @1x or 90 px (45 pt) @2x. Although you can change the size of the buttons, you can't customize their circular shape.

Use the following margin values for guidance.

Margin Minimum value @1x Minimum value @2x
Top and bottom 15 px (15 pt) 30 px (15 pt)
Left and right 20 px (20 pt) 40 px (20 pt)
Between buttons 15 px (15 pt) 30 px (15 pt)

For developer guidance, see Starting a Chat from Your App and Adding a Business Chat Button to Your Website.