Chat Bubble Content

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

Chat Bubble Layout Styles

Chat bubbles for standard interactive messages support the following layout styles.

Style Description Size
Icon Horizontal bubble with an icon 280pt × 65pt
Small Horizontal bubble with a small image 280pt × 85pt
Large Horizontal bubble with a large image 280pt × 210pt

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.

Images for Chat Bubbles

In a conversation, you can add an image to an interactive message chat 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 chat bubble.

When you include a rich link to a video in a chat bubble, you supply a thumbnail image that represents the video. The following size and resolution guidelines apply equally to images and video thumbnails.

Image Sizes

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 chat bubble (icon) 120px × 120px (40pt × 40pt @3x)
Interactive message chat bubble (small) 180px × 180px (60pt × 60pt @3x)
Interactive message chat bubble (large) 789px × 450px (263pt × 150pt @3x)
List picker image 180px × 180px (60pt × 60pt @3x)

Designing High-Resolution Images

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.

Diagram of three circles, each rendered at a different resolution and having a different number of pixels. The left circle is in standard resolution at scale factor 1 and has 10 x 10 pixels. The middle circle is in high resolution at scale factor 2 and has 20 by 20 pixels. The right circle is in high resolution at scale factor 3 and has 30 by 30 pixels.

For example, suppose you have a standard resolution (@1x) image that's 100px × 100px. The @2x version of this image would be 200px × 200px, and the @3x version would be 300px × 300px.

Provide high-resolution images with a scale factor of @3x. Always provide @3x images to Business Chat. 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.