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