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:
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.
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.
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.
||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)
||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.